Html 5 SVG

svg in html

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” />

Rectangle Example :

<svg width=”200″ height=”100″>
  <rect width=”200″ height=”100″ stroke=”green” stroke-width=”5″ fill=”blue” />

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;” />

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.


<img src= “image.svg” alt=” ” height=”300″ />

Recommended Posts:

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *