SVG Tag In HTML | Using Of SVG Tag IN HTML | HTML In Hindi Youtube Channel | Basic HTML | Lesson 24

SVG Tag In HTML
SVG Tag In HTML

In this article, we will learn using of <svg> tag in HTML. HTML मैं कैसे <svg> tag का इस्तेमाल Circle, Rectangle, Square और भी आकर देने के लिए कैसे इस्तेमाल किया जाता हैं।  तो चलिए शुरू करते हैं।



Using of <svg> Tag in HTML

If we want to draw Circle, Rectangle, Polygon in HTML, then we can use the <svg> tag. We can write text inside this shape. अगर हम HTML मैं Circle, Rectangle, Polygon बनाकर उसके अंदर कुछ लिखना चाहतें हैं तो वो इस टैग के माध्यम से हम कर पाएंगे। 

How to make a Circle using <svg> tag?

<html>
<body>
<!--This is a Circle-->
<svg width="300" height="500">
<circle cx="100" cy="100" r="80"fill="powderblue" stroke="blue" stroke-width="5"/>
 <text x="50" y="50">Circle shape...!</text>
</svg>
</body>
</html>

SEE OUTPUT


Circle shape...!

How to make a Rectangle using <svg> tag?

<svg width="200" height="500">
<rect width="200" height="100" fill="powderblue" stroke="blue" stroke-width="5"/>
<text x="50" y="50"> This is rectangle. </text>
</svg>

SEE OUTPUT

This is a rectangle.



How to make a Line using <svg> tag?

<svg width="300" height="500">
<line x1="300" y1="300" x2="100" y2="100" fill="yellow" stroke="red" stroke-width="2"/>
</svg>

SEE OUTPUT 

 

How to make a Square using <svg> tag?

<svg width="300" height="500">
<rect x="50" y="50" rx="20" ry="20" width="150" height="150" fill= "orange" stroke="red" stroke-width="3" opacity="0.5"/>
</svg>

SEE OUTPUT



How to make a Star using <svg> tag?

<svg width="300" height="400">
<polygon points="100,10 40,198 190,78 10,78 160,198" fill="lime" stroke="purple" stroke-width="5" fill-rule="evenodd"/>
</svg>

SEE OUTPUT





Watch Youtube Video Here 


Post a Comment

0 Comments