Inline vector graphics

Scalable Vector Graphics (SVG) is an XML based image format for vector images. With HTML5 we can use SVG inline in HTML documents.

<svg id="flag" width="450" height="300" viewBox="0 0 18 12">
  <defs>
    <mask id="mask">
      <rect x="0" y="0" width="18" height="6" fill="#ffffff" />
    </mask>
  </defs>
  <rect x="0" y="0" width="18" height="12" fill="#ffffff" />
  <rect x="0" y="6" width="18" height="6" fill="#d00c33" />
  <circle cx="7" cy="6" r="4" fill="#ffffff" />
  <circle cx="7" cy="6" r="4" mask="url(#mask)" fill="#d00c33" />
</svg>

The svg element is used much like an img element but instead of referring to an external file we put the content directly in the document. The viewbox attribute defines the coordinate system we want to use for the SVG image. This should not be confused with the height and width attributes which determines the size of the image in the document. They should agree on the aspect ratio though.

Support for inline SVG is in most current browsers. Unfortunately, there is no good way of achieving compatibility with older browsers. Having SVG images in separate files has a bit more support but Internet Explorer 8 or older still does not support it. This can be fixed with external libraries though.

Below are examples of SVG in action: