<use>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

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

Пример

html,
body,
svg {
  height: 100%;
}

html

<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-стилей, переопределяют те, что были заданы раньше в каскаде). Только атрибуты x, y, width, height и 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: Устарело: Эта возможность была удалена из веб-стандартов. Хотя некоторые браузеры по-прежнему могут поддерживать её, она находится в процессе удаления. Не используйте её ни в старых, ни в новых проектах. Страницы или веб-приложения, использующие её, могут в любой момент сломаться.
<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-свойств для этого элемента.

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

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

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

Specification
Scalable Vector Graphics (SVG) 2 # UseElement

Совместимость с браузерами

BCD tables only load in the browser