a3nm's blog

SVG rendering in Gecko and Webkit

— updated

Did you know that Gecko and Webkit's implementation of SVG disagree on fairly basic points of the spec? For instance, this SVG image should be rendered differently depending on which engine you are using.

The trick is that one of both texts is hidden using a gradient calculated relative to the bounding box of a path with control points going outside of the path, which is computed differently by Webkit and Gecko. See the source of the image for a bit more detail.

It seems that Inkscape is also working like Gecko, and its way of computing bounding boxes makes more sense, so this is probably a Webkit bug, however a quick search didn't turn up the relevant bug (though this is probably well-known).

I devised this SVG with the help of Marc Jeanmougin who has had a good reason to investigate SVG implementations in browsers lately.

Apparently, this no longer works as before. The image now renders more or less the same in Chromium and recent versions of Firefox (it says "using webkit", give or take some text overflow), though it renders differently in Inkscape and older versions of Firefox ("not using webkit").

comments welcome at a3nm<REMOVETHIS>@a3nm.net