<use>

Элемент <use> берёт элементы из SVG-документа и дублирует их где-то еще.

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"/>
  <use href="#myCircle" x="10" fill="blue"/>
  <use href="#myCircle" x="20" fill="white" stroke="red"/>
  <!--
  В данном случае атрибут stroke="red" будет игнорироваться, так как
  ранее он был задан непосредственно для фигуры круга с id "myCircle".
  Большинство атрибутов (кроме x, y, width, height и (xlink:)href) не
  переопределяют значения, заданные у предка.
  Вот почему круги имеют разные координаты "x", но одинаковое значение "stroke".
  -->
</svg>

Эффект такой же, как если бы элементы были полностью склонированы в DOM, а затем расположены в месте, где находится элемент use, подобно элементам <template> в HTML 5.

Большинство атрибутов use не переопределяют те, что уже заданы у элемента, на который use ссылается. (Это отличается от того, как атрибуты CSS-стилей, переопределяют те, что были заданы раньше в каскаде). Только атрибуты xywidthheight и href элемента use будут переопределять те, что были заданы у элемента, на который use ссылается. Однако к элементу use будут применены любые другие атрибуты, не заданные у элемента, на который use ссылается.

Поскольку клонированные элементы не отображаются, нужно соблюдать осторожность при использовании CSS для стилизации элемента use и его клонированных потомков. Нет гарантии, что CSS-свойства будут унаследованы клонированным DOM, пока вы явно не зададите им использование CSS-наследования.

По соображениям безопасности, браузеры могут применять правило ограничения домена для элементов use и могут отказаться загружать URL другого источника в атрибуте href.

Начиная с SVG 2, атрибут xlink:href получил статус "Устарело" в пользу href. Дополнительную информацию ищите на странице xlink:href. Тем не менее,  на практике всё еще может быть потребность в использовании xlink:href для кроссбраузерной совместимости (смотрите таблицу совместимости ниже).

Атрибуты

href
Ссылка на элемент/фрагмент, который нужно продублировать.
Тип значения: <URL> ; Значение по умолчанию: none; Анимируется: да
xlink:href

Устарело SVG 2

Эта возможность была удалена из веб-стандартов. Хотя некоторые браузеры по-прежнему могут поддерживать её, она находится в процессе удаления. Не используйте её ни в старых, ни в новых проектах. Страницы или веб-приложения, использующие её, могут в любой момент сломаться.

<IRI>-ссылка на элемент/фрагмент, который нужно продублировать.
Тип значения: <IRI> ; Значение по умолчанию: none; Анимируется: да
x
Координата "x" элемента use.
Тип значения: <coordinate> ; Значение по умолчанию: 0; Анимируется: да
y
Координата "y" элемента use.
Тип значения: <coordinate> ; Значение по умолчанию: 0; Анимируется: да
width
Ширина элемента use.
Тип значения: <length> ; Значение по умолчанию: 0; Анимируется: да
height
Высота элемента use.
Тип значения: <length> ; Значение по умолчанию: 0; Анимируется: да

Примечание: Начиная с SVG2, x, y, width, и height являются Свойствами Геометрии, то есть эти атрибуты также могут быть использованы в качестве CSS-свойств для этого элемента.

Глобальные атрибуты

Core Attributes
Most notably: id, tabindex
Styling Attributes
class, style
Conditional Processing Attributes
Most notably: requiredExtensions, systemLanguage
Атрибуты Событий
Global event attributes, Graphical event attributes
Presentation Attributes
Most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility
ARIA Атрибуты
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
XLink Атрибуты
xlink:href, xlink:title

Примечание по использованию

КатегорииГрафические элементы, Элементы отсылки к графике, Структурный элемент
Разрешённый контентЛюбое количество следующих элементов, в любом порядке:
Элементы анимации
Элементы описания

Спецификации

Браузерная совместимость

BCD tables only load in the browser