Блог

Я пытаюсь использовать SVG самым чистым способом, используя лист спрайта, но что-то перемалывает мое снаряжение. Загруженные мной SVG-файлы поставляются с width height атрибутами a и примерно такими:

 <svg id="icon-ellipsis" width="21" height="5">
  <use href="/icons.svg#icon-ellipsis"></use>
</svg>
 

Я бы хотел, чтобы эти атрибуты были на листе спрайта, а не в разметке, потому что я думаю, что это было бы чище, тогда разметка ссылается только на значок и не имеет отношения к тому, как он должен выглядеть

Это также было бы более удобно. Если по какой-то причине вы хотите перечислить все свои SVG-файлы на листе спрайтов без какой-либо разметки (например, в начале проекта), то, если у них нет этих атрибутов, они будут выглядеть не так, как ожидалось, когда вы собираетесь их вызывать

Так или иначе, я попытался поместить их на <symbol> элемент, как это сделали бы вы, viewBox но, похоже, это не работает:

 <svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="icon-ellipsis" width="21" height="5">
    <path d="M2.5 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm8 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm8 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z" fill-rule="evenodd" />
  </symbol>
</svg>
 

Есть ли способ это сделать?

Вы можете использовать viewBox на symbol , width и height = 100% на svg , и, наконец, использовать width и height на use элементе.

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
      <symbol id="icon-ellipsis" viewBox="0 0 21 5">
        <path d="M2.5 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm8 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm8 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z" />
      </symbol>
      <use xlink:href="#icon-ellipsis" x="0" y="0" width="21" height="5" fill="blue" />
      <use xlink:href="#icon-ellipsis" x="0" y="100" width="100" height="25" fill="#eef" />
      <!-- Even uses with different width/height ratio get rendered ok because of viewBox attribute -->
      <use xlink:href="#icon-ellipsis" x="100" y="100" width="200" height="10" fill="#ff0" />
    </svg> 

Короткий ответ: нет, вы не можете. Не с листом спрайта.

В любом случае это на самом деле не имеет смысла. Если вы хотите зафиксировать ширину и высоту ваших символов SVG в определенных значениях пикселей, то зачем использовать SVG? С таким же успехом вы можете просто использовать таблицу спрайтов PNG.