0

I am using Inkscape 0.92.1 (4.20170510bzr15686.fc26) on Fedora 26.

To verify the issue, I also exported the SVG in Inkscape, but both files are rendered incorectly on my system.

Original SVG: https://cdn.rawgit.com/rugk/streetcomplete-quest-svgs/7098e53fbc2d7c4ab737c2d32576b67b771d15f5/inkscape/StreetComplete_quest_crossing.svg
Optimized SVG: https://cdn.rawgit.com/rugk/streetcomplete-quest-svgs/7098e53fbc2d7c4ab737c2d32576b67b771d15f5/optimized/StreetComplete_quest_crossing.svg

(Maybe it works in the browser, try saving the files and opening them in another way, then.)

How it should look

This is how it looks:

  • on GitHub (even on my system; they use some custom SVG renderer or so)
  • in Inkscape on my system itself (also the preview in the opening/saving dialog looks correct)

good svg

How it looks

Opening the plain SVG file in

  • in BrowserStack for Windows and MacOS and other systems
  • nautilus
  • Eye of GNOME and other picture viewers
  • Firefox 55
  • and GIMP (2.8.22)

…they however always look distorted:
distorted icon

I see all zebra icons being affected here, e.g. this one (original) is also distorted:
distorted 2

So what (or where) is the issue, i.e. who is responsible? Is it a bug in Inkscape or in the rendering library used on my system or is it the SVG's fault?

Edit: Now I even see the correct ones in the version without the bug fix when opening the files with Firefox. Still reproducible with other offline software, however.

Improve this question
4
  • The author of the SVGs actually showed me a workaround. Using "Stroke to path". This helps as a workaround to fix the display issue, but this still does not help me to find the original/source issue.
    – rugk
    Aug 27, 2017 at 21:53
  • For what it's worth, I have tried these in Chrome 60.0.3112.113, Firefox 55.0.3, and Inkscape 0.92.1, on Windows 7, and both these links render identically in all programs. Sorry I don't use IE, or MS Edge.
    – Billy Kerr
    Aug 27, 2017 at 21:54
  • I am sorry, I think this is because I applies the workaround described. I'll change the links to static ones pointing to the faulty SVGs. Also note that on GItHub they are always rendered correctly.
    – rugk
    Aug 27, 2017 at 21:57
  • Both (original and optimized) display OK (and identically) in Chromium, FF55, and Inkscape. Both look distorted in Okular, Gwenview, and Gimp. It could be a bug in some SVG rendering library...
    – xenoid
    Aug 28, 2017 at 7:11

1 Answer 1

Reset to default
3

I tried to open your SVG in my software Photopea.com and it looks correct.

The problem is, that you use paint-order property in your SVG. This property was defined in SVG2 and probably is not yet supported in GIMP.

You have paint-order: stroke fill markers; which says, that stroke should be painted under the fill. By default, stroke is always painted on top of the fill.

Smaller example – try deleting the paint-order property.

So the problem is not in your file, but in GIMP and other software, which does not support the paint-order property yet. You can report it to authors as a bug. In web browsers, everything should look fine.

Improve this answer
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.