v137 · miscellaneous

Support transform attribute on SVGSVGElement

This feature enables the application of transformation properties—such as scaling, rotation, translation, and skewing—directly to the <svg> 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 i

concepts

  1. Root <svg> transform

    The transform attribute now applies on the root <svg> element, matching every other SVG element. Brings Chrome in line with the SVG2 spec.

  2. Icon Variants

    Pay-off demo: 16 icon variants from one inline SVG, plus a SMIL animateTransform running on the root — no wrapper <g> required.

  3. Viewport router

  4. SVG Transform Sandbox

    Sliders for translate, rotate, and scale applied directly to the root <svg transform="…"> attribute (Chrome 137+). Shows the generated attribute string and compares with the equivalent CSS transform property approach, with a support probe.

    Compose translate / rotate / scale / skew on a root <svg> with sliders. Live getCTM(), getBoundingClientRect(), and viewBox / preserveAspectRatio interaction surfaced. Generated markup + pre/post compatibility matrix.

why it shipped

The motivation behind supporting the transform attribute on the <svg> root element is to provide developers with greater flexibility and efficiency in manipulating SVG graphics. Here are some key reasons:

references