HTML <svg> tag

Definition and Usage

<svg> tag defines a container for SVG graphics.

SVG has various methods to draw paths, boxes, circles, text, and graphic images.

For more information about SVG, please read our SVG Tutorial.

See also:

HTML Tutorial:HTML SVG

SVG Tutorial:SVG Tutorial

Instance

Example 1

Draw a circle:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Try It Yourself

Example 2

Draw a rectangle:

<svg width="400" height="100">
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>

Try It Yourself

Example 3

Draw a rounded rectangle:

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

Try It Yourself

Example 4

Draw a star:

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

Try It Yourself

Example 5

Draw SVG logo:

<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
  <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
  <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
</svg>

Try It Yourself

Browser Support

The numbers in the table indicate the first browser version to fully support this property.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.0 3.2 10.1