<symbol>

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

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

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

Использование элементов <symbol> для графики, которая многократно используется в одном документе, добавляет структуру и семантику. Документы с богатой структурой могут отображаться в виде графики, озвучиваться или преобразовываться в шрифт Брайля, что способствует повышению доступности.

Примечание: Сам элемент <symbol> не предназначен для отображения. Отображаются только экземпляры элемента <symbol> (то есть ссылки на <symbol> из элемента <use>). Это означает, что некоторые браузеры могут отказаться напрямую отображать элемент <symbol>, даже если свойство CSS display указывает на обратное.

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

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

Допустимое содержимое Любое количество следующих элементов в произвольном порядке:
Элементы анимации
Описательные элементы
Элементы фигур
Структурные элементы
Элементы градиентов
<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>`

Атрибуты

height: Этот атрибут задаёт высоту символа. Тип значения: <length> | <percentage>; Значение по умолчанию: auto; Анимируемый: да
preserveAspectRatio: Этот атрибут определяет, как следует деформировать фрагмент SVG, если он встроен в контейнер с другим соотношением сторон. Тип значения: (none | xMinYMin | xMidYMin | xMaxYMin | xMinYMid | xMidYMid | xMaxYMid | xMinYMax | xMidYMax | xMaxYMax) (meet | slice)?; Значение по умолчанию: xMidYMid meet; Анимируемый: да
refX: Этот атрибут задаёт координату x опорной точки символа. Тип значения: <length> | <percentage> | left | center | right; Значение по умолчанию: отсутствует; Анимируемый: да
refY: Этот атрибут задаёт координату y опорной точки символа. Тип значения: <length> | <percentage> | top | center | bottom; Значение по умолчанию: отсутствует; Анимируемый: да
viewBox: Этот атрибут задаёт границы области просмотра SVG для текущего символа. Тип значения: <list-of-numbers>; Значение по умолчанию: отсутствует; Анимируемый: да
width: Этот атрибут задаёт ширину символа. Тип значения: <length> | <percentage>; Значение по умолчанию: auto; Анимируемый: да
x: Этот атрибут задаёт координату x символа. Тип значения: <length> | <percentage>; Значение по умолчанию: 0; Анимируемый: да
y: Этот атрибут задаёт координату y символа. Тип значения: <length> | <percentage>; Значение по умолчанию: 0; Анимируемый: да

Интерфейс DOM

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

Пример

<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg">
  <!-- Our symbol in its own coordinate system -->
  <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
    <circle cx="1" cy="1" r="1" />
  </symbol>

  <!-- A grid to materialize our symbol positioning -->
  <path
    d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20"
    fill="none"
    stroke="pink" />

  <!-- All instances of our symbol -->
  <use href="#myDot" x="5" y="5" opacity="1.0" />
  <use href="#myDot" x="20" y="5" opacity="0.8" />
  <use href="#myDot" x="35" y="5" opacity="0.6" />
  <use href="#myDot" x="50" y="5" opacity="0.4" />
  <use href="#myDot" x="65" y="5" opacity="0.2" />
</svg>

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

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

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

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari в iOS	Samsung Internet	WebView для Android	WebView в iOS
`symbol`	1	12	1.5	9	3	18	4	10.1	2	1.0	3	2
`preserveAspectRatio`	1	79	1.5	15	3	18	4	14	2	1.0	4.4	2
`viewBox`	1	79	1.5	15	3	18	4	14	2	1.0	4.4	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/symbol