HTML <svg> Tag
The <svg> tag is used as a container for SVG graphics.
SVG (Scalable Vector Graphics) is a language for two-dimensional graphics based on XML with support for animation and interactivity. To draw images, it uses simple geometrical figures (circle, lines, polygon, etc.).
DANGER
The xmlns attribute is required only for the outer <svg> element of standalone SVG documents. It isn’t required for inner <svg> elements or in HTML documents.
Syntax <svg>
The <svg> tag comes in pairs. The content is written between the opening (<svg>) and the closing (</svg>) tags.
Example of the HTML <svg> tag:
HTML <svg> Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div style="display:flex; flex-flow:row wrap;">
<svg width="180" height="180">
<rect x="20" y="20" rx="20" ry="20" width="100" height="100" style="fill:lightgray; stroke:#1c87c9; stroke-width:4;"/>
</svg>
<svg width="200" height="200">
<circle cx="100" cy="70" r="60" stroke="#1c87c9" stroke-width="4" fill="lightgray"/>
</svg>
<svg width="200" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lightgray; stroke:#1c87c9; stroke-width:4; fill-rule:evenodd;"/>
</svg>
</div>
</body>
</html>Example of the HTML <svg> tag drawing an ellipse:
Example of the HTML <svg> tag drawing an ellipse:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="200">
<ellipse cx="100" cy="50" rx="100" ry="50" fill="#1c87c9" />
</svg>
</body>
</html>Differences between SVG and Canvas
At first sight, both SVG and Canvas are doing the same thing, drawing vector artwork using coordinate points. However, there are differences between them. Let’s have a look at them.
SVG is a language for describing 2D graphics in XML, whereas Canvas is used to draw 2D graphics on the fly (with JavaScript).
SVG is like a "draw" program. The drawing is a drawing instruction for each shape, and any part of any shape can be changed. Drawings are shape-oriented.
Canvas is like a "paint" program. When the pixels hit the screen, this is your drawing. You can change shapes only by overwriting them with other pixels. Paintings are pixel-oriented.
SVG is based on XML, which means that every element is available within the SVG DOM. In SVG, the drawn shape is remembered as an object. In Canvas, the browser forgets the drawn form immediately after it has been drawn. If you need to make changes in the drawing, you should draw it from scratch.
Attributes
| Attribute | Value | Description |
|---|---|---|
| baseProfile | none (default), full, basic, tiny | Describes the minimum SVG language profile that the author believes is necessary to correctly render the content. Not supported after SVG2. |
| contentScriptType | content-type | Specifies the default scripting language for the given document fragment. Not supported after SVG2. |
| contentStyleType | content-type | Identifies the default style sheet language used by the SVG fragment. Not supported after SVG2. |
| height | length, percentage | Defines the height of the SVG element. |
| preserveAspectRatio | none, xMinYMin, xMidYMin, xMaxYMin, xMinYMid, xMidYMid, xMaxYMid, xMinYMax, xMidYMax, xMaxYMax, meet (default), slice | Defines how the SVG fragment must be deformed if it is embedded in a container with a different aspect ratio. |
| version | number | Defines the version of SVG used for the inner content of the element. Not supported after SVG2. |
| viewBox | list-of-numbers | Defines the bounds of the SVG viewport for the current SVG fragment. |
| width | length, percentage | Determines the width of the SVG element. |
| x | length, percentage | Determines the x coordinate of the SVG container. It has no effect on outermost SVG elements. |
| y | length, percentage | Determines the y coordinate of the SVG container. It has no effect on outermost SVG elements. |
Practice
What is the purpose of the SVG tag in HTML?