Tab indentation affects rendering styles

[ahaoboy]

The number of tspan tag indentations causes the rendered character positions to change

<svg width="2080px" height="608px"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">

  <style>
tspan {
    font-variant-ligatures: none;
    dominant-baseline: central;
    font-variant-ligatures: none;
    white-space: pre;
    font-family: Courier, monospace;
    font-size: 32px;
}

  </style>
  <text x="20px" y="256px" font-weight="bold" width="20px" height="32px" fill='rgb(13, 188, 121)'>
                      <tspan>✓</tspan>
  </text>
  <text x="40px" y="256px" font-weight="bold" width="20px" height="32px" fill='white'>
    <tspan></tspan>
  </text>
  <text x="60px" y="256px" font-weight="bold" width="20px" height="32px" fill='white'>
    <tspan>b</tspan>
  </text>
  <text x="80px" y="256px" font-weight="bold" width="20px" height="32px" fill='white'>
    <tspan>e</tspan>
  </text>
  <text x="100px" y="256px" font-weight="bold" width="20px" height="32px" fill='white'>
    <tspan>n</tspan>
  </text>
  <text x="120px" y="256px" font-weight="bold" width="20px" height="32px" fill='white'>
    <tspan>c</tspan>
  </text>
  <text x="140px" y="256px" font-weight="bold" width="20px" height="32px" fill='white'>
    <tspan>h</tspan>
  </text>
</svg>

+ <tspan>✓</tspan>
-                       <tspan>✓</tspan>

chrome/edge

resvg

 cat ./test.svg | resvg - -c > test.png

[RazrFalcon]

This is the expected behaviour because you have xml:space="preserve"

Yes, for some reason Chrome and Safari ignore it in this case, but that's SVG for you - no one knows how to render it.

Not a bug unless someone would be able to figure out what part of the spec defines such behaviour.

[ahaoboy]

Thanks for the explanation.