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.

I have created an example page where you can see it in action.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s