[OSM-talk] SVG rendering on wiki

[Ben Laenen]

Tyler wrote:
> Rendering of SVG is done in browser,

No it isn't (here), it's done on the server by MediaWiki: it takes an svg and 
converts it to png (using rsvg or some other program on the server) when the 
image appears on a page, and it sends the png to the browser. The image used 
on http://wiki.openstreetmap.org/wiki/Image:Belgium-trafficsign-a25.svg for 
example is this png:
http://wiki.openstreetmap.org/images/thumb/8/88/Belgium-trafficsign-
a25.svg/640px-Belgium-trafficsign-a25.svg.png

> the link you sent to me rendered at an
> appropriate size and very quickly.

Because it sends you the png which is cached by MediaWiki on the server. Once 
the conversion from svg to png is done once at a given size, you don't see any 
delays, but just take an svg on the wiki and put it in a test page at a size 
that wasn't rendered before, and it'll take a minute before you see the image 
in your browser. But anyway, the svg conversion time isn't a really big 
problem, as that's only seen once by the person editing a wiki page who 
entered the image into that page.

The main problems are that:

* the png images which were created from svg aren't transparent anymore. This 
was done correctly once, so you'll see a mix of images with transparent and 
opaque backgrounds on 
http://wiki.openstreetmap.org/wiki/WikiProject_Belgium/Conventions/Traffic_Signs 
although they all have transparent backgrounds actually (the transparent ones 
were rendered before the change happened on the server and because they're 
cached they stay transparent, if you take one of the transparent ones and put 
it on a page at a different size, they'll be opaque)

* The jagged appearance of some svg images like 
http://wiki.openstreetmap.org/wiki/Image:Belgium-trafficsign-a25.svg (this 
happens in every browser I have, FireFox, Konqueror, Arora) and it's in the 
source code of the page: (from the same page mentioned above:)

<img alt="Image:Belgium-trafficsign-a25.svg" src="/images/thumb/8/88/Belgium-
trafficsign-a25.svg/640px-Belgium-trafficsign-a25.svg.png" width="720" 
height="600" border="0" />

But the rendered png image isn't 720 by 600 pixels as it shows on the page, 
it's actually 640 by 533, and thus you get a stretched image which is creating 
the jagged appearance. I have no idea why this is, my own local mediawiki 
installation handles it all just fine.

Ben