Search code examples
svginkscape

SVG formats correctly in Chrome but not in Inkscape

I have a simple SVG file showing a double-headed horizontal arrow, with a half way mark, and "1/2" text under the mark.

It displays fine in Chrome and Firefox, but when opened by SVG apps like Inkscape it is garbled.

Here is what it looks like in FF: enter image description here

Here is what it looks like in Inkscape:

enter image description here

The code is here:

    <?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="1200" height="120" xmlns="http://www.w3.org/2000/svg" version="1.1">
 <g stroke="blue" > 

  <!-- Horizontals -->

  <line x1="0" y1="50" x2="1200" y2="50" style="stroke: #6666ff; stroke-width: 6px; fill: none; " />

  <!-- Arrows -->

  <line y1="50" x1="0" y2="35" x2="40" stroke-width="3" />
  <line y1="50" x1="0" y2="65" x2="40" stroke-width="3" />
  <line y1="50" x1="1200" y2="35" x2="1160" stroke-width="3" />
  <line y1="50" x1="1200" y2="65" x2="1160" stroke-width="3" />

  <!-- Verticals -->

  <line y1="35" x1="50%" y2="65" x2="50%" stroke-width="3" />

  <!-- Numbers -->

  <text text-anchor="middle" x="50%" y="80%" dy=".35em" font-family="sans-serif" font-size="20px" stroke="red" >1/2</text>


 </g>
</svg>

Please help.

Solution

  • Inkscape doesn't seem to support percentage / relative positions, so it positions it at coordinate 0,0.

    Have a look at https://bugs.launchpad.net/inkscape/+bug/384301, where another user has the same question, and a possible solution with guidelines.