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?
::after
or ::before` pseudo element then. You can use the svg as a background, specify a specific size and attach a js handler to the pseudo element. Or you simply reference the svg as image. Will be loaded only once, since it is cached locally and also allows to attach an event handler.