Cross-file <use>
SVG's <use> can only reference elements within the same document. xsvg extends it to reference
other files: <use href="logo.xsvg"> pulls in the whole file, and <use href="logo.xsvg#icon">
pulls in a single element by id. The reference is resolved and baked at compile time, so the
output is one plain, self-contained SVG with no external dependency.
Two forms
href | Brings in | Placement |
|---|---|---|
file.xsvg | the whole file, as a nested <svg> viewport | position with x/y; scale with width/height |
file.xsvg#id | a single element by id, sized to its own extent | position with x/y; scale with width/height |
<!-- the whole logo lockup -->
<use href="logo.xsvg" x="28" y="90" width="250"/>
<!-- just the mark, reused at three sizes -->
<use href="logo.xsvg#icon" x="28" y="198" width="72" height="72"/>
<use href="logo.xsvg#icon" x="116" y="214" width="56" height="56"/>
Single source of truth
Because every instance resolves the same file, editing logo.xsvg once updates every place it's
used. This is the authoring win of a component without a component runtime — you keep one canonical
asset and compose it into pages, diagrams, and badges.
How it resolves
The dependency is fetched same-origin over the compiler's lazy fetch, relative to the document's
base URL (see processing model).
A missing target, a cross-origin href (blocked by CORS), or a reference cycle degrades with a
marker rather than failing the whole compile. The pulled-in geometry is baked into the output — the
result never refers back to logo.xsvg.
Compose compiled output, too
<use> brings in another file; the in="#id" attribute on many x: elements composes another
element's compiled output in the same document — a textbox flowed inside a
boolean union, type set on a warp's spine, a
path → warp → textpath chain. Both are references resolved at compile time.
See also
- Booleans — operands by
<use href>reference. - Create outlines — referenced text auto-outlines.
- Element index — every
x:and revived element.