Cross-Browser SVG Issues
While getting this page ready to display good-looking math, graphs, and figures, I ran into a few problems with how the current browsers handle SVG. I was somewhat surprised considering the age of some of the associated bugs. To give a little bit of background on what I am talking about, let’s first consider the problem I am trying to solve (and how one could go about it). I will choose a simple term as an example : the sum of all cubes from 1 to 100. While there is a markup-language called MathML which could be used to render it, the browser-support is very shaky — and the output is often not pretty. The alternative I’d like to pursue is to embed a rendering of the term as a graphics-file. The easiest way to do that is to just use a rasterized image like so (this works in any browser, including backward ones from Redmond) :
<img src="term.png" alt="sum_{i=1}^{100}i^3" />This solution is not very elegant however. The author has to guess the resolution and screensize of the reader (so as to provide a properly-sized image), and zooming or printing makes the term really ugly :
<img src="term.png" alt="sum_{i=1}^{100}i^3" width="78" height="96" />You may have noticed that the width- and height-attributed are given here; this is not necessary if you want to use the intrinsic size of the image (as in the first example), and no browser requires it for proper display; in the second example, these attributes are used to illustrate the effect of scaling of a rasterized image.
To avoid such problems when the originating image is clearly scalable/vectorized, I want to use Scalable Vector Graphics instead. All modern browsers support this open standard, at least in name. The handling of that support, however, differs.