Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 7 commits into from
Jan 17, 2024
8 changes: 6 additions & 2 deletions files/en-us/web/svg/element/use/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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")}}
Expand Down Expand Up @@ -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

Expand Down