Search code examples
svgfirefoxinkscape

Inkscape SVGs are rendered incorrectly in Firefox


Markers in SVGs are not rendered on the GitHub website.
This happens only on the website, the Android app doesn't have the same problem.

Markdown file with the problem

The offending SVG

The SVG was created using Inkscape.

When I noticed the problem, I changed the file to an optimised SVG (File -> Save As -> Optimised SVG) but didn't observe any changes.

Edit: The situation is thornier than I initially assumed.
Firefox doesn't display the markers at all while Chrome and Edge show them in black. The images on this page appear differently on different browsers.
I manually edited the XML to colour the markers and ended up with this file. New SVG.
But Inkscape doesn't show the red outlines on the markers.

Edit: This is not a GitHub problem as I had initially suspected but an Inkscape(+Firefox) one. Still unsure whether Firefox is responsible.


Solution

  • MDN says, (Highlight mine)

    <marker-ref>

    This value is a reference to a <marker> element, which will be drawn at the final vertex. If the reference is not valid, then no marker will be drawn.

    SVG with coloured markers

    In this file, notice the attributes fill="context-stroke" and stroke="context-stroke" on the <path> in the <marker>s.

    Removing them fixes the problem. Still haven't found a direct way to do this from Inkscape.

    SVG with coloured markers