HTML <svg> Tag
HTML
The SVG tag is used to define vector-based graphics in XML and which can be embedded directly into HTML pages.
HTML <svg> Tag.
➔ The canvas tag in HTML is resolution-dependent, whereas svg is resolution-independent.
➔ SVG graphics are scalable, and their quality is not lost even when zoomed or resized.
➔ The <svg> tag in HTML is used to specify a container that defines a new coordinate system and viewport for SVG (Scalable Vector Graphics).
➔ SVG is a language for describing 2D graphics in XML, which can be embedded directly into HTML pages.
➔ Since SVG is an XML dialect, it is always necessary to properly bind the namespace with the xmlns attribute.
➔ The xmlns="http://www.w3.org/2000/svg" namespace identifies SVG elements within an HTML document.
➔ xmlns is the only required attribute in the outermost svg element of an SVG document, or inside an HTML document with XML serialization.
Syntax
<svg height="250" width="600" xmlns="http://www.w3.org/2000/svg">
<!-- Objects definition goes here-->
<line x1="10" y1="10" x2="400" y2="100" style="stroke:#ff0000;stroke-width:3" />
</svg>
Example (line)
<!DOCTYPE html>
<html>
<head>
<title>HTML SVG Line Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
</head>
<body>
<h2>HTML SVG Line Example</h2>
<svg height="250" width="600" xmlns="http://www.w3.org/2000/svg">
<line x1="10" y1="10" x2="400" y2="10" style="stroke:#ff0000;stroke-width:2" />
<line x1="10" y1="20" x2="400" y2="50" style="stroke:#000000;stroke-width:1" />
</svg>
</body>
</html>
Click on the "Try it Now" button to see how it works.
Sample Code
Copy each file contents and paste it to your own project and run to see the final output
Example (circle)
<!DOCTYPE html>
<html>
<head>
<title>HTML SVG tag Circle Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
</head>
<body>
<h3>HTML SVG Circle Example</h3>
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="#e5e5ff">
<circle cx="50" cy="50" r="40" />
<svg viewBox="0 0 10 10" x="200" width="100" stroke="blue" fill="#ff0000">
<circle cx="5" cy="5" r="4" />
</svg>
</svg>
</body>
</html>
Click on the "Try it Now" button to see how it works.
Example (rectangle)
<!DOCTYPE html>
<html>
<head>
<title>HTML SVG tag Rectangle Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
</head>
<body>
<h3>HTML SVG Rectangle Example</h3>
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="#e5e5ff">
<circle cx="50" cy="50" r="40" />
<rect x="150" y="10" width="100" height="50" stroke="black" stroke-width="2" fill="skyblue" />
</svg>
</body>
</html>
Click on the "Try it Now" button to see how it works.
Example (polygon)
<!DOCTYPE html>
<html>
<head>
<title>HTML SVG tag Polygon Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
</head>
<body>
<h3>HTML SVG Polygon Example</h3>
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="#e5e5ff">
<rect x="150" y="10" width="100" height="50" stroke="black" stroke-width="2" fill="skyblue" />
<polygon points="50,10 20,50 80,50" style="fill:#d1d1d1;stroke:purple;stroke-width:1" />
</svg>
</body>
</html>
Click on the "Try it Now" button to see how it works.