I want to create an image, say, a crowned stag inside a flamed heart.
Both the elements are defined as shown:
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="d-none">
<defs>
…
<symbol id="bi-heart" class="bi bi-heart" viewBox="0 0 16 16">
<path d="…"/>
</symbol>
<symbol id="bi-stag" class="bi bi-stag" viewBox="0 0 16 16">
<path d="…"/>
</symbol>
…
</defs>
</svg>
…
</body>
I combine them as this:
<div>
<svg width="64" height="64" fill="currentColor">
<use href="#bi-heart"></use>
<use href="#bi-stag"></use>
</svg>
</div>
So far so good. But now I’d like the stag to be N times smaller, and centered hz/vt (or, even better, having relative offsets).
How to achieve this?
You need to sign in to view this answers
Leave feedback about this