[OSM-talk] SVG rendering on wiki
Ben Laenen
benlaenen at gmail.com
Tue Jun 30 18:15:25 BST 2009
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
More information about the talk
mailing list