How to use SVGs in webpages.

In my previous post I lamented me woes of attempting to use SVGs within a web page. A commentor named Brad Neuberg offered some advice that got me going in the right direction and now I have everything working. I wanted to come back and address how I go I finally got this working.

The problem I was experiencing has to do with how Inkscape saves images as SVGs. The files can be easily modified so that they can be used in web pages to scale as desired.

For starters add the following code to your HTML where you want to place the image:

<object data="foo.svg" type="image/svg+xml" style="height: 32px; width: 32px">
  <img src="foo.png" alt="logo" style="height: 32px; width: 32px" />
</object>

This will give you the clipping I had talked about before. This is actually the correct behavior based on the properties in the SVG. So we need to modify the SVG and tell it to behave. To do this open the SVG in your favorite text editor and find the width and height properties in the SVG tag.

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://web.resource.org/cc/"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="48px"
   height="48px"
   id="svg1307"
   sodipodi:version="0.32"
   inkscape:version="0.45"
   sodipodi:docbase="/home/lapo/Icone/tangerine-icon-theme/scalable/apps"
   sodipodi:docname="alacarte.svg"
   inkscape:output_extension="org.inkscape.output.svg.inkscape">

We need to add viewbox and modify the width and height as follows:

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://web.resource.org/cc/"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   viewbox="0 0 48 48"
   width="100%"
   height="100%"
   id="svg1307"
   sodipodi:version="0.32"
   inkscape:version="0.45"
   sodipodi:docbase="/home/lapo/Icone/tangerine-icon-theme/scalable/apps"
   sodipodi:docname="alacarte.svg"
   inkscape:output_extension="org.inkscape.output.svg.inkscape">

Our first two entries in the viewbox will always be zeros followed by the width and height that is already defined. Next we replace the width and height with 100%. Once we save this file then it should show up in the webpage with the width and height defined in the HTML without any clipping.

In the HTML in between the open and closing tags for object we define an img tag that points to a backup PNG image. You can replace this with whatever you want IE to show. If you happen to have the image in a VML format then you could include it there, or you could simply have a message telling your users to stop using the always behind Internet Explorer (not recommended) or whatever you want IE to show in place of your SVG.

You can find a paper on converting SVG to VML here. There is also a javascript library at http://code.google.com/p/svgweb that will show the SVG in a Flash window for IE users. I plan on looking into the svgweb javascript library and giving that a spin in the near future.

I hope this post finds its way into the hands of anyone else having the same frustrations I was having.