DEV Community

MurtazaNeher
MurtazaNeher

Posted on

HTML SVG

HTML SVG is a modularized language which is used to describe graphics in XML. It describe two-dimensional vector and mixed vector/raster graphics in XML. It is a W3C recommendation. SVG images and their behaviors are defined in XML text files. So as XML files, you can create and edit an SVG image with text editor, but generally drawing programs like inkspace are preferred to create it.

SVG is mostly used for vector type diagrams like pie charts, 2-Dimensional graphs in an X,Y coordinate system etc.

The element specifies the root of a SVG fragment. You can animate every element and every attribute in SVG files.

*HTML SVG Circle Example
*

<svg width="100" height="100">  
 <circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" />  
</svg> 
Enter fullscreen mode Exit fullscreen mode

Output:

Image description

HTML SVG Rectangle Example

<svg width="200" height="100">  
  <rect width="200" height="100" stroke="yellow" stroke-width="4" fill="red" />  
</svg>  
Enter fullscreen mode Exit fullscreen mode

Output:

Image description

Top comments (0)