How to Add Scalable Vector Graphics to Your Web Page

Contributing Editor

In this series we’ve discussed what SVGs are, why you should consider them and basic vector drawings.

At some point, you’ll want to embed your finely-crafted SVG directly into a web page. There are no less than six ways to achieve that goal — but not all methods are created equally.

1. Using an <object> Tag

If you intend using any advanced SVG features such as CSS and scripting, the HTML5 <object> tag is your best option:


<object type="image/svg+xml" data="image.svg">Your browser does not support SVG</object>

Note you can provide fallback text or images within the object block.

2. Using an <embed> Tag

I’m including <embed> for the purpose of completeness but don’t use it! While it’s similar to <object>, <embed> never has been and probably never will be part of any HTML or XHTML specification. However, it’s supported by most browsers and is often used to implement Flash plugins.

Here’s the code. It works, but don’t use it!…


<embed type="image/svg+xml" src="image.svg" />

3. Within an <iframe>

Since browsers can render SVG documents in their own right, it’s possible to load images within an iframe:


<iframe src="image.svg">Your browser does not support iframes</iframe>

This may be a good method if you want to completely separate SVG code and script from your main page. However, manipulating an SVG image from your main page’s JavaScript will become a little more difficult.

Personally, I prefer to avoid iframes but that’s not to say you should never use them.

4. Inline SVG XML Embedded Into Your HTML5 Page

An SVG image can be added as a code island directly within your HTML5 page using outer <svg> tags:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Embedded SVG</title>
</head>
<body>
<h1>Embedded SVG</h1>

<!-- SVG code -->
<svg width="300px" height="300px" xmlns="http://www.w3.org/2000/svg">
	<text x="10" y="50" font-size="30">My SVG</text>
</svg>

</body>
</html>

The method works in all HTML5 browsers and also permits animation, scripting and CSS. But should you use it? The method feels a little dirty to me. It’s possibly an option for simple images or if you’re building the image using JavaScript, but I recommend you keep your files separate when possible.

5. Using an <img> Tag

SVGs can be added to your web page like any other image:


<img src="image.svg" />

The usual width, height, alt and other attributes can be added should you require them.

You’re probably wondering why img isn’t #1 in this list. For security reasons, browsers will disable SVG scripts, linking and other types of interactivity when they’re added to your page with an img tag. In addition, IE9, Chrome and Safari won’t apply stylesheet rules to the SVG if they’re defined in a separate CSS file.

6. Using a CSS Background Image

SVGs can be used as a CSS background for any element:


#myelement
{
	background-image: url(image.svg);
}

Like <img> tags, SVG scripts, linking and other types of interactivity are disabled when you use this method.

Which Should You Use?

In most circumstances, I recommend using the <object> tag to display SVG images. It feels a little unnatural, but it’s the most reliable method if you want to provide dynamic effects.

For images without interaction, the <img> tag or a CSS background can be used.

Inline SVGs or iframes are possibly options for some projects, but it’s best to avoid <embed>.

Coming soon: further SVG articles including CSS and scripting…

And if you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like HTML5 & CSS3 For the Real World.

Comments on this article are closed. Have a question about HTML5? Why not ask it on our forums?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.deathshadow.com deathshadow

    Since when is OBJECT “HTML 5″ — you make it sound like it’s new when it’s just as valid in earlier versions of HTML. At the same time, don’t know if you noticed, but EMBED is actually in HTML 5. You probably SHOULD say never use iframes, they were deprecated for a REASON (in favor of OBJECT!)… and while it works in IMG, if we actually bothered following the original roadmap and intent of STRICT, even IMG was on the chopping block for object so file formats could be added as needed without recoding the browser itself…

    Which of course is why I think AUDIO and VIDEO tags are BS as well… and why 5 on the whole is setting things back a decade or more.

    • http://www.optimalworks.net/ Craig Buckler

      OBJECT is an HTML5 tag. It’s also an HTML4 tag, but that doesn’t change the fact that it’s in HTML5 too!

      I’ve just been going through the specs again and, you’re right – EMBED has appeared in HTML5. However, it’s not in HTML4, although it was widely used. The general consensus seems to be that OBJECT is more appropriate although you can probably use either without problems.

  • That Guy

    Despite it not being part of an html spec, in most cases embed is better supported than Object. Not recommending because a lack of standard implementation doesn’t make sense.

  • stevo

    Since when is the object tag html5?

  • stevo

    OTOH the embed tag was never part of any spec until html5.

  • cyrke

    A team mate actually saved me from manually creating thousands of custom avatars using a custom SVG generative app and by layering each element over each other with specific sizes. This as proved to be a key element to our project… thanks Benoit for saving my sanity!