HTML SVG

HTML SVG

SVG, which stands for Scalable Vector Graphics, is an XML-based format for vector graphics. Unlike raster images (like JPEGs or PNGs), which are made up of pixels, SVG images are made up of paths, shapes, and text defined in XML code. 

This makes SVG images resolution-independent, meaning they can be scaled to any size without losing quality, making them ideal for web graphics, logos, icons, and illustrations.

Key Features of SVG:

Scalability: SVG graphics can be scaled up or down without any loss of quality.

Interactivity: SVG supports interactivity and animation, making it useful for creating dynamic web content.

Lightweight: SVG files are generally smaller in size compared to raster images, especially when dealing with simple graphics.

Text-based: Being XML-based, SVG files can be edited in any text editor, and it's easy to manipulate their properties with CSS and JavaScript.

Basic Structure of an SVG File:

Here’s a simple example of an SVG file:

Example:

<svg width="400" height="400">  
 <circle cx="100" cy="100" r="80" stroke="red" stroke-width="6" fill="yellow" />  
</svg> 

Output:

HTML SVG Rectangle Example

Let's see the example to draw rectangle by svg tag.

Example:

<svg width="400" height="200">  

  <rect width="400" height="200" stroke="red" stroke-width="6" fill="yellow" />  

</svg>  

Output:

HTML SVG polygon Example

Let's see the example to draw polygon by svg tag.

Example:

<svg height="300" width="600">  

  <polygon points="100,10 40,198 190,78 10,78 160,198"  

  style="fill:yellow;stroke:red;stroke-width:5;fill-rule:nonzero;" />  

</svg>  

Output: