HTML SVG

The HTML SVG stands for Scalable Vector Graphics.HTML SVG is a modularized language that is used to describe graphics in XML format. It describes two-dimensional vector and mixed vector or raster graphics in XML. It is a W3C recommendation. HTML SVG images and their behaviors are provided in XML text files.

The <svg> element specifies the root of an SVG fragment. You can animate each element and each attribute in SVG files(document).

SVG Circle:

Draw circle by svg tag:

Example:

<!DOCTYPE html> 
<html> 
<body> 
<h2>SVG Circle</h2>
 <svg width="100" height="100"> 
 <circle cx="50" cy="50" r="40" stroke="#6666ff" stroke-width="4" fill="#ff00ff" /> 
 </svg>  
</body> 
</html>

OUTPUT:

HTML SVG

SVG Rectangle:

Draw rectangle by svg tag.

Example:

<!DOCTYPE html> 
<html> 
<body> 
<h2>SVG Rectangle</h2>
<svg width="200" height="100"> 
 <rect width="200" height="100" stroke="#ff0066" stroke-width="4" fill="#0000ff" /> 
</svg>  
</body> 
</html>

OUTPUT:

HTML SVG

SVG polygon:

Draw polygon by svg tag.

Example:

<!DOCTYPE html> 
<html> 
<body> 
 <svg height="210" width="500"> 
 <polygon points="100,10 40,198 190,78 10,78 160,198" 
 style="fill:#66ff33;stroke:#cc0000;stroke-width:5;fill-rule:nonzero;" /> 
</svg>  
</body> 
</html>

OUTPUT:

HTML SVG

SVG Logo:

Example:

<!DOCTYPE html>
<html>
<body>

<svg height="130" width="500">
 <defs>
  <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
   <stop offset="0%"
   style="stop-color:rgb(255,255,0);stop-opacity:1" />
   <stop offset="100%"
   style="stop-color:rgb(255,0,0);stop-opacity:1" />
  </linearGradient>
 </defs>
 <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
 <text fill="#ffffff" font-size="45" font-family="Verdana"
 x="50" y="86">SVG</text>
</svg>

</body>
</html>

OUTPUT:

HTML SVG

Why SVG is preferred over other image formats?

HTML SVG images can be saved as the smallest size possible. Unlike bitmap image formats like JPG or PNG, it does not support a fixed set of dots. So it is also an easy way to print with high quality.

HTML SVG images can be zoomed to a certain level without degradation of the picture quality.

HTML SVG images and their behaviors are provided in XML text files, so they can be created and edited with any text editor.