<defs>

Элемент <defs> используется для хранения графических объектов, которые будут использованы позже. Объекты, созданные внутри элемента <defs>, не отображаются непосредственно. Для их отображения необходимо сделать ссылку на них (например, с помощью элемента <use>).

На графические объекты можно ссылаться откуда угодно, однако определение этих объектов внутри элемента <defs> способствует пониманию содержимого SVG и положительно сказывается на доступности документа.

Пример

html

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Some graphical objects to use -->
  <defs>
    <circle id="myCircle" cx="0" cy="0" r="5" />

    <linearGradient id="myGradient" gradientTransform="rotate(90)">
      <stop offset="20%" stop-color="gold" />
      <stop offset="90%" stop-color="red" />
    </linearGradient>
  </defs>

  <!-- using my graphical objects -->
  <use x="5" y="5" href="#myCircle" fill="url('#myGradient')" />
</svg>

Контекст использования

Категории Элемент-контейнер, Структурный элемент

Разрешённое содержимое Любое количество следующих элементов в любом порядке:
Элементы анимации
Дескриптивные элементы
Элементы фигур
Структурные элементы
Элементы градиента
<a>, <clipPath>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

Категории	Элемент-контейнер, Структурный элемент
Разрешённое содержимое	Любое количество следующих элементов в любом порядке: Элементы анимации Дескриптивные элементы Элементы фигур Структурные элементы Элементы градиента `<a>`, `<clipPath>`, `<cursor>`, `<filter>`, `<font>`, `<font-face>`, `<foreignObject>`, `<image>`, `<marker>`, `<mask>`, `<pattern>`, `<script>`, `<style>`, `<switch>`, `<text>`, `<view>`

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

Спецификация
Scalable Vector Graphics (SVG) 2 # Head

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`defs`	1	12	1.5	8	3.1	18	4	10.1	2	1.0	3
`systemLanguage`	1	12	12	≤12.1	3.1	18	14	≤12.1	2	1.0	3

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs