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