Friday, December 30, 2005

I've been working on some new illustrations for my game programming pages. In the past I had created bitmap diagrams using Gimp or by writing custom code. This time I'm using Inkscape, which produces SVG, in the hopes that I can directly embed SVG onto the web page.

Unfortunately browser support for SVG stinks.

First, not all browsers support SVG. So you need a fallback. That's fine; I can produce PNGs with Inkscape.

Second, there's the question of whether to use <embed> or <object> tags. The answer seems to be that <object> is the “right” answer, but it crashes Safari 1.0. So I should use <embed>, right? I would, except <embed> doesn't support fallbacks.

This means that I to support browsers without SVG (by using PNG fallbacks), I have to crash the Safari browser. Ugh.

Even if that problem is solved, the next problem is that different SVG implementations support different features. Adobe's SVG plugin, Mozilla/Firefox SVG, and Opera SVG are all different. Even the very simple SVG I wrote does not work the same on all three. Opera does not seem to support text at all.

Browser vendors: it's worse to have limited SVG support than no support. With no support, the fallback will be used, and the reader will see something useful. With limited support, the reader will get a broken diagram.

Even if browsers supported SVG, the web server I use does not use the correct MIME type. It sends text/xml instead of image/svg+xml. I'm not sure how much this matters in practice though. (Side note: I find it interesting the change from text to image. This is going to generally be a confusing point with XML, since it's text underneath, but the rendering of it may not be.)

I have decided not to embed SVG on my pages (although I might link to it). I will turn SVG into PNG and embed PNG on my pages.

3 comments:

Jeff Schiller wrote at December 30, 2005 9:38 AM

I disagree about partial implementations of SVG. SVG itself provides a facility to determine what features are required to render content. Please see the svg:switch element (http://www.w3.org/TR/SVG11/struct.html#SwitchElement)

Amit wrote at December 31, 2005 7:38 AM

I don't fully understand SVG switch, but as far as I can tell, it doesn't let me fall back to HTML. It seems to keep me within SVG.

Jeff Schiller wrote at January 01, 2006 2:39 PM

You are correct, however you don't need to fall back to HTML, all SVG implementations out there at least support SVG image tag (that I know of). Thus, if the SVG implementation doesn't support all the feature strings you need, simply fall back to a SVG image tag that displays your PNG/JPG...