Adding SVG to Webpages

By mbystedt on Dec 12, 2012, 4:28:12 AM

An SVG document can be added to a webpage by using either the embed tag or the object tag. The second tag is valid with current HTML and XHTML standards and the embed tag is not. While all current browsers have excellent support for the object tag, older browsers had some quirks related to it. Despite it being officially deprecated, all browsers still readily display SVG using the embed tag.

The object tag is probably what makes the most sense at this point. If you're relying on SVG support then you can assume excellent object tag support from browsers that provide the former.

<embed src="archive/paperdolls.svg" type="image/svg+xml" width="800" height="600" />

Code 1. Embed tag example

<object data="archive/paperdolls.svg" type="image/svg+xml" width="800" height="600">
  Sorry, your browser does not seem to support SVG.
</object>

Code 2. Object tag example. (Recommended method)

If SVG is unsupported, the object tag becomes inactive and the alternative content inside it is shown. It is just good practice to fail gracefully. Even if SVG is supported, the output still depends on the capabilities of the SVG viewer.

Using as an Image

SVG files can also be used like any other image file in most modern web browsers. Simply refer to the file like you would any other image file. An example of this can be seen in my article on SVG image sprites where a SVG file is used in CSS.

If at all possible, avoid using this method as a replacement for an object tag. You'll find it has many bugs, only works in the most recent versions of browsers and offers no way to fail gracefully. The embed or object tag is the preferred solution for displaying SVG as an image.

<img src="archive/paperdolls.svg" width="800" height="600"/>

Code 3. Image tag example. Not recommended for multiple reasons. Using an object tag is better.

.exp-sprite {
  width: 50px; height: 50px;
  display: inline-block;
  background-image:url('/media/sprite-tutorial/navigation-sprite.svg');
}

Code 4. CSS example. This seems to have less problems then the 'img' tag.

Embedding in an XHTML Webpage

The creators of SVG didn't blindly pick XML to represent SVG. One important feature of XML is its ability to mix multiple data document types together to create hybrids. That means, within XHTML (HTML's cranky and strict XML-based cousin), SVG can be embedded.

The only catch is that your website needs to be be valid XML for this to work. If you're dealing with bad HTML written by that guy (we all know one) who thought so long as it displayed then it ships, this could be difficult to accomplish.

Example 1. SVG embedded into a web page (Download)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" lang="en" xml:lang="en">
<head>
<title>Embedded SVG</title>
</head>
<body>
 
... HTML Content...
 
<svg xmlns:xlink="http://www.w3.org/1999/xlink"
    id="svg-doc"
    width="400" height="100"
	viewBox="0 0 800 200" 
    zoomAndPan="disable" >
 
	... SVG Document...
</svg>
 
... HTML Content...
 
</body>
</html>

Code 5. A template for a basic HTML page with embedded SVG.