Musings

Secrets of SVG

Darn it! I was going to post some physics today. Instead, here’s another web-design post.

Anne van Kesteren is trying to add SVG images to his blog, but is confused about how to size them. To rescale properly, they should be sized in relative units (em), rather than absolute ones (px). But the height and width attributes on <object> don’t allow this.

So here’s what I do:

<object type="image/svg+xml" data="/path/to/image.svg"
    width="100%" height="100%" style="width: 18em; height: 7em;">
  <img src="/path/to/image.gif" width= "288" height="112" alt="description" />
</object>

The width and height attributes on the SVG are set to simply fill the allocated box. The actual size of the box is set in relative (em) units using an inline style.

The fallback GIF image is set to have the same size when the text-zoom is set to “normal” (1em = 16px). But the SVG image will rescale along with the text when you use text-zoom to resize the text.

Easy, eh?

Update: And, yes, this does work in Internet Explorer, not that I care.

Update (3/30/2004): In many applications, you need to worry about what’s going to happen to your layout when the fixed-size GIF is is displayed instead of the resizable SVG. Particularly nettlesome is the case where the text size is set to less than the default 16px. Then the GIF is larger than you want. Here are some suggestions for what to do. You can see them in action here.