SVG image display bug (width-dependent)

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

SVG image display bug (width-dependent)

Arne 'Timwi' Heizmann

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
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: SVG image display bug (width-dependent)

Neil Kandalgaonkar
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
> [hidden email]
> https://lists.wikimedia.org/mailman/listinfo/wikitech-l

--
Neil Kandalgaonkar  |) <[hidden email]>

_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: SVG image display bug (width-dependent)

Brion Vibber
On Wed, Jul 13, 2011 at 4:40 PM, Neil Kandalgaonkar <[hidden email]>wrote:

> 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
_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: SVG image display bug (width-dependent)

Maciej Jaros
In reply to this post by Neil Kandalgaonkar
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 mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l