Back to: HTML Tutorials
SVG Graphics in HTML with Examples
In this article, I am going to discuss SVG Graphics in HTML with Examples. Please read our previous article where we discussed Canvas Graphics in HTML with Examples.
What is SVG in HTML?
The HTML SVG is an abbreviation for Scalable Vector Graphics. In XML format, it basically defines vector-based graphics. In SVG files, every element and attribute can be animated.
When you zoom or resize SVG graphics, the quality does not deteriorate. It is essential to have a working knowledge of languages such as XML and HTML in order to create SVG format images.
The HTML <svg> Element
In Html <svg> element is used to create scalable vector graphics. We can draw 2D graphics in HTML with the help of svgs. Svgs can be useful to create icons and logos for websites. To create a canvas, we need both HTML and JavaScript but to create svgs no scripting language is required.
SVG Circle in HTML
In the example below we have created a circle with the help of SVG. Inside the SVG <circle> element is used to create a circle. The stroke attribute is used to define the color of the border, which is black in our case. The next attribute, stroke-width, specifies the width of the circle. The last attribute is filled that is used to specify which color has to be filled in the SVG. cx and cy are used to define the starting point of the circle and r is used to define the radius of the circle.
<!DOCTYPE html> <html> <body> <svg width="300" height="300"> <circle cx="150" cy="150" r="100" stroke="black" stroke-width="8" fill="hotpink" /> </svg> </body> </html>
When you run the above HTML code, you will get the following output in the browser.
SVG Rectangle in HTML
In the example below we have created a rectangle with the help of SVG. Inside the SVG <rect> element is used to create a rectangle. x and y are used to define the starting point of the rectangle.
<!DOCTYPE html> <html> <body> <svg width="400" height="180"> <rect x="50" y="20" width="300" height="150" style="fill:dodgerblue;stroke:black;stroke-width:5;opacity:0.5" /> </svg> </body> </html>
When you run the above HTML code, you will get the following output in the browser.
SVG Rounded Rectangle in HTML
In the example below we have created a rectangle with rounded corners with the help of SVG. Inside the SVG <rect> element is used to create a rectangle. x and y are used to define the starting point of the rounded rectangle. Rx and Ry are used to define the radius along the x and y-axis respectively.
<!DOCTYPE html> <html> <body> <svg width="400" height="180"> <rect x="50" y="20" rx="20" ry="20" width="250" height="150" style="fill:mediumseagreen;stroke:black;stroke-width:5;opacity:0.5" /> </svg> </body> </html>
When you run the above HTML code, you will get the following output in the browser.
SVG Star in HTML
In the example below we have created a star with the help of SVG. Inside the SVG <polygon> element is used to create a star. <polygon points=”x1,y1,x2,y2,x3,y3……..” > is used to define the points of a polygon.
<!DOCTYPE html> <html> <body> <svg width="500" height="300"> <polygon points="120,30 60,218 210,98 30,98 180,218" style="fill:yellow;stroke:slateblue;stroke-width:15;" /> </svg> </body> </html>
When you run the above HTML code, you will get the following output in the browser.
SVG Ellipse in HTML
In the example below we have created an elliptical gradient with the help of SVG. Inside the SVG <ellipse> element is used to create an ellipse. cx and cy are used to define the starting point of the ellipse and RX, RY is used to define the radius of the ellipse along the x and y-axis.
<!DOCTYPE html>
<html>
<body>
<svg height="130" width="500" stroke="black" stroke-width="3">
<defs>
<linearGradient id="grad1" x1="20%" y1="0%" x2="70%" y2="0%">
<stop offset="0%"
style="stop-color:rgb(0,255,0);stop-opacity:1" />
<stop offset="100%"
style="stop-color:rgb(255,200,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#141414" font-size="45" font-family="Verdana"
x="45" y="86">Hello</text>
</svg>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
Here, in this article, I try to explain SVG Graphics in HTML with Examples and I hope you enjoy this SVG Graphics in HTML with Examples article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.