Simple SVG Display

Inkscape » SVG and the Web » Simple SVG Display

There are many different ways to display SVG files in a web page. The simplest way is just to link to an SVG file with the <a> tag. Web browsers that support SVG will display the drawing by itself. To include SVG content as part of a web page one can use one of the following options:

Each option will be treated in turn. A final section covers a few alternatives for supporting SVG on older browsers.

The <object> Tag

The <object> tag is the primary way to include an external SVG file. The main advantage of using this tag is that there is a natural mechanism for displaying a fallback in case the SVG is not rendered. The tag requires defining a data attribute which is the location of the SVG file, normally a relative path. Defining the type attribute is highly recommended as it allows browsers to avoid downloading content they do not support. For SVG the type is "image/svg+xml". If the SVG is not rendered, the browser will try to render the content between the opening <object> and closing </object> tags. A PNG version of the SVG would normally be a good choice to put here.

A simple SVG embedded via an <object> tag.

<!DOCTYPE html>     
<html xmlns="http://www.w3.org/1999/xhtml">     
  <head>

    <meta charset="UTF-8"/>     
    <title>SVG Included with <object> tag</title>

  </head>
  <body>

    <h1>An SVG rectangle (via <object> tag)</h1>

    <object type="image/svg+xml" data="web_square.svg">     
      <img src="web_square.png" alt="Blue Square"/>     
    </object>

  </body>
</html>

	HTML declaration. With HTML5 no “dtd” is required.
	HTML Name Space declaration. Using the XML syntax is specified here.
	The character encoding of the file, normally `UTF-8` for modern files.
	Inclusion of SVG file via the object tag. The "image/svg+xml" is the MIME type of the included file.
	A PNG file to be displayed in case the browser fails to render the SVG.

There are a couple of known problems with using the <object> tag with Chrome 6 and Safari 5 (which share the same rendering engine). The first is that SVGs are displayed with a non-transparent background. The second is that the SVGs are often not scaled properly and are displayed with scroll bars. The transparency problem has already been fixed in Chrome 7. The scaling problem will likely also be fixed soon.

The <embed> Tag

While the <embed> tag was never part of any HTML or XHTML specification, it is widely supported and used. For this reason it has been included in the HTML5 specification. It is intended for including content that needs an external plug-in to work. The Adobe plug-in requires the use of the <embed> tag and supporting this tag is the only real reason for its use with SVG. There is no fallback mechanism if the SVG content is not displayed. Note that Chrome 8 and Safari 5 may require width and height attributes to avoid scroll bars. Safari 5 also incorrectly displays SVGs with non-transparent backgrounds.

Here is an example of using the <embed> tag. Only the src attribute is required.

<embed src="web_square.svg"/>

The <iframe> Tag

The <iframe> tag, deprecated in HTML 4 and XHTML, has resurfaced in HTML5 with the purpose of “sandboxing” content that might pose a security risk. There is no fallback if the SVG content cannot be displayed. A frame will be drawn around the SVG. It can be removed by setting the attribute frameborder to 0 (note that this is not valid HTML5). The size of the frame can be set using the width and height attributes. If the size of the frame is too small to contain the SVG, scroll bars will be used. Safari 5 incorrectly displays SVGs with non-transparent backgrounds.

Here is an example of using the <iframe> tag. Only the src attribute is required. Note that a separate closing tag is required and that XHTML does not allow anything between the opening and closing tags.

<iframe src="web_square.svg"></iframe>

The <img> Tag

The <img> tag is used to embed images. Two attributes are required: the src and the alt attributes. The latter serves to describe the image in case the image cannot be rendered or viewed (i.e., to someone who is blind).

Here is an example of using the <iframe> tag. Note that the tag is self-closing.

<img src="web_square.svg" alt="Blue Square"/>

There are two reasons not to use the <img> tag with SVGs. The first is that there is no fallback mechanism if the browser cannot render the image. The second is an SVG rendered this way is not allowed to run any scripts or have any interaction (e.g. links). One advantage of using this tag is that Safari 5 will handle transparency properly. Another is that it can be used inside an HTML <a> object where the other tags will cause the SVG to “swallow” mouse clicks.

Inline SVG

HTML5 brings with it the possibility to use SVG by directly including the SVG in the HTML file. One could already do this in XHTML by using Name Spaces. There are a few things to note:

To include SVG using HTML syntax you must use a browser with an HTML5 parser. So far only Firefox 4 and Internet Explorer 9 have HTML5 parsers. Note that Name Spaces are not allowed with HTML syntax (except the XHTML, XLink, MathML, and SVG Name Spaces). Any Inkscape, Sodipodi, or other Name Space declarations need to be removed.
All the major web browsers except Internet Explorer already support SVG with XML syntax (as well as in XHTML).
An HTML5 file normally ends with .html when using HTML syntax and .xhtml or .xml; when using XML syntax.

