<svg>

The <svg> tag is used to create and manipulate vector graphics.

It allows you to draw:

• shapes,
• text,
• images,
• or even animations directly in a web page.

Unlike the <canvas> tag, SVG elements remain editable after their creation.

Structure and syntax of the <svg> tag

Structure

Here is an example of simple syntax for the <svg> tag:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" fill="blue" />
</svg>

In this example:

• width and height define the dimensions of the SVG area.
• xmlns specifies the XML namespace required for SVG (a must-have!).
• <circle> draws a blue circle centered at (100, 100) with a radius of 50 pixels.

Here is a small example:

Example

Here is an example of a more complex drawing with SVG:

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="100" height="50" fill="red" />
  <circle cx="200" cy="50" r="40" fill="green" />
  <line x1="10" y1="150" x2="290" y2="150" stroke="blue" stroke-width="4" />
  <text x="150" y="180" font-size="16" text-anchor="middle" fill="black">Example SVG</text>
</svg>

In this example:

• <rect> draws a red rectangle.
• <circle> creates a green circle.
• <line> draws a blue line with a stroke width of 4 pixels.
• <text> displays the text "Example SVG" centered.

Try it yourself:

Attributes

The <svg> tag accepts several attributes allowing you to define its dimensions and behavior:

• width: width of the SVG area;
• height: height of the SVG area;
• viewBox: defines a coordinate view to redimension the content proportionally;
• xmlns: specifies the XML namespace (mandatory).

Difference between <svg> and <canvas>

Here is a quick comparison between these two tags:

Best practices

Here are some tips when using this tag:

• Use relative dimensions with viewBox to make your graphics responsive.
• Organize your elements into <g> (groups) to simplify their manipulation (this avoids generality the generators of SVG images offer it by default).

Browser compatibility

The <svg> tag is widely supported by modern browsers: