demo · v141

SVG Sizing Calculator

Drag the sliders to set width and height on a nested <svg> element. In Chrome 141 those attributes act as CSS presentation attributes — they participate in the cascade and CSS rules can override them. Toggle the CSS override to see the difference.

measuring presentation attribute support…
280
200
100
80
adds svg > svg { width: 50%; height: 50%; } — overrides attr in 141+
nested svg

Computed sizes

outer SVG —
inner SVG (attr) —
inner SVG (computed) —
CSS override active no
attr overridden by CSS —

Before and after Chrome 141

Pre-141 — attributes override CSS

attr wins

CSS style="width:40px" applied but attribute width="80" takes precedence — nested SVG renders at 80×50.

141+ — CSS cascade wins (presentation attrs)

CSS wins

CSS style="width:40px" overrides the attribute — nested SVG renders at 40×30 in Chrome 141+.

measuring…

Design system use case

Icon component — size controlled by parent CSS

Pre-141: design system had to use CSS width/height on a wrapper <div> and scale the inner SVG with transform: scale() — fragile and clipped.

141+: set width/height as HTML attributes in the icon markup for default size, then override with CSS from the component consumer. No wrapper div needed.

Slider below changes size via a CSS custom property — works in 141+:

48px

the markup

<svg width="300" height="200">
  <svg width="100" height="80">
    <!-- In Chrome 141, width="100" and height="80" are
         now CSS presentation attributes — same as SVG top-level
         elements and HTML <img>. CSS can override them:        -->
    <rect width="100%" height="100%"/>
  </svg>
</svg>

<style>
  /* This now works — CSS beats the attribute in Chrome 141 */
  svg > svg { width: 50%; height: 50%; }
</style>

see also