Drawing with SVG in html

 

HTML5 supports drawing with SVG.

What is an SVG?

• SVG is an acronym for Variable Size Vector Graphics.

• SVG is used to identify images that are of the type of vector (as opposed to bitmap) used on the web.

• SVG is used with XML language technologies.

• SVG images do not lose quality when the image is enlarged, unlike bitmap images such as jpg, png, and gif.

• Every element inside an SVG file can be animated.

• The SVG language is one of the technologies developed by the World Wide Web Organization W3C.

Special Advantages When Using SVG

We will give you some advantages when using SVG compared to other image formats such as jpg, which are:

•  SVG images can be created and modified with a text editor program.

• SVG images can be searched, indexed, coded only, and compressed.

• SVG images are resizable.

• SVG images can be printed in high quality and resolution.

• SVG images can be greatly enlarged without changing the resolution and quality of the image.

Supported browsers

All modern browsers support the SVG feature.

Attach SVG code directly to HTML pages

Using HTML5, SVG code can be attached directly to HTML pages:

Example: Five-pointed star

<svg width="300" height="350">

<g>

<polygon points="150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5"

stroke="black" stroke-width="3" fill="rgb(121,0,121)">

</g>

</svg>