Menu
I have a simple HTML5 page with an embedded SVG icon element.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
</head>
<body>
<h1>
<span>ABC</span>
<svg id="move-icon"
width="0.7em" height="0.7em"
viewBox="0 0 10 10"
style="display: inline-block">
<defs>
<marker id="arrow-end-marker"
viewBox="0 0 10 10" refX="0" refY="5"
markerHeight="3"
orient="auto">
<polygon points="0 0 10 5 0 10" />
</marker>
</defs>
<line x1="5" y1="5" x2="5" y2="7"
stroke="black" stroke-width="0.03em"
marker-end="url(#arrow-end-marker)" />
<line x1="5" y1="5" x2="3" y2="5"
stroke="black" stroke-width="0.03em"
marker-end="url(#arrow-end-marker)" />
<line x1="5" y1="5" x2="5" y2="3"
stroke="black" stroke-width="0.03em"
marker-end="url(#arrow-end-marker)" />
<line x1="5" y1="5" x2="7" y2="5"
stroke="black" stroke-width="0.03em"
marker-end="url(#arrow-end-marker)" />
</svg>
</h1>
<p>abc</p>
<h2>
<span>DEF</span>
<!-- reuse here -->❓
</h2>
<p>def</p>
</body>
</html>Now I want to reuse the embedded SVG icon in the second headline. How can this be done?
235
The SVG <use> element can reuse an SVG shape from elsewhere in the SVG document, including <g> elements and <symbol> elements. The reused shape can be defined inside the <defs> element (which makes the shape invisible until used) or outside.
The SVG format allows for the nesting of SVG graphics. It is possible for an “<svg>” elements, to be placed within another “<svg>” element.
You can embed SVG elements directly into your HTML pages.
Inline SVG simply refers to SVG markup that is included in the markup for a webpage.
symbol + use + href="#symbol-id"
to define a symbol once, and use it in other svg documents
<!-- define symbol in hidden svg document -->
<svg style="display: none" version="2.0">
<defs>
<symbol id="circle-arrow-left" viewbox="0 -10 100 110">
<path d="m 20 80 A 40 40 0 1 0 20 20"
fill="none" stroke="#000" stroke-width="10" />
<path d="M 10 0 v 40 h 40"
fill="#000" />
</symbol>
</defs>
<!-- to make the circle-arrow-left.svg file
also usable as image: -->
<use href="#circle-arrow-left"/>
</svg>
<!-- use symbol of external svg document -->
<button>
<svg width="50" height="50" version="2.0">
<use href="#circle-arrow-left" />
</svg>
</button>
<!-- transform symbol with horizontal flip -->
<button>
<svg style="transform: scale(-1, 1)" width="50" height="50" version="2.0">
<use href="#circle-arrow-left" />
</svg>
</button>change style: add the new style to where the symbol is used:
<svg style="fill: red"><use href="#s1"/></svg>
<svg class="some-class"><use href="#s2"/></svg>
inkscape does not yet support <svg version="2.0"> with <use href="#some-id"/>.
for svg version 1.1 we need <svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> and <use xlink:href="#some-id"/>
related:
https://css-tricks.com/svg-symbol-good-choice-icons/
https://css-tricks.com/svg-use-with-external-reference-take-2/
114
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
