Root svg transform inconsistent with Chromium/Firefox/Inkscape

[reznakt]

I have found that resvg renders this SVG inconsistently with Chromium/Firefox/Inkscape:

<svg xmlns="http://www.w3.org/2000/svg" height="1000" transform="scale(.5)" viewBox="5 5 100 100" width="1000">
  <g>
    <circle cx="10" cy="10" r="3" stroke="black" stroke-width=".1"/>
    <circle cx="20" cy="10" r="3" stroke="black" stroke-width=".1"/>
    <line stroke="black" stroke-width=".1" x1="10" x2="20" y1="10" y2="10"/>
  </g>
</svg>

Here's a comparison of the output of Firefox/Chromium/Inkscape (left) and resvg (right):

I suspect the culprit here is probably the transform on the root SVG coupled with viewBox. I believe the support for transform on the svg element was added in SVG 2 and there have been inconsistencies among implementations in the past (see f.e. https://lists.w3.org/Archives/Public/www-svg/2015May/0024.html).

The output of resvg seems to be equivalent to rendering the following SVG with f.e. Firefox:

<svg xmlns="http://www.w3.org/2000/svg" height="1000" viewBox="5 5 100 100" width="1000">
  <g transform="scale(.5)">
    <circle cx="10" cy="10" r="3" stroke="black" stroke-width=".1"/>
    <circle cx="20" cy="10" r="3" stroke="black" stroke-width=".1"/>
    <line stroke="black" stroke-width=".1" x1="10" x2="20" y1="10" y2="10"/>
  </g>
</svg>

Might be related to #874.

[RazrFalcon]

Hm... interesting. I does seems like this behavior was changed in SVG 2.

The main issue with SVG 2 is that there is no changelog. No one knows what was actually changed in SVG 2.

Seems like SVG 2 mentions root transform here: https://www.w3.org/TR/SVG2/coords.html#TransformProperty
We should update our SVG 2 changelog as well.

[yisibl]

Chrome has just implemented “the transform property on the svg element.”
https://chromium-review.googlesource.com/c/chromium/src/+/6435957

It needs to be turned on: chrome://flags/#enable-experimental-web-platform-features

This feature enables the application of transformation properties—such as scaling, rotation, translation, and skewing—directly to the root element via its transform attribute. This enhancement allows developers to manipulate the entire SVG coordinate system or its contents as a whole, providing greater flexibility in creating dynamic, responsive, and interactive vector graphics. By supporting this attribute, the SVG element can be transformed without requiring additional wrapper elements or complex CSS workarounds, streamlining the process of building scalable and animated web graphics.
https://chromestatus.com/feature/6129368025530368