v137 · miscellaneous

Allow <use> to reference an external document's root element by omitting the fragment.

In this feature, we are streamlining the SVG <use> element by loosening referencing requirements. Currently, authors need to explicitly reference fragments within the SVG document. If no fragment id is given <use> will not be able to resolve the target and nothing will be rendered/referred.

concepts

  1. <use> root reference

    <use href> can drop the #fragment and references the root element of the linked document. Cleaner external-asset references for icon systems.

  2. Icon Swap

    Six icon SVGs with no id on the root — render them via <use> with the fragment dropped vs included. Pre-v137 needs you to edit every icon; v137 makes drop-in icon libraries work.

  3. Sprite Router

  4. SVG Icon Library Builder

    Pick icons from a palette, place multiple instances, and generate <use href="icon.svg"> markup — no #fragment required (Chrome 137+). Toggle size and tone while the live preview uses real external SVG files.

why it shipped

The <use> element in SVG currently restricts developers from referencing entire SVG files directly, limiting its functionality to specific elements identified by an id attribute or fragment identifier. This constraint imposes a heavier workload and increases maintenance demands, as it necessitates manual edits that are both error-prone and prone to inconsistencies—particularly when SVG files undergo frequent updates. Furthermore, it complicates the reuse of entire SVG files, especially for intricate graphics or icon sets, hindering seamless integration.

references