Quick Links
The HTML 5 SVG is an acronym & it is stands for Scalable Vector Graphics.
SVG is mostly used for vector type diagrams like pie charts, 2-Dimensional graphs in an X,Y coordinate system etc.
The <svg> element specifies the root of a SVG fragment. You can animate every element and every attribute in SVG files.
SVG Circle Example :
<svg width=”100″ height=”100″>
<circle cx=”50″ cy=”50″ r=”40″ stroke=”black” stroke-width=”5″ fill=”blue” />
</svg>
Rectangle Example :
<svg width=”200″ height=”100″>
<rect width=”200″ height=”100″ stroke=”green” stroke-width=”5″ fill=”blue” />
</svg>
SVG polygon Example :
<svg height=”210″ width=”500″>
<polygon points=”100,10 40,198 190,78 10,78 160,198″
style=”fill:blue;stroke:green;stroke-width:5;fill-rule:nonzero;” />
</svg>
Inserting HTML 5 SVG Images:
A SVG images can be added to HTML code with just a basic image tag that include source attribute pointingto the image.
Example:
<img src= “image.svg” alt=” ” height=”300″ />
Recommended Posts: