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.