How to embed SVG in a webpage so even Internet Explorer can view it

Scalable Vector Graphics (SVG) is a text based file that describes images in a vector format. Vector images are infinitely scalable. SVG is an open specification that is getting wider support. The Inkscape open source graphics program reads and writes SVG as its native format.

All major web browsers support displaying SVG to some extent, except Internet Explorer (IE). This has slowed the use of SVG on web pages, since IE is a very popular browser.

The svgweb project comes to the rescue. This open source javascript library uses Adobe Flash to mostly support SVG on IE. Adding SVG to a web page remains more complicated than it needs to be if you didn’t need to support IE, but for now with a little effort, IE can be supported too.




The above image is an SVG. It is viewable in most browsers including IE and the iPad. In IE since you are using Flash to view it, you can right click and choose zoom to see how scalable this is.

In order to use SVG in a webpage, follow these steps:

  1. Download the svgweb packageand unzip it to a web accessible directory on your server.
  2. Modify the head section of the html to point to the svg.js file. This must be the very first javascript file loaded. Two other files svg.htc and svg.swf must be next to svg.js.
    <head>
     <script src="svg.js" data-path="."></script>
    </head>
    
  3. Use the following syntax to place the SVG image file MY.svg within your webpage:
    <!--[if !IE]>-->
       <object data="MY.svg" type="image/svg+xml"
               width="500" height="500" id="mySVG"> <!--<![endif]-->
     <!--[if lt IE 9]>
       <object src="MY.svg" classid="image/svg+xml"
               width="500" height="500" id="mySVG"> <![endif]-->
     <!--[if gte IE 9]>
       <object data="MY.svg" type="image/svg+xml"
               width="500" height="500" id="mySVG"> <![endif]-->
       <img src="SVG_alternative_image.png" />
       </object>

Detailed instructions for more in depth understanding and use can be found in the svgweb package user instructions.

Facebook comments:

Leave a Reply