Support external SVG resources for 'clip-path', 'fill', 'stroke' and 'marker-*' properties

Category: Graphics
Type: Chromium catches up
Status: Enabled by default (Chrome 131)
Intent stage: None

Breaking change: No
Enterprise impact: Low
Spec maturity: Published standard
Web Platform Tests: Yes

WPT details: https://wpt.fyi/results/css/css-masking/clip-path/clip-path-url-reference-external.html https://wpt.fyi/results/svg/linking/reftests/url-processing-fetch-properties-001.sub.svg https://wpt.fyi/results/svg/linking/reftests/url-processing-fetch-properties-002.sub.svg https://wpt.fyi/results/svg/painting/reftests/gradient-external-reference.svg https://wpt.fyi/results/svg/painting/reftests/marker-external-reference.svg https://wpt.fyi/results/svg/painting/reftests/pattern-external-reference.svg

Summary

Allow external references for clip paths, markers, and paint servers (for the 'fill' and 'stroke' properties). For example, clip-path: url("resources.svg#myPath").

Motivation

This feature allows easily sharing SVG paint servers, clip paths and markers between different documents, and, for example, having a library of such resources.

Standards & signals

Specification: https://svgwg.org/svg2-draft/linking.html#URLReference
Firefox: Shipped/Shipping — Has been shipping for a long time. No attempt was made to dig up the ancient scrolls containing the relevant release notes.
Safari: No signal
Web developers: Strongly positive — Has 123 stars/+1s when this is being written.
Tracking bug: https://issues.chromium.org/40134477

Ecosystem

Web Platform Tests: https://wpt.fyi/results/?q=css%2Fcss-masking%2Fclip-path%2Fclip-path-url-reference-external
Chrome Platform Showcase: https://chrome-platform-showcase.paulkinlan-ea.deno.net/features
GenDN reference: https://gendn.paulkinlan-ea.deno.net/features
chrome.dev demos search: https://www.google.com/search?q=site%3Achrome.dev+Support%20external%20SVG%20resources%20for%20'clip-path'%2C%20'fill'%2C%20'stroke'%20and%20'marker-*'%20properties
MDN Web Docs: https://developer.mozilla.org/en-US/search?q=Support%20external%20SVG%20resources%20for%20'clip-path'%2C%20'fill'%2C%20'stroke'%20and%20'marker-*'%20properties
Baseline status: https://webstatus.dev/?q=Support%20external%20SVG%20resources%20for%20'clip-path'%2C%20'fill'%2C%20'stroke'%20and%20'marker-*'%20properties

View on chromestatus.com