feat(svg): Add usage note on deprecation of data URIs in use href attr (

#31684) * feat(svg): Add usage note on deprecation of data URIs in use href attr * relnote(122): Improve language based on reviewer feedback, link to usage notes * Update files/en-us/web/svg/element/use/index.md Co-authored-by: Dipika Bhattacharya <[email protected]> --------- Co-authored-by: Dipika Bhattacharya <[email protected]>
mdn · Jan 17, 2024 · 5bc94b3 · 5bc94b3
1 parent 57970dc
commit 5bc94b3
Showing 1 changed file with 6 additions and 2 deletions.
diff --git a/files/en-us/web/svg/element/use/index.md b/files/en-us/web/svg/element/use/index.md
@@ -36,7 +36,7 @@ svg {
 ## Attributes
 
 - {{SVGAttr("href")}}
-  - : The URL to an element/fragment that needs to be duplicated.<br/> _Value type_: [**`<URL>`**](/en-US/docs/Web/SVG/Content_type#url) ; _Default value_: none; _Animatable_: **yes**
+  - : The URL to an element/fragment that needs to be duplicated. See [Usage notes](#usage_notes) for details on common pitfalls.<br/> _Value type_: [**`<URL>`**](/en-US/docs/Web/SVG/Content_type#url) ; _Default value_: none; _Animatable_: **yes**
 - {{SVGAttr("xlink:href")}} {{Deprecated_Inline}}
   - : An [`<IRI>`](/en-US/docs/Web/SVG/Content_type#iri) reference to an element/fragment that needs to be duplicated. If both {{SVGAttr("href")}} and {{SVGAttr("xlink:href")}} are present, the value given by {{SVGAttr("href")}} is used.<br/> _Value type_: [**`<IRI>`**](/en-US/docs/Web/SVG/Content_type#iri) ; _Default value_: none; _Animatable_: **yes**
 - {{SVGAttr("x")}}
@@ -78,9 +78,13 @@ Since the cloned nodes are not exposed, care must be taken when using [CSS](/en-
 
 For security reasons, browsers may apply the [same-origin policy](/en-US/docs/Web/Security/Same-origin_policy) on `use` elements and may refuse to load a cross-origin URL in the {{SVGAttr("href")}} attribute. There is currently no defined way to set a cross-origin policy for `use` elements.
 
+> **Warning:** Loading resources with data URIs in the `href` attribute is deprecated for security reasons.
+> This applies to `<use href="data:...` and also when setting `href` by using the [`set`](/en-US/docs/Web/SVG/Element/set) or [`setAttribute`](/en-US/docs/Web/API/Element/setAttribute) method.
+> See "Load from data: URI" in the [Browser compatibility](#browser_compatibility) table to check support in different browser versions.
+
 > **Warning:** Since SVG 2, the {{SVGAttr("xlink:href")}} attribute is deprecated in favor of {{SVGAttr("href")}}. See {{SVGAttr("xlink:href")}} page for more information.
 
-{{svginfo}}
+{{SVGInfo}}
 
 ## Specifications