Skip to the Main Content

Note:These pages make extensive use of the latest XHTML and CSS Standards. They ought to look great in any standards-compliant modern browser. Unfortunately, they will probably look horrible in older browsers, like Netscape 4.x and IE 4.x. Moreover, many posts use MathML, which is, currently only supported in Mozilla. My best suggestion (and you will thank me when surfing an ever-increasing number of sites on the web which have been crafted to use the new standards) is to upgrade to the latest version of your browser. If that's not possible, consider moving to the Standards-compliant and open-source Mozilla browser.

September 3, 2003

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" />

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.

Posted by distler at September 3, 2003 7:59 AM

TrackBack URL for this Entry:

1 Comment & 0 Trackbacks

Re: Secrets of SVG

I was going to post some physics today.

I would have loved that :). You solution is is probably the best there is I think. Especially because the W3C doesn’t allow any other relative units than % be used on the width and height attributes.

In your situation the style attribute actually has some use and there for it is probably left in. I think the W3C should allow other units than %. It is also strange that there is nothing to find about this issue at the W3C mailing list.

Posted by: Anne van Kesteren on September 3, 2003 1:17 PM | Permalink | Reply to this

Post a New Comment