Skip to content

Latest commit

 

History

History
143 lines (94 loc) · 6.27 KB

allow-use-to-reference-entire-files.md

File metadata and controls

143 lines (94 loc) · 6.27 KB

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

Authors:

Participate

Feature request: [SVG2] Allow to reference entire files.

Spec: https://svgwg.org/svg2-draft/struct.html#UseElement

Table of Contents

1. Introduction

The use element in SVG allows for the reuse of existing SVG elements by referencing them, but currently browsers only support these being id references. We propose that browsers also support the SVG2 capability of allowing a use reference to refer to an entire file, without id.

2. Problem Statement

The use element does not support referencing entire SVG files directly. It only allows referencing specific elements within an SVG file using an id attribute/fragment identifier. This limitation creates significant friction for developers, as it requires manual modification of the source SVG files — adding id attributes or defining fragment identifiers — in order to use it. This manual process not only increases development and maintenance overhead, but is also error-prone and can lead to inconsistencies, particularly in scenarios where SVG assets are frequently updated or sourced externally. This limitation breaks the common developer expectation of being able to reuse SVG assets out-of-the-box — especially when sourcing icons or illustrations from design systems, marketplaces, or third-party libraries.

Ultimately, the lack of support for referencing entire external SVG files using use reduces developer productivity, increases the risk of inconsistencies, and makes scalable asset management more challenging — particularly for complex graphics and large icon sets. ( Refer Section Customer/Developer Feedback: Pain Points)

3. Current Limitation

To clone an SVG element with a use tag, you currently need to reference a specific element within the SVG file using a fragment identifier (an id with a hash #):

<svg> 
  <use xlink:href="myshape.svg#icon"/>
</svg>

In this example, #icon is the fragment identifier pointing to an element with id="icon" within myshape.svg, which might look like:

myshape.svg

<svg id="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0,0,512,512"> 
  <circle cx="256" cy="256" r="200"/> 
</svg>

4. Motivation and User Use Case

The above limitation introduces the below issues while using fragment identifier":

4.1 Manual Editing:

Example: Consider an SVG file without an id:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0,0,512,512"> 
  <circle cx="256" cy="256" r="200"/> 
</svg>

To use this SVG with a  tag, you need to add an id:

<svg id="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0,0,512,512"> 
  <circle cx="256" cy="256" r="200"/> 
</svg>

Then reference it:

<svg> 
  <use xlink:href="myshape.svg#icon"/>
</svg>

4.2 Downsides of Using id#

  • Increased Workload: Manually adding id attributes to each SVG file increases the workload, especially if you have many SVG files.

  • Error-Prone: Manual editing can lead to errors, such as typos or missing id attributes.

  • Inconsistent Updates: If the SVG files are updated frequently, ensuring that each file has the correct id can be challenging and lead to inconsistencies.

  • Maintenance Overhead: Keeping track of id attributes and ensuring they are correctly referenced adds to the maintenance overhead.

Note: SVG image element currently supports referencing entire SVG files, much like this proposal for use. The API surface and behaviors between image and use are significantly different, leaving room for both versions.

5. Proposed Approach

Allow the use element to reference entire SVG files without needing an id. This means we can reuse the whole SVG file like this:

<svg width="100" height="100"> 
  <use href="icon.svg" /> 
</svg>

In above SVG we now return the root SVG element of icon.svg when the use element try to resolve its href target. That way the entire SVG referenced by icon.svg will be rendered.

Note that in the current code base if we use the above SVG as-is nothing will be rendered. As the use element is unable to resolve the target to render without the fragment identifier.

6. Customer/Developer Feedback: Pain Points

Whenever I import an SVG with  element it won't work unless I specify the id of that SVG even though it's the only SVG in the document! Link

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/41809208/8583692 Why the element in SVG doesn't work?

https://stackoverflow.com/q/7215009/8583692  How to reference external SVG file in SVG correctly?

https://stackoverflow.com/q/55452106/8583692 How to use the whole SVG with a tag?

https://stackoverflow.com/q/53794292/8583692 Display external SVG with tag and href or xlink:href attribute?

https://stackoverflow.com/q/68746095/8583692 Why can't I import an SVG by using without using the id?

7. References & acknowledgements

Many thanks for valuable feedback and advice from:

  • Fredrik Söderquist
  • Abhishek Singh
  • Daniel Clark
  • Ragvesh Sharma
  • Kurt Catti-Schmidt