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>