Embedding SVG in (X)HTML

This is a really old post. The object tag information is still accurate, but some of the links may be broken, and browser support data is obsolete. The current best practice is to use an <iframe> element.

Scalable Vector Graphics aren‘t quite mainstream, but they are (slowly) making inroads with native support in some browsers and mobile devices. I think they’d be The Coolest Thing on Earf if the SVG specification were widely supported. Internet Explorer and Safari, however, don’t yet offer SVG support.¹ But we won’t let that stop us.

What you’ll need

You’ll need an SVG file, of course. You can create one with Adobe Illustrator or the open source package Inkscape.² Or take the easy route: download an image from the Open Clip Art Library. Fire up the text editor of your choice and create an HTML file. You can also use it to tweak your SVG (since SVG files are plain text).

How to embed SVG

Embedding SVG in your HTML document is simple, but different than you might expect. Although SVG files are images, you don’t use the img element. Instead, you must use the object element.

The object element in a nutshell

HTML 3.2 provided applet and img tags to embed non-text content in a web page. In HTML 4 the W3C deprecated the applet element in favor of the object element. They did, however, keep the img element. The object element is actually a generic container for all kinds of non-hypertext content, including images. Unfortunately, Internet Explorer doesn’t support using the object element for images.

SVG and the object in action

But like I was saying: embedding SVG using the object element is easy. Take a look at the code below:

<object data="star.svg" type="image/svg+xml" id="svg"></object>

Simple right? We’ve got the data attribute, which tells the browser where to find this file. Then we tell the browser what kind of file it is — in this case it’s an image of the type svg+xml. We’ll also add an ID in case we want to add some CSS to the object. But there’s a problem: Firefox displays SVG embedded in HTML files as an inline frame (View: screenshot or HTML). So we need to modify our code a little bit to add a width and height. Neither Opera or Firefox will display the image dimensions if you view it in a browser (as they will with a bitmap image). View the source of the SVG file to gather the height and width. You’ll have to add a few extra pixels get rid of the scrollbars in Firefox.

<object data="star.svg" type="image/svg+xml" id="svg" width="450" height="350"></object>

This is definitely groovy, right? — At least it is for those browsers that support SVG. What about Internet Explorer and Safari? When confronted with an SVG image, Internet Explorer displays a broken image. Safari displays a plug in error. No problem: we’ll display some alternative content for these browsers. In this case, it will be a PNG file that’s identical to the SVG file. You could also enter text directing users to download a plug-in or SVG-capable browser. See the code below.

<object data="star.svg" type="image/svg+xml" id="svg" width="450" height="350">
    <img src="star.png" alt="Star">
</object>

Browsers that don’t support SVG will instead display the image.