Honest-To-Gosh Scalable Vector Graphics
Published 11 November 2006
Hi! You've stumbled upon a blog post by a guy named Ryan. I'm not that guy anymore, but I've left his posts around because cool URIs don't change and to remind me how much I've learned and grown over time.
Ryan was a well-meaning but naïve and priviledged person. His views don't necessarily represent the views of anyone.
I believe I’ve said it a couple times: I hate Flash. Hate the UI. Hate corruptable binary format. Hate that you can’t make batch changes. I could go on; I won’t. Very slowly, another vector based format has been creeping into tools and browsers—Scalable Vector Graphics (SVG)—and it’s very promising. But there are still some foibles that are driving me mad, and I’m putting out the call for help to see if I can implement SVG now.
The problem with using images (and video) in web content is that they are inherently inflexible; a photo that should fill a 800×600 screen will look tiny on a massive Apple Cinema Display. While other HTML elements can be set to scale along with the content of the site, images will either have to scale up and look blurry or scale down and gobble up bandwidth. With photos, there may never be a good solution to this problem, but graphs, charts and illustrations can (in theory) be done in vectors or order to look crisp at any size—massive to mobile.
Here's some examples. I’ll use the object element (sorry
| PNG | SWF | SVG |
|---|---|---|
Now, watch what happens when I scale each one up to 3 times the size:
The PNG becomes fuzzy, but the SWF scales nicely. But the SVG—what the heck‽ The latest versions of Gecko and Webkit (but not Opera) render the SVG image at 100×100 within a 300×300 box.
The only work-around I’ve been able to find is to remove the width
and height declaration from the root svg element, as so:
Right then—we’re all set right? Wrong. Removing the width and
height from the svg element removes its intrinsic
height—i.e. the browser has no idea
how big the image is supposed to be. This makes it impossible to
insert the image into a liquid layout where it fills the given
horizontal space:
This leads to all kinds of problems, and essentially makes it impossible to allow SVG to do the one thing it was meant to do: scale. The worst part? I want to deploy these today. And I want them to scale. And I don’t want to use Flash. I’ve filed a test case and votes for this bug in both bugzilla and webkit bugs, but until I receive a better solution, I’m open to suggestions. Help?