Search code examples
google-chromesvginkscape

Why is my generate svg file shown differently in Inkscape and (Chrome) browser?

I programmatically generated the svg content shown below.

If I open it with a browser (Chrome 77.0.3865.75 or Firefox 68.1.0esr (64-bit)), the axis labels "z", "y" are shown at the expected positions:

enter image description here

However, if I open it in Inkscape (0.92.4) the axis labels are shown in the upper left corner. The tick labels are also moved to wrong positions.

enter image description here

=> How can I ensure that my svg file can be used both, with browsers and Inkscape?

Opened in Inkcape, the z label has coordinates of appr. x=90, y=548. If I move the label where I want it to be, the new coordinates are apprc. x=290, y=50.

Could it be that browsers and Inkscape use different default units or reference points? Or that I have to include some kind of additional header for Inkcape to render the file correctly? 

<svg xmlns="http://www.w3.org/2000/svg" class="treez-svg" id="treez-svg" width="15cm" height="15cm"><g id="page" display="inline"><rect fill="#ffffff" width="15cm" height="15cm"/><g id="graph" transform="translate(94.48818897637794,18.89763779527559)" display="inline"><rect width="12cm" height="12cm" fill="#ffffff" fill-opacity="1" stroke="#000000" stroke-width="2" stroke-dasharray="none" stroke-opacity="1"/><g class="axis" id="x" display="inline"><g id="primary" class="primary" transform="translate(0,453.54330708661416)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="currentColor" d="M0.5,0.5H454.04330708661416"/><g class="tick" opacity="1" transform="translate(0.5,0)"><line stroke="currentColor" y2="6"/><text fill="black" y="0" dy="0" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(0,29),rotate(0)">0.0</text></g><g class="tick" opacity="1" transform="translate(45.85433070866142,0)"><line stroke="currentColor" y2="6"/><text fill="black" y="0" dy="0" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(0,29),rotate(0)">0.1</text></g><g class="tick" opacity="1" transform="translate(91.20866141732284,0)"><line stroke="currentColor" y2="6"/><text fill="black" y="0" dy="0" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(0,29),rotate(0)">0.2</text></g><g class="tick" opacity="1" transform="translate(136.56299212598424,0)"><line stroke="currentColor" y2="6"/><text fill="black" y="0" dy="0" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(0,29),rotate(0)">0.3</text></g><g class="tick" opacity="1" transform="translate(181.9173228346457,0)"><line stroke="currentColor" y2="6"/><text fill="black" y="0" dy="0" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(0,29),rotate(0)">0.4</text></g><g class="tick" opacity="1" transform="translate(227.27165354330708,0)"><line stroke="currentColor" y2="6"/><text fill="black" y="0" dy="0" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(0,29),rotate(0)">0.5</text></g><g class="tick" opacity="1" transform="translate(272.6259842519685,0)"><line stroke="currentColor" y2="6"/><text fill="black" y="0" dy="0" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(0,29),rotate(0)">0.6</text></g><g class="tick" opacity="1" transform="translate(317.98031496062987,0)"><line stroke="currentColor" y2="6"/><text fill="black" y="0" dy="0" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(0,29),rotate(0)">0.7</text></g><g class="tick" opacity="1" transform="translate(363.3346456692914,0)"><line stroke="currentColor" y2="6"/><text fill="black" y="0" dy="0" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(0,29),rotate(0)">0.8</text></g><g class="tick" opacity="1" transform="translate(408.68897637795277,0)"><line stroke="currentColor" y2="6"/><text fill="black" y="0" dy="0" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(0,29),rotate(0)">0.9</text></g><g class="tick" opacity="1" transform="translate(454.04330708661416,0)"><line stroke="currentColor" y2="6"/><text fill="black" y="0" dy="0" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(0,29),rotate(0)">1.0</text></g></g><g id="secondary" class="secondary" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="currentColor" d="M0.5,0.5H454.04330708661416"/><g class="tick" opacity="1" transform="translate(0.5,0)"><line stroke="currentColor" y2="-6"/><text fill="currentColor" y="-9" dy="0em"/></g><g class="tick" opacity="1" transform="translate(45.85433070866142,0)"><line stroke="currentColor" y2="-6"/><text fill="currentColor" y="-9" dy="0em"/></g><g class="tick" opacity="1" transform="translate(91.20866141732284,0)"><line stroke="currentColor" y2="-6"/><text fill="currentColor" y="-9" dy="0em"/></g><g class="tick" opacity="1" transform="translate(136.56299212598424,0)"><line stroke="currentColor" y2="-6"/><text fill="currentColor" y="-9" dy="0em"/></g><g class="tick" opacity="1" transform="translate(181.9173228346457,0)"><line stroke="currentColor" y2="-6"/><text fill="currentColor" y="-9" dy="0em"/></g><g class="tick" opacity="1" transform="translate(227.27165354330708,0)"><line stroke="currentColor" y2="-6"/><text fill="currentColor" y="-9" dy="0em"/></g><g class="tick" opacity="1" transform="translate(272.6259842519685,0)"><line stroke="currentColor" y2="-6"/><text fill="currentColor" y="-9" dy="0em"/></g><g class="tick" opacity="1" transform="translate(317.98031496062987,0)"><line stroke="currentColor" y2="-6"/><text fill="currentColor" y="-9" dy="0em"/></g><g class="tick" opacity="1" transform="translate(363.3346456692914,0)"><line stroke="currentColor" y2="-6"/><text fill="currentColor" y="-9" dy="0em"/></g><g class="tick" opacity="1" transform="translate(408.68897637795277,0)"><line stroke="currentColor" y2="-6"/><text fill="currentColor" y="-9" dy="0em"/></g><g class="tick" opacity="1" transform="translate(454.04330708661416,0)"><line stroke="currentColor" y2="-6"/><text fill="currentColor" y="-9" dy="0em"/></g></g><g id="axis-label"><text text-anchor="middle" transform="translate(226.77165354330708,508.54330708661416),rotate(0)" font-family="sans-serif" font-size="22" fill="black" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1">z</text></g></g><g class="axis" id="y" display="inline"><g id="primary" class="primary" fill="none" font-size="10" font-family="sans-serif" text-anchor="end"><path class="domain" stroke="currentColor" d="M0.5,454.04330708661416V0.5"/><g class="tick" opacity="1" transform="translate(0,454.04330708661416)"><line stroke="currentColor" x2="-6"/><text fill="black" x="6" dy="0.32em" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(-10,0),rotate(0)">0.0</text></g><g class="tick" opacity="1" transform="translate(0,408.6889763779527)"><line stroke="currentColor" x2="-6"/><text fill="black" x="6" dy="0.32em" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(-10,0),rotate(0)">0.1</text></g><g class="tick" opacity="1" transform="translate(0,363.3346456692913)"><line stroke="currentColor" x2="-6"/><text fill="black" x="6" dy="0.32em" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(-10,0),rotate(0)">0.2</text></g><g class="tick" opacity="1" transform="translate(0,317.9803149606299)"><line stroke="currentColor" x2="-6"/><text fill="black" x="6" dy="0.32em" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(-10,0),rotate(0)">0.3</text></g><g class="tick" opacity="1" transform="translate(0,272.6259842519685)"><line stroke="currentColor" x2="-6"/><text fill="black" x="6" dy="0.32em" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(-10,0),rotate(0)">0.4</text></g><g class="tick" opacity="1" transform="translate(0,227.27165354330708)"><line stroke="currentColor" x2="-6"/><text fill="black" x="6" dy="0.32em" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(-10,0),rotate(0)">0.5</text></g><g class="tick" opacity="1" transform="translate(0,181.9173228346457)"><line stroke="currentColor" x2="-6"/><text fill="black" x="6" dy="0.32em" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(-10,0),rotate(0)">0.6</text></g><g class="tick" opacity="1" transform="translate(0,136.5629921259843)"><line stroke="currentColor" x2="-6"/><text fill="black" x="6" dy="0.32em" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(-10,0),rotate(0)">0.7</text></g><g class="tick" opacity="1" transform="translate(0,91.20866141732279)"><line stroke="currentColor" x2="-6"/><text fill="black" x="6" dy="0.32em" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(-10,0),rotate(0)">0.8</text></g><g class="tick" opacity="1" transform="translate(0,45.854330708661394)"><line stroke="currentColor" x2="-6"/><text fill="black" x="6" dy="0.32em" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(-10,0),rotate(0)">0.9</text></g><g class="tick" opacity="1" transform="translate(0,0.5)"><line stroke="currentColor" x2="-6"/><text fill="black" x="6" dy="0.32em" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(-10,0),rotate(0)">1.0</text></g></g><g id="secondary" class="secondary" transform="translate(453.54330708661416,0)" fill="none" font-size="10" font-family="sans-serif" text-anchor="start"><path class="domain" stroke="currentColor" d="M0.5,454.04330708661416V0.5"/><g class="tick" opacity="1" transform="translate(0,454.04330708661416)"><line stroke="currentColor" x2="6"/><text fill="currentColor" x="9" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,408.6889763779527)"><line stroke="currentColor" x2="6"/><text fill="currentColor" x="9" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,363.3346456692913)"><line stroke="currentColor" x2="6"/><text fill="currentColor" x="9" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,317.9803149606299)"><line stroke="currentColor" x2="6"/><text fill="currentColor" x="9" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,272.6259842519685)"><line stroke="currentColor" x2="6"/><text fill="currentColor" x="9" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,227.27165354330708)"><line stroke="currentColor" x2="6"/><text fill="currentColor" x="9" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,181.9173228346457)"><line stroke="currentColor" x2="6"/><text fill="currentColor" x="9" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,136.5629921259843)"><line stroke="currentColor" x2="6"/><text fill="currentColor" x="9" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,91.20866141732279)"><line stroke="currentColor" x2="6"/><text fill="currentColor" x="9" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,45.854330708661394)"><line stroke="currentColor" x2="6"/><text fill="currentColor" x="9" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,0.5)"><line stroke="currentColor" x2="6"/><text fill="currentColor" x="9" dy="0.32em"/></g></g><g id="axis-label"><text text-anchor="middle" transform="translate(-82,226.77165354330708),rotate(-90)" font-family="sans-serif" font-size="22" fill="black" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1">y</text></g></g></g></g></svg>
Solution

  • Your SVG is interpreted differently in Firefox than in Inkscape. Specifically, Inkscape seems to ignore transform attributes, where there is a comma in between the two different instructions (e.g. rotate, translate etc.).

    I'm not sure if that's a bug in Inkscape or if Firefox is being especially fault-tolerant there.

    You can fix it if you do a search-and-replace for '),r' and replace that with ') r'.