demo · v137

Icon Variants

Practical pay-off: one inline SVG icon definition, sixteen rendered variants — all by setting transform on the root <svg>. Before v137 you'd have wrapped each instance in CSS or nested <g>. Below: a sprite sheet built without any wrappers, plus a SMIL animateTransform running on the root element.

probing…
—

SMIL animateTransform on the root

Animating transform on the root element used to require wrapping a <g> inside the SVG. v137 lets the root carry the animation directly:

the code

// Build a variant grid by mutating the root attribute.
for (let i = 0; i < 16; i++) {
  const svg = document.querySelector("template.icon").content.cloneNode(true);
  const root = svg.querySelector("svg");
  const r = (i * 360) / 16;
  root.setAttribute("transform", `rotate(${r} 50 50) scale(${0.6 + (i % 4) / 8})`);
  grid.appendChild(svg);
}

<!-- SMIL on the root, no <g> wrapper required: -->
<svg viewBox="0 0 100 100">
  <rect />
  <animateTransform attributeName="transform" type="rotate"
                    from="0 50 50" to="360 50 50" dur="6s"
                    repeatCount="indefinite" />
</svg>

see also