<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

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

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

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

Specification Status Comment
Scalable Vector Graphics (SVG) 2
Определение '<use>' в этой спецификации.
Кандидат в рекомендации
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
Определение '<use>' в этой спецификации.
Рекомендация Initial definition

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
useChrome Полная поддержка 22Edge Полная поддержка 12Firefox Полная поддержка 4
Замечания
Полная поддержка 4
Замечания
Замечания For years, Firefox has suffered from a bug whereby it doesn't completely follow the use cascading rules (see bug 265894). A fix is documented by Amelia Bellamy-Royds on StackOverflow. The good news is that this is finally fixed as of Firefox 56.
IE Полная поддержка ДаOpera Полная поддержка 11.5Safari Полная поддержка 3WebView Android Полная поддержка 4Chrome Android Полная поддержка ДаFirefox Android Полная поддержка 4
Замечания
Полная поддержка 4
Замечания
Замечания For years, Firefox has suffered from a bug whereby it doesn't completely follow the use cascading rules (see bug 265894). A fix is documented by Amelia Bellamy-Royds on StackOverflow. The good news is that this is finally fixed as of Firefox 56.
Opera Android Полная поддержка 11.5Safari iOS Полная поддержка 3Samsung Internet Android Полная поддержка Да
Load from data: URIChrome Полная поддержка 22Edge Полная поддержка ДаFirefox Полная поддержка 4IE Нет поддержки НетOpera Полная поддержка 11.5Safari Полная поддержка 5.1WebView Android Полная поддержка 4Chrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка 11.5Safari iOS Полная поддержка 5.1Samsung Internet Android Полная поддержка Да
Load from external URIChrome Полная поддержка 22Edge Полная поддержка 13Firefox Полная поддержка 4IE Нет поддержки НетOpera Полная поддержка 11.5Safari Полная поддержка 6.1WebView Android Полная поддержка 4.4Chrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка 11.5Safari iOS Полная поддержка 6.1Samsung Internet Android Полная поддержка Да
heightChrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
hrefChrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка 9WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка 9Samsung Internet Android Полная поддержка Да
widthChrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
xChrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
xlink:href
Устаревшая
Chrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
yChrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Устаревшая. Не следует использовать в новых веб-сайтах
Устаревшая. Не следует использовать в новых веб-сайтах
Смотрите замечания реализации.
Смотрите замечания реализации.