Alternative (simpler) way to address the images inside the sprite (no math)
dko-slapdash opened this issue · comments
The external-svg-sprite-loader module addresses the individual images by doing math and resizing for the images. This (among other things) also distorts the image proportion when the image is rendered without width/height attributes of e.g. <img src="...#view-xyz"/>
.
FYI, there is an alternative (and probably simpler) approach used by svg-sprite-loader:
<svg ...>
<defs>
<style>
.sprite-symbol-usage {display: none;}
.sprite-symbol-usage:target {display: inline;}
</style>
<symbol viewBox="0 0 100 114" id="img1">...</symbol>
<symbol viewBox="0 0 50 50" id="img2">...</symbol>
</defs>
<use id="view-img1" xlink:href="#img1" class="sprite-symbol-usage" />
<use id="view-img2" xlink:href="#img2" class="sprite-symbol-usage" />
</svg>
There is no math/resizing here, and also we can see that all the images render at (0, 0) with their native width and height; the images are invisible due to .sprite-symbol-usage class.
But when the sprite file is addressed as e.g. <img src="sprite.svg#view-img2"/>
, then, due to :target pseudo-class, the selected <use/>
becomes visible.
P.S.
The full demo:
a.svg:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style>
.sprite-symbol-usage {display: none;}
.sprite-symbol-usage:target {display: inline;}
</style>
<symbol viewBox="0 0 16 16" id="img1" fill="none">
<path d="M15 8C15 8 11.9 11.5 8 11.5C4.1 11.5 1 8 1 8C1 8 4.1 4.5 8 4.5C11.9 4.5 15 8 15 8Z" stroke="black" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
<symbol viewBox="0 0 16 16" id="img2" fill="none">
<path d="M15.5 6.5V13.5C15.5 14.6 14.6 15.5 13.5 15.5H3.5C2.4 15.5 1.5 14.6 1.5 13.5V6.5" stroke="black" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
</defs>
<use id="view-img1" xlink:href="#img1" class="sprite-symbol-usage" />
<use id="view-img2" xlink:href="#img2" class="sprite-symbol-usage" />
</svg>
a.html:
<img src="a.svg#view-img2" />
@dko-slapdash does this work with CSS as well?