Intent to Ship: Allow <use> to reference an external document's root element by omitting the fragment.
Divyansh Mangal
Contact emails
Explainer
Specification
https://svgwg.org/svg2-draft/struct.html#UseElement
Summary
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.
For example: a <use> element referencing an external file with fragment identifier will look like:
<svg>
<use xlink:href="myshape.svg#icon"></use>
</svg>
In this example, #icon is
the fragment identifier pointing to an element with id="icon" within myshape.svg.
and without fragment identifier it will look like:
<svg>
<use xlink:href="myshape.svg"></use>
</svg>
With this feature, omitting fragments or just giving the external svg file name will automatically reference the root element, eliminating the need for authors to alter the referenced document just to assign an ID to the root. This enhancement simplifies this
manual editing process and improves efficiency.
Blink component
TAG review
https://github.com/w3ctag/design-reviews/issues/1081
TAG review status
Issues open
Risks
Interoperability and Compatibility
None
Gecko: No signal (https://github.com/mozilla/standards-positions/issues/1204)
WebKit: Neutral (https://github.com/WebKit/standards-positions/issues/480)
Web developers:
Positive Customer/Developer Feedback:
https://stackoverflow.com/questions/68746095/why-cant-i-import-an-svg-by-using-use-without-using-the-id
“Whenever I import an SVG with <use> element
it won't work unless I specify the id of that SVG even though it's the only SVG in the document!”
https://stackoverflow.com/q/47595422/8583692
“SVG external reference without id”
https://stackoverflow.com/q/50896563/8583692
“Why do SVG fragment identifiers without hash not work?”
https://stackoverflow.com/q/55452106/8583692
“How to use the whole SVG with a <use> tag?”
https://stackoverflow.com/q/53794292/8583692
“Display external SVG with <use> tag and href or xlink:href attribute?”
https://stackoverflow.com/q/68746095/8583692
”Why can't I import an SVG by using <use> without using the id?”
Other signals: 15 individuals had voted that this bug impacts them in the original CRBug https://issues.chromium.org/issues/40362369
WebView application risks
Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?
None
Debuggability
No new DevTools support was required as existing mechanisms for debugging <use> today will apply to this new functionality.
Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?
Yes
Is this feature fully tested by web-platform-tests?
Yes
Chromium Repo WPTs:
https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/web_tests/external/wpt/svg/struct/reftests/use-external-svg-resource-no-fragment-id.html?q=%2Fuse-external-svg-resource-no-fragment-id.html
Flag name on about://flags
Finch feature name
AllowSvgUseToReferenceExternalDocumentRoot
Rollout plan
Will ship enabled for all users
Requires code in //chrome?
False
Tracking bug
https://issues.chromium.org/issues/40362369
Estimated milestones
|
Shipping on desktop |
137 |
|
Shipping on Android |
137 |
|
Shipping on WebView |
137 |
|
Shipping on iOS |
137 |
Anticipated spec changes
Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).
None
Link to entry on the Chrome Platform Status
https://chromestatus.com/feature/5128141573718016?gate=5095930770227200
This intent message was generated by Chrome Platform Status.
