SVG woes

From Red Blob Games's Blog

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.