‘symbol’ – даёт широкие возможности для хранения и многократного дальнейшего использования векторных изображений. Наличие собственного ‘viewBox’ и ‘preserveAspectRatio’ позволяют дополнительно позиционировать и масштабировать изображения.
‘symbol’ – является одновременно контейнерным и структурным элементом.
В качестве структурного элемента он может включать в себя в любом порядке и количестве: ‘defs’, ‘g’, svg’, ‘symbol’, ‘use’.

элементы анимации – ‘animate, ‘animateColor, ‘animateMotion, ‘animateTransform, ‘set

описательные элементы – ‘desc’, ‘metadata’, ‘title’

базовые фигуры – ‘circle’, ‘ellipse’, ‘line’, ‘path’, ‘polygon’, ‘polyline’, ‘rect’

градиенты – ‘linearGradient’, ‘radialGradient’


‘a’
‘altGlyphDef’
‘clipPath’
‘color-profile’
‘cursor’
‘filter’
‘font’
‘font-face’
‘foreignObject’
‘image’
‘marker’
‘mask’
‘pattern’
‘script’
‘style’
‘switch’
‘text’
‘view’

основные атрибуты – ‘id’, ‘xml:base’, ‘xml:lang’, ‘xml:space’

графические атрибуты событий – ‘onfocusin’, ‘onfocusout’, ‘onactivate’, ‘onclick’, ‘onmousedown’, ‘onmouseup’, ‘onmouseover’, ‘onmousemove’, ‘onmouseout’, ‘onload’
атрибуты представления – ‘alignment-baseline’, ‘baseline-shift’, ‘clip’, ‘clip-path’, ‘clip-rule’, ‘color’, ‘color-interpolation’, ‘color-interpolation-filters’, ‘color-profile’, ‘color-rendering’, ‘cursor’, ‘direction’, ‘display’, ‘dominant-baseline’, ‘enable-background’, ‘fill’, ‘fill-opacity’, ‘fill-rule’, ‘filter’, ‘flood-color’, ‘flood-opacity’, ‘font-family’, ‘font-size’, ‘font-size-adjust’, ‘font-stretch’, ‘font-style’, ‘font-variant’, ‘font-weight’, ‘glyph-orientation-horizontal’, ‘glyph-orientation-vertical’, ‘image-rendering’, ‘kerning’, ‘letter-spacing’, ‘lighting-color’, ‘marker-end’, ‘marker-mid’, ‘marker-start’, ‘mask’, ‘opacity’, ‘overflow’, ‘pointer-events’, ‘shape-rendering’, ‘stop-color’, ‘stop-opacity’, ‘stroke’, ‘stroke-dasharray’, ‘stroke-dashoffset’, ‘stroke-linecap’, ‘stroke-linejoin’, ‘stroke-miterlimit’, ‘stroke-opacity’, ‘stroke-width’, ‘text-anchor’, ‘text-decoration’, ‘text-rendering’, ‘unicode-bidi’, ‘visibility’, ‘word-spacing’, ‘writing-mode’
‘class’
‘style’
‘externalResourcesRequired’
‘preserveAspectRatio’
‘viewBox’

Структура ‘symbol’, размещение в SVG файле

‘symbol’ – сам по себе не отображается, подобно элементам, размещенных в секции <defs> …</defs>, но его можно вызвать один или несколько раз по уникальному идентификатору id=”..” с помощью команды <use>

x=”0″ y=”0″ – координаты левого верхнего угла прямоугольной области просмотра изображения клона ‘symbol’ .
Если координаты не указаны, то в этом случае они эквивалентны нулю.
Если не указаны ширина и высота области просмотра, то они равны 100%.
width=”100%” height=”100%”

Обратите внимание, что ‘symbol’ расположен ниже секции <defs> …</defs>, но он может находиться и внутри секции, результат в обоих случаях одинаков – пока не будет использована команда <use>, графика не будет отрисовываться.

‘viewBox’ – служит для дополнительного масштабирования картинки, если размеры нас устраивают, то команду можно не указывать, размеры останутся как есть, мало того, если ошибетесь в семантике команды ‘viewBox’, то она будет проигнорирована без указания ошибки.
preserveAspectRatio=”xMidYMid meet” – этот атрибут можно не указывать, так это значение центрирования по ширине и высоте присвоено по умолчанию.
<title>….</title> и <desc>….</desc> – опциональные тэги, но будет хорошей практикой их полное заполнение, так как поисковики любят эти тэги и вам будет легче разбираться в файле шаблона комплекта иконок, где куча безымянных ‘symbol’. Ниже картинка с четырьмя клонами одного символа, код которого мы разобрали выше по тексту.

Использование ‘symbol’ из внешнего файла SVG

Технология такая – все иконки собираются в одном файле-шаблоне, при этом код каждой иконки упаковывается в свой отдельный символ с присвоением ему уникального идентификатора.
С помощью изменения параметров ‘viewBox’ов в шапке SVG файла и в ‘symbol’ масштабируется размер иконок. Ниже пример файла-шаблона. Этот способ удобен прежде всего тем, что прописав один раз уникальные идентификаторы по всему многостраничному проекту, в случае необходимости не нужно править везде. Иконки можно заменять, редактировать, изменяя код файла шаблона. Полная аналогия с CSS.

Теперь остается только вызвать и разместить иконки внутри контейнера, роль которого выполняет ‘viewport’ – пользовательская область просмотра. В нашем случае это прямоугольник 450х450 пикселей.

Команда вызова иконки – название файла.svg#имя уникального ‘symbol’.

Download