Home > front end >  Inkscape SVGs are rendered incorrectly in Firefox
Inkscape SVGs are rendered incorrectly in Firefox

Time:11-11

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.

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.

CodePudding user response:

Update:

Because the browsers still do not support all SVG2 features, there is a better workaround in Inkscape to fix that issue:

  • Select Edit > Preferences.

  • From the tree on the left, select: Input/Output > SVG export

  • Under "SVG 2 to SVG 1.1" check the two checkboxes to use the correct direction and colors (as shown in the screenshot below).

Check the two checkboxes to correctly render direction and colors

  • Now save the SVG file as follows:

    • File > Save as.
    • Check the box: "Export as SVG 1.1 per settings in Preferences dialog"
  • Now the markers should be rendered correctly in the browsers.

enter image description here

Note for Windows users:

For Windows users, you need an extra step in order to enable the "Export as SVG 1.1 per settings in Preferences dialog" option. To enable it:

  • Select: Edit > Preferences.
  • From the tree view select: Interface > Windows.
  • Under "Desktop integration" enable the option "GTK open/save dialogs", as shown in the screenshot below:

Desktop integration


Old answer (but still relevant)

This is a known issue (see 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

  • Related