Installing an SVG Image in HTML

by | Dec 30, 2014 | HTML | 0 comments

Preliminary Steps to Using SVG

If you have experience with Abobe Illustrator or some other vector graphics program you can make a logo, or other illustration, and have it appear as a scalable vector graphic (SVG) on your web page.  You do not need to create a fixed size raster image (jpg, gif, png) to put into your html.  This way,  the graphic will scale nicely regardless of the device you might be using.  Here’s how to do it.

First, create your graphic in your vector graphics program.  I use illustrator.

Second, save the file in SVG format.

Third, choose how you want to embed your graphic in the html.  The embed tag isn’t standard, so let’s not use that.  The best option is the object tag, but the img tag also works.  The catch is that the SVG file must be set up correctly and what works for ‘object’ does not work for ‘img’ and vice versa.

Using the OBJECT Tag

The SVG file you saved is a simple text file coded using XML.  You can edit it with a text editor just like you edit your html.  That file contains an SVG tag.  The version in our example was produced by Illustrator and looks like this:

<svg xmlns=”&ns_svg;” xmlns:xlink=”&ns_xlink;” xmlns:a=”http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/” width=”1873″ height=”880″ viewBox=”-0.638 -0.297 1873 880″ xml:space=”preserve”>

If you throw a SVG file into an object tag in your html and you specify a more reasonable width, like 200 px, you will see the huge graphic inside a scrollable box that is only 200px wide.  Clearly not what we want.  To make it work, edit your svg file to look like this by changing the width and height to 100%, add preserveAspectRatio=”xMinYMin meet” and modify the viewbox attribute:

<svg xmlns=”&ns_svg;” xmlns:xlink=”&ns_xlink;” xmlns:a=”http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/” width=”100%” height=”100%” xml:space=”preserve” preserveAspectRatio=”xMinYMin meet” viewBox=”0 0 1873 880″>

You can then install the graphic into your html like this:

<object type=”image/svg+xml” data=”ExploreLogoforObject.svg” width=”200″>Your browser does not support SVG</object>

The browser will display the graphic at whatever width you specify while retaining the relationship between length and width.

 

Using the IMG Tag

The image tag is easier.  It will take the svg file just as it came out of Illustrator and display it properly like this:

<img src=”ExploreLogoforIMG.svg” width=”200″ />

Again, the browser will display the graphic at whatever width you specify while retaining the relationship between length and width.

 

Internet Explorer

As usual, older versions of IE won’t work with SVG so we need a fallback like this:

<!–[if lte IE 8]>

<img src=”ExploreLogo.png” />

<![endif]–>

<!–[if gt IE 8]><object type=”image/svg+xml” data=”ExploreLogoforObject.svg” width=”200″>Your browser does not support SVG</object>

<![endif]–>

<!–[if !IE]> –>

<object type=”image/svg+xml” data=”ExploreLogoforObject.svg” width=”200″>Your browser does not support SVG</object>

<!– <![endif]–>

Normal browsers read the first two conditionals as comments and ignores them. If you want to use these with the img tag, just replace the object tags with the img tags discussed above. Alternatively, you can use the following code that is more simple and should work for any browser that can’t handle SVG:

<img src=”ExploreLogoforIMG.svg” onerror=”this.src=’ExploreLogo.png’” width=”200″ />

OBJECT vs IMG for SVG

I recommend that you get comfortable with using the object tag rather than the img tag.  Eventually you will want to develop interactive SVG and that requires the object tag.

 Demo Page

You can find a demonstration of all this code at:  globalcreations.com/svgdemo/