How to Put SVG Graphics on Your Webpage

SVG or Scalable Vector Graphics let you draw much more complex images and have them rendered on web pages. But you can't simply take the SVG tags and slap them into your HTML. They won't show up and your page will be invalid. Instead, you have to use one of three methods.

Use the object Tag to Embed SVG

The HTML tag will embed an SVG graphic in your web page. You write the object tag with a data attribute to define the SVG file you want to open.

You should also include width and height attributes to define the width and height of your SVG image (in pixels).

For cross-browser compatibility, you should include the type attribute (it should read type="image/svg+xml") and a codebase for browsers that don't support it (Internet Explorer 8 and lower). Your codebase would point to an SVG plugin for browsers that don't support SVG. The most commonly used plugin is from Adobe at http://www.adobe.com/svg/viewer/install/. However, this plugin is no longer supported by Adobe. Another option is the Ssrc SVG plugin from Savarese Software Research at http://www.savarese.com/software/svgplugin/.

Your object would look like this:

<object data="rectangle.svg" width="110" height="60" type="image/svg+xml" codebase="http://www.savarese.com/software/svgplugin/"></object>

Tips for Using object for SVG

  • Make sure that the width and height are at least as large as the image you are embedding. Otherwise, your image might be clipped.
  • Your SVG may not display correctly if you do not include the correct content type (type="image/svg+xml"), so I don't recommend leaving it out.
  • You can include fallback information inside the object tag for browsers that won't display SVG files.
  • You can also set the source of your SVG and the content type in parameters. This may work better in IE 6 and 7:
    classid="CLSID:1339B54C-3453-11D2-93B9-000000000000" width="110" height="60" codebase="http://www.savarese.com/software/svgplugin/">
    Note that this requires a classid to make it work.

    View an SVG in an object tag example.

    Embed SVG with the embed Tag

    Another option you have for including SVG is to use the tag. You use nearly the same attributes as the object tag, including width, height, type, and codebase. The only difference is that instead of data, you place your SVG document URL in the src attribute.

    Your embed would look like this:

    src="http://your-domain.here/z-circle.svg" width="210" height="210" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install" />

    Tips for Using embed for SVG

    • The embed tag is not valid HTML4, but it is valid HTML5, so if you use it in an HTML4 page, you should remember that your page will not validate.
    • Use a fully quoalified domain name in the src attribute for best compatibility.
    • There are also some reports that using the embed tag with the Adobe plugin will crash Mozilla versions 1.0 to 1.4.

    View an SVG in an embed tag example.

    Use an iframe to Include SVG

    Iframes are another easy way to include an SVG image on your web pages. It only requires three attributes: width and height as usual, and src pointing to the location of your SVG file.

    Your iframe would look like this:

    <iframe src="http://webdesign.about.com/od/examples/l/z-triangle.svg" width="370" height="370"></iframe>

    Tips for Using iframe for SVG

    • The iframe will display with a border around your image unless you remove the border with a style, such as style="border:none;".
    • The iframe does not specify a plugin location, so if a customer's browser doesn't have the plugin, they may see nothing at all, or they may see an error message.

    View an SVG in an iframe tag example.