Arrows in SVG aren't rotated when rendered by browsers

Question

I created an SVG file, and in inkscape it looks like this:

But when I render it by a browser, the arrows get screwed up:

This (above) is the actual svg (link), and in case it renders correctly in your browser, here is how I see it (this time it's a screenshot in png):

It's the same in the latest Firefox and Chrome.

This file was created in inkscape 0.48 on Windows, and when I re-open it in inkscape, it renders correctly. Is there a way to make the browser rotate the arrows?

Answer 1

There are bug reports of this for Chrome, Firefox, Inkscape, and Wikimedia. It turns out that some renderers get the arrow direction wrong when just one handle, the one at the beginning of the curve, has zero length. Currently, Firefox, Inkscape, and LibreOffice Write get it right, while Chrome gets it wrong.

To create an example of such a line, draw a line in Inkscape, then add a curved midpoint. Inkscape then makes both segments Bezier curves, but the end segments have zero length handles. If you then delete the midpoint, Inkscape will try to match the curve, and will create non-zero length handles for the endpoints.

Reported as bug in Firefox in 2015, and fixed

Reported as bug in Chrome in 2015, and not fixed

Reported as bug in Inkscape in 2006, blamed on user and closed as "out of date" in 2009

Reported as bug in Wikimedia in 2015, by me

Discussion of ambiguity in SVG spec

Answer 2

A fix that I have noticed in Inkscape is to first select the "edit paths by nodes" option, and select each endpoint and select the option to "make the selected nodes smooth" from the path editing toolbar.