Giters

bensampaio / external-svg-sprite-loader

A webpack loader and plugin that generate SVG sprites out of a collection of SVG files used in your JS and CSS files

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Alternative (simpler) way to address the images inside the sprite (no math)

dko-slapdash opened this issue · comments

commented

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" />
commented

@dko-slapdash does this work with CSS as well?