What is SVG Generator in HTML5 ?

Last Updated : 29 Sep, 2021

What is exactly SVG ?

SVG stands for Scalable Vector Graphics. It is used for creating and defining graphics for the webpage. It basically defines vector-based graphics in XML format. SVG graphics do NOT lose any quality if they are zoomed or resized. Every element and Attribute in SVG files can be animated.

What is its Container in HTML ?

HTML <svg> element container is used for defining the SVG graphics. The vector graphics created by using SVG generator are supported by all modern web browsers like Google Chrome, Mozilla Firefox, Microsoft Edge, etc. All these web browsers can display SVG Graphics without a 3rd Party software requirement, just like PNG, GIF, etc.

Note: SVG is a W3C recommendation! (Dated : 14 January 2003).

How to create Graphics using SVG ?

Given below are few examples of SVG graphics. These Samples are only for understanding.

1. SVG Rectangle

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>SVG - Rectangle</title> 
</head> 
  
<body> 
    <svg width="300" height="100"> 
        <rect width="300" height="100" 
        style="fill:green;stroke-width:5;stroke:rgb(0,0,0)" /> 
    </svg> 
</body> 
  
</html>

SVG – Rectangle

2. SVG Circle

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>SVG - Circle</title> 
</head> 
  
<body> 
    <svg width="300" height="300"> 
        <circle cx="50" cy="50" r="40" 
            stroke="black" stroke-width="5" 
            fill="orange" /> 
    </svg> 
</body> 
  
</html>

SVG – Circle

3. SVG Star

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>SVG - Star</title> 
</head> 
  
<body> 
    <svg width="300" height="200"> 
        <polygon points= 
            "100,10 40,198 190,78 10,78 160,198" 
            style="fill:purple; 
            stroke:black;stroke-width:3;" /> 
    </svg> 
</body> 
  
</html>

SVG – Star

What’s so special about SVGs ?

SVG have some advantages which make it preferable over other image formats like JPEG PNG GIF etc.

SVG can be created and edited using any text editor.
SVG can be scaled or zoomed easily.
SVG offer high quality for any resolution.
SVG are purely XML scripted.

Note: SVG is used for defining 2D Graphics. It is an XML-based tool.

Apart from the SVG generator, Canvas is also a 2D Graphics generator tool that is based on JavaScript. The difference in SVG is that each described shape is remembered as an object i.e. there is no requirement of re-rendering the shape if attributes of SVG graphics are changed.

Suggest improvement

What is the <picture> Element used for in HTML5 ?

Share your thoughts in the comments