In this tutorial we will show you the solution of how to use SVG in HTML, all of us know that SVG stands for scalable vector graphics. It helps us to display and create images, logo’s, animations and shapes also.
It’s not an image but it is an inbuilt tag in html named as svg, which is a paired tag and to use this tag we have to simply define other elements in this tag.
SVG is mostly preferred for developers because it is less in size then others and also have high resolution. There is no any effect of zoom in and out on resolutions of svg tag.
Step By Step Guide On How To Use SVG In HTML :-
As, SVG is a paired tag and other elements are specified in between these, so you can make any shape using this tag, this is also used to make logo’s.
This SVG is supported by all the browser now days. Now, we will help you to understand that how you able to make an svg tag in html and how it is used.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
</head>
<body style="text-align: center;">
<svg style="width: 150px; height=100px;">
<rect width="150" height="100" fill="red"/>
</svg>
<svg style="width: 250px; height:190px;">
<rect width="200" height="100" fill="black" x="30" y="40" rx="30" ry="40"/>
</svg>
<svg style="width: 250px; height:190px;">
<circle cx="100" cy="90" r="50" fill="orange" />
</svg>
<svg style="width: 1000px; height:190px;">
<text x="10" y="100" font-size="60" fill="black">
this is text you can write what you want
</text>
</svg>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. In the body tag, now here we create different svg tags to represent different structures for you.
- Here we create a rectangle, circle and rectangle with radius. At the end, we also show you that how we able to show text with the help of svg elements.
- These all are made in svg tags and when you zoom in and out it the resolution of graphics remains same every time. Hence, this is all done with the help of svg where height and width are used to define dimensions and rx and ry to radius of rectangle.
- In circle, cx and cy are dimension of circle with its radius r. whereas the font size and x, y are used to give dimensions to text. When you customize all of them according to your values then you understand that how they work.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, we can say that we are able to divide html page vertically by using division tags and in next session we will also help you to understand that how you able to divide the page horizontally.
I hope this tutorial on how to use SVG in HTML helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
