![](https://theadvansity.com/wp-content/uploads/2021/06/HTML-SVG.png-copy.jpg)
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 in situations where 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 being able to use them in HTML is really neat.
SVG is useful for diagrams, vectors, charts and graphs in the browser. Let’s learn about how you can use them in detail here.
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. The syntax is following:
<svg width="width here" height="height here ">
…. …. …. ….
</svg>
Examples of SVGs in HTML
Now, let’s take a look at some example 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:
![HTML SVG eg1](https://cdn.educba.com/academy/wp-content/uploads/2019/11/HTML-SVG-eg1.png.webp)
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:
![HTML SVG eg2](https://cdn.educba.com/academy/wp-content/uploads/2019/11/HTML-SVG-eg2.png.webp)
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:
![HTML SVG eg3](https://cdn.educba.com/academy/wp-content/uploads/2019/11/HTML-SVG-eg3.png.webp)
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. Popular Course in this categoryHTML Training (12 Courses, 19+ Projects, 4 Quizzes)12 Online Courses | 19 Hands-on Projects | 89+ Hours | Verifiable Certificate of Completion | Lifetime Access | | 4 Quizzes with Solutions
4.5 (6,502 ratings)Course Price
₹6999 ₹41999
View Course
Related CoursesBootstrap Training (2 Courses, 6+ Projects)XML Training (5 Courses, 6+ Projects)CSS Training (9 Courses, 9+ Projects)
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:
![HTML SVG eg4](https://cdn.educba.com/academy/wp-content/uploads/2019/11/HTML-SVG-eg4.png.webp)
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:
![eg5](https://cdn.educba.com/academy/wp-content/uploads/2019/11/HTML-SVG-eg5.png.webp)
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:
![eg6](https://cdn.educba.com/academy/wp-content/uploads/2019/11/HTML-SVG-eg6.png.webp)
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:
![eg7](https://cdn.educba.com/academy/wp-content/uploads/2019/11/HTML-SVG-eg7.png.webp)
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:
![eg8](https://cdn.educba.com/academy/wp-content/uploads/2019/11/HTML-SVG-eg8.png.webp)
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:
![eg9](https://cdn.educba.com/academy/wp-content/uploads/2019/11/HTML-SVG-eg9.png.webp)
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:
![HTML SVG eg10](https://cdn.educba.com/academy/wp-content/uploads/2019/11/HTML-SVG-eg10.png.webp)
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 –