Here is an example of inlining SVG. The file uses XHTML syntax but will also work for HTML5. Note that the two Name Space declarations are optional with HTML5 syntax. The SVG has been stripped of all unnecessary parts such as items in the Inkscape Name Space.

<!DOCTYPE html>     
<html xmlns="http://www.w3.org/1999/xhtml">     
  <head>

    <meta charset="UTF-8"/>     
    <title>SVG Inlined</title>

  </head>
  <body>

    <h1>An SVG rectangle inlined</h1>

    <svg     
       xmlns="http://www.w3.org/2000/svg"     
       version="1.1"
       width="150"
       height="150">
      <rect
	 width="90"
	 height="90"
	 x="30"
	 y="30"
	 style="fill:#0000ff;fill-opacity:0.75;stroke:#000000"/>
    </svg>

  </body>
</html>

	HTML declaration. (No “dtd” is required.)
	XHTML Name Space declaration. Required for XHTML, optional for HTML5. (Note: the name space declaration is identical for both HTML5 and XHTML.)
	The character encoding of the file, normally “UFF-8” for modern files. Not absolutely required but highly recommended.
	Start of SVG.
	Required for XHTML, optional for HTML5.

CSS Background

It is possible to use an SVG as a CSS background. One problem is to provide a fallback, necessary for Firefox 3.6 and older as well as Internet Explorer 8 and older. You could display both a PNG and an SVG on top. If the SVG has a transparent background, though, the PNG can leak through (a problem at least with Opera when the HTML is zoomed). Also, Internet Explorer won't fallback properly. A solution is to use two background-image lines; Internet Explorer won't recognize the none in the second line, resorting to using the first.

body {
  background-image: url('background.png');
  background-image: none, url('background.svg'), url('background.png');
  background-size: 100% 100%;
}

Supporting Older Browsers

The first step in supporting older browsers is to decide which browsers and which versions of those browsers you need to support. We can divide browsers into two classes: Internet Explorer and everybody else. Internet Explorer prior to version 9 does not natively support SVG nor does it support XHTML. All current or reasonably recent versions of all other major browsers do support SVG and XHTML although they may not support all of the SVG standard (most noticeably is the lack of filter support in Safari 5). So the main question is how to support SVG in Internet Explorer? This issue is not unlikely to disappear soon as Internet Explorer users are less likely to upgrade than users of other browsers and in some cases they can't upgrade since they use Windows XP which will not run Internet Explorer 9, or they are using web applications that rely on non-standard features of Internet Explorer 6.

At the moment, the best way to include SVG content in a web page is to use the <object> tag with a PNG fallback. This is a simple method that will automatically take care of support for older versions of Internet Explorer. If you need to use a pure SVG solution, then you need to rely on plug-ins to support Internet Explorer. There are a number of plug-ins that can be used:

The Adobe plug-in. This plug-in is no longer supported but can still be downloaded. (Adobe lost interest in SVG after buying Flash.) It offers fairly complete SVG support but it may be difficult to get the plug-in to work. It requires the use of the <embed> tag.
The Google Chrome Frame plug-in. This plug-in replaces the renderer in Internet Explorer 6, 7, or 8 with the renderer used in Chrome. The plug-in is triggered by including the line: <meta http-equiv="X-UA-Compatible" content="chrome=1"> in the <head> section of the HTML file. If Google Frame is installed, the page will be rendered by the plug-in, otherwise it will be rendered by the normal Internet Explorer renderer. This is a fairly unintrusive way of including the use of a plug-in.
The svgweb JavaScript library uses the Flash plug-in to render SVG content. Since most users of Internet Explorer already have Flash installed this is a viable way to support SVG. It can also be used to support SVG SMIL animation and SVG fonts in browsers that don't support those parts of the SVG standard. The modifications to the HTML file are more invasive than that to use Chrome Frame.

Inlined SVG is currently supported by all major browsers except Internet Explorer (before version 9) using XML syntax in HTML5 and in XHTML proper. Internet Explorer supports neither so a fallback solution for Internet Explorer must serve HTML to Internet Explorer while serving XHTML files to everyone else. Inlined SVG in HTML5 using HTML syntax requires browsers to have HTML5 parsers which at the moment only Firefox 4 and Internet Explorer 9 have. The SVG Boilerplate project is developing ways to use SVG in older browsers, including inlined SVG in HTML.

And finally, if you are producing vector graphic content programatically, you can look into other means of delivering graphics to older Internet Explorer browsers such as using Raphaël which uses JavaScript to generate either SVG or VML depending on the browser.