<defs>

Базовый уровень Широко поддерживается

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и во многих версиях браузеров. Она доступна во всех браузерах с ⁨июля 2015⁩ года.

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

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

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

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

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

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

Атрибуты

Этот элемент поддерживает только глобальные атрибуты.

Интерфейс DOM

Этот элемент реализует интерфейс SVGDefsElement.

Пример

<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>

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

Спецификация
Масштабируемая векторная графика (SVG) 2> # Head>

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

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

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