v144 · css

SVG2 CSS Cascading

Align the Blink implementation with the SVG2 specification for matching CSS rules in <use> element trees.

concepts

  1. SVG Cascade

    SVG2 align: CSS rules now beat SVG presentation attributes in the cascade. Hard-coded fill='red' in markup is now overridable by a sufficiently-specific CSS rule.

  2. Animated SVG via CSS

    Hover and animate the fill of an SVG circle authored with a fill='red' presentation attribute — only possible because SVG2 lets CSS win the cascade.

  3. Use Tree Theming

    Reusable icon set in <symbol>s with hardcoded fills, themed entirely from outer CSS via <use>. The cascade now walks into the use-tree.

  4. Dynamic Theme

    An inline SVG icon set (home, star, heart, search, bell, settings) themed entirely via CSS custom properties cascading into SVG fills. Switch between 4 themes live and see per-icon accent overrides using cascade specificity.

why it shipped

CSS selectors match against the wrong tree for <use> instantiations, which means selectors do not match correctly for structural relationships and user interaction state.

references