Updated March 18, 2023
Introduction to HTML SVG
Using images in HTML is awesome for multimedia-rich websites. All you have to do is add a tag to the HTML code, and viola, your browser will display and even add a link to the image of your choice. It gets a little troubling when you know that the image or diagram will be zoomed in because a JPG or PNG won’t show any further detail once it is zoomed in past its resolution. SVG is the solution to this problem. SVG stands for Scalable Vector Graphics. As the name suggests, these can be zoomed in as much as needed, and the details never vanish. SVGs are not exclusive to web technology, but using them in HTML is really neat. SVG is useful for diagrams, vectors, charts, and graphs in the browser.
Syntax of Embedding SVG in HTML:
Similar to using canvas in HTML5, there is a simple tag that you can use to embed SVG in HTML5 pages.
Syntax:
<svg width="width here" height="height here ">
…. …. …. ….
</svg>Examples of SVG in HTML
Given below are some examples of vectors that can be created and embedded in HTML5:
Example #1 – Drawing a rectangle via SVG in HTML
Code:
<!DOCTYPE html>
<html>
<body>
<svg width="500" height="600">
<rect width="400" height="200" style="fill:rgb(0,0,200);stroke-width:5;stroke:rgb(255,0,0)"/>
Sorry but this browser does not support inline SVG.
</svg>
</body>
</html>Output:
Example #2 – Drawing a square with rounded corners in SVG
For a square with rounded corners, we will have to define the radius of the corners with the use of rx, ry aside from the size and dimensions of the square.
Code:
<!DOCTYPE html>
<html>
<body>
<svg width="500" height="500">
<rect x="100" y="100" rx="30" ry="30" width="300" height="300" style= "fill:green stroke:blue; stroke-width:5 ; opacity:0.5" />
Sorry but this browser does not support inline SVG.
</svg>
</body>
</html>Output:
Example #3 – Drawing a circle in SVG with outline and color filing inside it
Code:
<!DOCTYPE html>
<html>
<body>
<svg width= "400" height= "400">
<circle cx= "100" cy= "100" r="90" stroke= "red" stroke-width="1" fill="grey" />
Sorry but this browser does not support inline SVG.
</svg>
</body>
</html>Output:
Example #4 – Drawing a straight line with SVG in HTML5
We can use the <line> tag to draw a straight line in HTML5 SVGs; color, the thickness of line, and position can be defined.
Code:
<html>
<body>
<svg width= "400" height= "400">
<line x1 = "5" y1 = "5" x2 = "300" y2 = "300" style = "stroke:yellow; stroke-width:3"/>
</svg>
</body>
</html>Output:
Example #5 – Drawing an eclipse via SVG in HTML5
We can use the <eclipse> tag to draw an eclipse in HTML5 SVGs; its color and position can be defined along die with its radius.
Code:
<!DOCTYPE html>
<html>
<body>
<svg height="300" width="300">
<ellipse cx="150" cy="100" rx="120" ry="70" style="fill:brown; stroke:green; stroke-width:3" />
Sorry but this browser does not support inline SVG.</svg>
</body>
</html>Output:
Example #6 – Creating a polygon with SVG in HTML5
The tag <polygon> can be used in SVGs to create polygons. In the tag, we are required to mention the positions of each point. Filling colors, outline thickness, etc., can be defined in the code too.
Code:
<!DOCTYPE html>
<html>
<body>
<svg height="300" width="600" >
<polygon points="10,10 250,250 200,300" style="fill: red; stroke: black; stroke-width: 2" />
Sorry but this browser does not support inline SVG. </svg>
</body>
</html>Output:
Example #7 – Creating a polyline with SVG in HTML5
Polyline is used to draw a shape that will only consist of a straight line. Keep in mind that these lines must be connected too. Here is an example of a polyline implementation in HTML5.
Code:
<!DOCTYPE html>
<html>
<body>
<svg height="300" width="600">
<polyline points="10,10 60,60 70,100 80,120 300,200 250,300" style="fill: none; stroke: black; stroke-width: 3" />
Sorry but this browser does not support inline SVG. </svg>
</body>
</html>Output:
Example #8 – Drawing Text with SVG in HTML5
The text could be necessary for any SVG in many situations, such as labeling a chart, etc. Luckily, there exists a <text> tag in SVG which can be used. The text can be set at any position in the SVG, and you can customize its color and other details too.
Code:
<!DOCTYPE html>
<html>
<body>
<svg height="300" width="500">
<text x="10" y="20" fill="purple" transform="rotate(30 20,40)">Here is an example, it's very examply </text>
Sorry but this browser does not support inline SVG. </svg>
</body>
</html>Output:
Example #9 – Drawing a Star with SVG in HTML5
Now that we are done with the basics let’s create a star that will be made with the help of SVG.
Code:
<!DOCTYPE html>
<html>
<body>
<svg width="400" height="400">
<polygon points="110,10 50,198 200,78 30,78 170,198"
style="fill:orange; stroke:green; stroke-width:5; fill-rule:evenodd;" />
Sorry but this browser does not support inline SVG. </svg>
</body>
</html>Output:
Example #10 – Using Linear Gradient in SVG
You can use linear and radial Gradient in SVG much line HTML Canvas. The gradient has to be nested in the <defs> tag. This tag is then marked in the SVG tag to denote its usage. Let’s take a look at an example that uses Gradient in an eclipse.
Code:
<!DOCTYPE html>
<html>
<body>
<svg height="300" width="400">
<defs>
<linearGradient id="gr1" x1="0%" y1="60%" x2="100%" y2="0%">
<stop offset="5%" style="stop-color:rgb(255,255,3);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="125" cy="150" rx="100" ry="60" fill="url(#gr1)" />
Sorry but this browser does not support inline SVG. </svg>
</body>
</html>Output:
Conclusion
In the case of sites where diagrams and charts are to be used, SVGs are a lifesaver. Most modern web browsers support SVG, too and aside from being scalable. Another benefit of using SVG is its file size. Because it is just a bit of code, SVGs can have a very small footprint in memory and bandwidth consumed compared to traditional Images.
Recommended Articles
This is a guide to HTML SVG. Here we discuss the basic concept and top 10 examples of HTML SVG with explanation and code implementation. You may also look at the following articles to learn more –
