By Craig Buckler

How to Add Scalable Vector Graphics (SVG) to Your Web Page

By Craig Buckler

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

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

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">
  <meta charset="UTF-8" />
  <title>Embedded SVG</title>
  <h1>Embedded SVG</h1>

  <!-- SVG code -->
  <svg width="300px" height="300px" 
    <text x="10" y="50" font-size="30">My SVG</text>


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…

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

The most important and interesting stories in tech. Straight to your inbox, daily. Get Versioning.
Login or Create Account to Comment
Login Create Account