demo · v141

Responsive Icons

Pre-141, sizing a nested <svg> required CSS — the markup-only width="32" attribute was silently ignored. That broke icon libraries that ship pure-markup glyphs and assumed the same sizing rules as the top-level SVG. Drag the stage edge to see the icon respond — markup-driven, no CSS for the icons themselves.

checking support…

Choose how the inner glyph is sized; drag the right edge of the stage to resize:

nested <svg> with attrs

the markup that finally works

<svg viewBox="0 0 200 80">
  <!-- Nested SVG: width / height are presentation attributes from 141 onwards.
       Older Chromium ignored them; Firefox & Safari always honoured them. -->
  <svg viewBox="0 0 24 24" width="60" height="60">
    <path d="…"/>
  </svg>
</svg>

why this angle

Icon libraries shipped as pure SVG markup (Feather, Heroicons, Material Symbols inline mode) want the attribute path to work — that's the whole pitch of "drop this SVG anywhere, no CSS required." Before 141, Chromium silently ignored the attributes on a nested <svg>, so a glyph dropped into an outer SVG composition (a chart, a diagram template) needed CSS to size — breaking the library's promise. The fix is small but unlocks all the workflows that already worked in Firefox and Safari.

see also