How to Put SVG Graphics on Your Webpage

SVG (Scalable Vector Graphics) enables your site to draw and render complex images, but using them is more than simply slapping tags into your HTML. For them to show up and your page to be valid, you must use one of the following three methods.

Use the Object Tag to Embed SVG

This HTML tag will embed an SVG graphic in your web page. Write the object tag with a data attribute to define the SVG file you want to open. Include width and height attributes in pixels to define the dimensions of your SVG image.

For cross-browser compatibility, include the type attribute, like so:

type="image/svg+xml"

Your object would look like this:

Tips for Using Object for SVG

Make sure that the width and height in your code 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, like this:

type="image/svg+xml"

Embed SVG With the Embed Tag

In this method, you use nearly the same attributes as the object tag, including width, height, and type. The only difference is that you instead 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"/> 

Tips for Using Embed for SVG

The embed tag is valid HTML5 but not HTML4. Remember to use a fully qualified domain name in the src attribute for compatibility.

Use an iframe to Include SVG

Another easy way to include an SVG image is through iframes. This method requires three attributes: width and height as usual, and src pointing to the location of your SVG file.

Your iframe would look like this:

Tips for Using iframe for SVG

The iframe will display with a border around the 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 visitor's browser doesn't have the plugin, they may see nothing at all, or they may see an error message. To avoid this, include some text inside the iframe opening and closing tags.