HTML <svg> tag
SVG is used to determine the vector-based graphics in XML format.
What is SVG?
We utilize SVG tag to specify visuals for the website. The attribute of SVG in a HTML document serves as a container for all the SVG visuals.
There are several ways to draw text, boxes, pathways, and visual images with SVG.
Syntax:
<body>
<svg>
……………
</svg>
</body>SVG Circle
Example:
<!DOCTYPE html>
<html>
<head>
< title > html svg tag < /title >
</head>
<body>
<svg width=" 200 " height=" 200" >
<circle cx="100" cy="100" r="40" stroke="red" stroke-width="4" fill="blue" />
</svg>
</body>
</html>
Output:
SVG Rectangle
Example
<!DOCTYPE html>
<html>
<head>
<title> html svg tag </title>
</head>
<body>
<svg width="400" height="200">
<rect width="400" height="200" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
</body>
</html>
Output:
SVG Rounded Rectangle
Example
<!DOCTYPE html>
<html>
<head>
<title> html svg tag </title>
</head>
<body>
<svg width="400" height="180">
<rect x="100" y="20" rx="20" ry="20" width="100" height="100"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
</body>
</html>Output:
SVG Star
Example
<!DOCTYPE html>
<html>
<head>
<title> html svg tag </title>
</head>
<body>
<svg width="400" height="400">
<polygon points="150,10 80,200 220,80 50,80 200,200"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>
Output:
SVG Logo
Example
<!DOCTYPE html>
<html>
<head>
<title> html svg tag </title>
</head>
<body>
<svg height="130" width="1000">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="200%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="200%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="100" y="86">SVG</text>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>Output:
Browser support:
List of browsers that support html <section> tag are mentioned below:
Google Chrome: yes, Version 1 needed
Microsoft Edge: yes, Version 12 needed
Firefox: Yes, Version 1.5 needed
Safari: Yes, Version 3 needed
Opera: Yes, Version 8 needed