Можно ли ссылаться на SVG-файл один раз, а затем использовать его несколько раз?

Question

Так что вместо того, чтобы иметь:

<svg class="icon-user">
    <use href="LONGFILENAME.svg#icon-user">
    </use>
</svg>

<svg class="icon-user2">
    <use href="LONGFILENAME.svg#icon-user2">
    </use>
</svg>

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

<svg class="icon-user">
    <use href="#icon-user">
    </use>
</svg>

<svg class="icon-user2">
    <use href="#icon-user2">
    </use>
</svg>

это возможно?

Answer 1

С <use>, href может означать:

URL-ссылка на элемент / фрагмент в SVG-документе для клонирования.

Таким образом, вы можете включить файл «определений», содержащий несколько SVG, и ссылаться на них по всему документу.

#svgdefs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 2em;
  height: 2em;
  fill: gray;
}

.icon-star {
  fill: orange;
}

.icon-star-tomato {
  fill: tomato;
}

<svg aria-hidden="true" id="svgdefs" version="2" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <symbol id="icon-lock" viewBox="0 0 32 32">
      <title>lock</title>
      <path d="M15 21.915v0c-0.583-0.206-1-0.762-1-1.415 0-0.828 0.672-1.5 1.5-1.5s1.5 0.672 1.5 1.5c0 0.653-0.417 1.209-1 1.415v2.594c0 0.263-0.224 0.491-0.5 0.491-0.268 0-0.5-0.22-0.5-0.491v-2.594zM8 14v0 0c-1.658 0.005-3 1.34-3 3.009v9.981c0 1.662 1.346 3.009 3.009 3.009h14.982c1.662 0 3.009-1.337 3.009-3.009v-9.981c0-1.659-1.341-3.005-3-3.009v-3.501c0-4.142-3.366-7.499-7.5-7.499-4.142 0-7.5 3.357-7.5 7.499v3.501zM11 14v-3.499c0-2.492 2.015-4.501 4.5-4.501 2.48 0 4.5 2.015 4.5 4.501v3.499h-9z"></path>
    </symbol>
    <symbol id="icon-star" viewBox="0 0 30 32">
      <title>star</title>
      <path d="M29.714 11.554c0 0.321-0.232 0.625-0.464 0.857l-6.482 6.321 1.536 8.929c0.018 0.125 0.018 0.232 0.018 0.357 0 0.464-0.214 0.893-0.732 0.893-0.25 0-0.5-0.089-0.714-0.214l-8.018-4.214-8.018 4.214c-0.232 0.125-0.464 0.214-0.714 0.214-0.518 0-0.75-0.429-0.75-0.893 0-0.125 0.018-0.232 0.036-0.357l1.536-8.929-6.5-6.321c-0.214-0.232-0.446-0.536-0.446-0.857 0-0.536 0.554-0.75 1-0.821l8.964-1.304 4.018-8.125c0.161-0.339 0.464-0.732 0.875-0.732s0.714 0.393 0.875 0.732l4.018 8.125 8.964 1.304c0.429 0.071 1 0.286 1 0.821z"></path>
    </symbol>
  </defs>
</svg>

<svg class="icon icon-lock"><use href="#icon-lock"></use></svg>
<svg class="icon icon-star"><use href="#icon-star"></use></svg>
<svg class="icon icon-star"><use href="#icon-star"></use></svg>
<svg class="icon icon-star icon-star-tomato"><use href="#icon-star"></use></svg>