HTML SVG Graphics

html svg

What is SVG?

SVG stands for Scalable Vector Graphics
SVG is used to define graphics for the Web.
SVG can also be used to embed an SVG fragment inside an HTML document.
SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

SVG Circle

	<!DOCTYPE html>
<html>
  <body>
    <svg width="100" height="100">
      <circle
        cx="50"
        cy="50"
        r="40"
        stroke="red"
        stroke-width="4"
        fill="blue"
      />
    </svg>
  </body>
</html>

html svg tag

Note: The xmlns attribute is only required on the outermost svg element of SVG documents.

html5 svg

SVG Attributes

Name	Description
`width`	Displayed width of the rectangular viewport.
`height`	Displayed height of the rectangular viewport.
`viewBox`	SVG viewport coordinates for the current SVG fragment.
`x`	`x` coordinate of the svg container. No effect on outermost svg elements.
`y`	`y` coordinate of the svg container. No effect on outermost svg elements.
`version`	Version of SVG is used for the inner content of the element.
`preserveAspectRatio`	Displayed with a different aspect ratio.

SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element.

html svg image

Some Other SVG Examples

SVG Rectangle

	<svg width="400" height="100">
  <rect width="400" height="100" fill="blue" stroke-width="10" stroke="black" />
</svg>

SVG Rounded Square

	<svg width="90" height="90">
  <rect
    width="80"
    height="80"
    rx="20"
    ry="20"
    fill="blue"
    stroke-width="10"
    stroke="black"
  />
</svg>

SVG Star

	<svg width="300" height="200">
  <polygon
    points="100,10 40,198 190,78 10,78 160,198"
    fill="yellow"
    stroke="red"
    stroke-width="5"
    fill-rule="evenodd"
  />
</svg>

Browser Support

Element	Chrome	Edge	Mozilla	Safari	Opera
<svg>	4.0	9.0	3.0	3.2	10.1