Correctly embedding SVG Images in HTML via object

After some half-harted tries in the past I now seriously looked for a solution on embedding SVG-Images in a HTML page.

I’m not talking about in-line embedding them but as an Image, like you use the -Tag for PNG images.

<object width="12" height="12" type="image/svg+xml" data="img.svg">
</object>

For this to work the svg image has to have a viewBox attribute on the svg root tag.

Inkscape however, does not set this. That was the main issue I had to figure out.

Inkscape does however save the width and height, on whatever you set as the document width and height. So make sure you set those correctly. You may use the document properties; Resize page to drawing or selection to get an applicable size after editing and creating your actual SVG content.

<svg
  …
  width="300"
  height="300"
  viewBox="0 0 300 300"

Inkscape does set the width and height attributes, so all you need to do is add the viewBox attribute and set it to xpos ypos width height, where xpos and ypos are 0 by default.

As another note, when saving your SVG with Inkscape for web-display you should save the SVG as a Plain SVG instead of Inkscape SVG, to prune overhead.

Just use the Save As … dialogue.

Also note that after saving it as a Plain SVG, make sure you don’t overwrite the file with a simple Save, as it will save in Inkscape SVG again.

I did check this while coding on MumPI. You can see the recent commit with working code here.