Enter your email id to get regular update free
Login
Your Email
Pasword

What is svg Element in HTML graphics?

It stands for Scalable Vector Graphics and used to define graphics for Web

The HTML <SVG> element is a container for SVG graphics.It has different methods for drawing paths, boxes, circles, text, and graphic images etc.
Drawing SVG Circle:
<svg width="100" height="100"> 
<circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="red" /  >
</svg>

Drawing SVG Rectangle:
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,100);stroke-width:10;stroke:rgb(0,0,200)" />
</svg>

Drawing SVG Rounded Rectangle:
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>
 
Drawing SVG Star:
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:blue;stroke-width:5;fill-rule:evenodd;"/>
</svg>

Drawing SVG Logo:
<svg height="130" width="500">
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
Sorry, your browser does not support inline SVG. 
</svg>

SVG
HTML
HTML graphics
Ayesha
Tech writer at newsandstory
Total 107 views