HTML <svg> Tag

The <svg> tag is used as a container for SVG graphics.

SVG (Scalable Vector Graphics) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. For drawing images it uses simple geometrical figures (lines, circle, polygon, etc.).

Syntax <svg>

The <svg> tag comes in pairs, its content is written between the opening (<svg>) and the closing (</svg>) tags.

Example

<!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>

Result

Differences between SVG and Canvas

At first glance 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 a JavaScript).

SVG is like a "draw" program. The drawing actually is a drawing instructions for each shape and any part of any shape can be changed. Drawings are shape-oriented.

Canvas is like a "paint" program. Once the pixels hit the screen, that is your drawing. You cannot change shapes except by overwriting them with other pixels. Paintings are pixel-oriented.

SVG is XML based, which means that every element is available within the SVG DOM. In SVG, each drawn shape is remembered as an object. In Canvas the browser forgets the drawn shape immediately after it is 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 vertical length of rect.
preserveAspectRatio none
xMinYMin,br/> xMidYMin
xMaxYMin
xMinYMid
xMidYMid
xMaxYMid
xMinYMax
xMidYMax
xMaxYMax
Defines how the SVG fragment must be deformed if it is embedded in a container with a different aspect ratio.
meet (default) Defines, that an image preserves its proportion and is visible.
slice Defines, that an image preserves its proportion and the viewBox is scaled down as much as possible.
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 bound of the SVG viewport for the current SVG fragment.
width length |
percentage
Determines the width of the rect.
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.

Browser support

4+ 9+ 3+ 4+ 10+