Consider the following SVG file:
http://commons.wikimedia.org/wiki/File:Badminton_court_legal_bounds.svg
When rendering this at any width of 160px or above, the renderer renders it correctly, e.g.:
http://goo.gl/Onhww (160px thumbnail, upload.wikimedia.org)
However, for sizes below 160px, most of the picture is missing in the rendering:
http://goo.gl/U6RPs (159px thumbnail)
Can this be fixed?
Thanks! Timwi
That's interesting. Your SVG file seems to be hand-edited, using xlink and entities so the repetitive elements, like the court, are only defined once. It's clever.
Your SVG renders fine (directly) in Chrome, Firefox & Inkscape for me. However, maybe these entities are screwing things up somehow when converted.
I find that I can't convert the file to any other format either, when using ImageMagick (Mac OS X /usr/bin/convert); I get only parts of your drawing, although not the same ones as what we see on Commons. Even InkScape doesn't convert it right, I get overlapping text or worse.
Not sure where the bug is. It might be that your SVG code has a bug which makes it subtly difficult to convert, or perhaps you are just using features or SVG that are poorly supported in renderers.
On 7/13/11 5:13 AM, Arne 'Timwi' Heizmann wrote:
Consider the following SVG file:
http://commons.wikimedia.org/wiki/File:Badminton_court_legal_bounds.svg
When rendering this at any width of 160px or above, the renderer renders it correctly, e.g.:
http://goo.gl/Onhww (160px thumbnail, upload.wikimedia.org)
However, for sizes below 160px, most of the picture is missing in the rendering:
http://goo.gl/U6RPs (159px thumbnail)
Can this be fixed?
Thanks! Timwi
Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
On Wed, Jul 13, 2011 at 4:40 PM, Neil Kandalgaonkar neilk@wikimedia.orgwrote:
That's interesting. Your SVG file seems to be hand-edited, using xlink and entities so the repetitive elements, like the court, are only defined once. It's clever.
Your SVG renders fine (directly) in Chrome, Firefox & Inkscape for me. However, maybe these entities are screwing things up somehow when converted.
I find that I can't convert the file to any other format either, when using ImageMagick (Mac OS X /usr/bin/convert); I get only parts of your drawing, although not the same ones as what we see on Commons. Even InkScape doesn't convert it right, I get overlapping text or worse.
In production we use librsvg to convert; not sure how convenient this is to build on Mac OS X (it may be in fink/macports/brew/etc but prepare to recompile glib, cairo etc) but 'apt-get install librsvg2-bin' works wonders on Ubuntu. :)
I can reproduce the production failure locally, with librsvg 2.3.1-0ubuntu3. At 160x320 it renders fully as expected; at 159x318 I get only the first court in the upper-left, with no text or other bits. No error messages visible.
Example command line: $ rsvg -w 160 -h 320 Badminton_court_legal_bounds.svg 160.png
May need to file this in the upstream Gnome bug tracker: https://bugzilla.gnome.org
Latest release of librsvg appears to be 2.34.0, so this (and many other rendering issues noted in our own bug tracker!) should be retested against that release as well as whatever we currently have in production.
Not sure where the bug is. It might be that your SVG code has a bug which makes it subtly difficult to convert, or perhaps you are just using features or SVG that are poorly supported in renderers.
There doesn't *seem* to be anything terribly complex about it for rendering purposes; Inkscape only seems to be confused with the text wrapping (though since the only visible top-level element is a single opaque <use> reference you can't really edit it very easily. :)
In particular since it renders as expected above 160px, I wonder if it's some weird low-level bug rendering bug where at some point something goes wrong trying to make some line or bit of text that's smaller than a certain amount, and nothing more ever gets rendered to the raster canvas before it gets saved out.
-- brion
Neil Kandalgaonkar (2011-07-14 01:40):
That's interesting. Your SVG file seems to be hand-edited, using xlink and entities so the repetitive elements, like the court, are only defined once. It's clever.
Using xlink alone shouldn't be a problem. You can see this works fine from quite some time here (all balls are defined and then used): http://commons.wikimedia.org/wiki/File:Snooker_table_drawing.svg
http://commons.wikimedia.org/wiki/File:Badminton_court_legal_bounds.svg
When rendering this at any width of 160px or above, the renderer renders it correctly, e.g.:
http://goo.gl/Onhww (160px thumbnail, upload.wikimedia.org)
However, for sizes below 160px, most of the picture is missing in the rendering:
http://goo.gl/U6RPs (159px thumbnail)
Can this be fixed?
Have you tried moving some stuff from defs to an actual image? You could at least move <g id="main"> outside (below) defs.
You could also try removing all text tags and see if it works. Some SVG renderers act funny when you scale fonts - if you set font to a very small size renders might ignore it and make characters ridiculously large or make them disappear. In this situation if you multiply (by hand or script) all text elements sizes and then scale them down with a transformation then everything will be fine. It's a total mystery to me. Fonts just seems to be badly implemented in most renderers (or was haven't tested this for a while).
Also I've just noticed that you've set width and height to "100%". Maybe setting this to some static numbers would help. It seems to prevent e.g. Opera to scale the image with CTRL +/-.
Regards, Nux.
wikitech-l@lists.wikimedia.org