Организация документа
Фрагмент SVG-документа состоит из неограниченного количества SVG-элементов, находящихся внутри элемента <svg>. Организация внутри этого документа является ключевой.
Элемент svg
Элемент <svg> является и контейнером, и структурным элементом, и может быть использован для вложения отдельного SVG-фрагмента внутрь документа. Этот фрагмент устанавливает свою собственную систему координат.
Атрибуты, используемые внутри элемента, такие как width, height, preserveAspectRatio и viewBox определяют холст для создаваемой графики.
Элемент g
Элемент g является контейнером для группировки связанных графических элементов.
Элемент <use>
Позволяет повторно использовать элементы в любом месте документа. К этому элементу можно добавить такие атрибуты, как x, y, width и height, которые определяют подробности положения элемента в системе координат.
Атрибут xlink:href здесь позволяет обратиться к элементу, чтобы использовать его повторно. Например, если у нас есть элемент <g> с идентификатором «apple», содержащий изображение яблока, то на это изображение можно ссылаться с помощью <use>: <use x="50" y="50" xlink:href="#apple" />.
Элемент defs
Графика внутри элемента <defs> не отображается на холсте, но на нее можно ссылаться и затем отображать ее посредством xlink:href.
Элемент symbol
Элемент <symbols> похож на <g>, так как предоставляет возможность группировать элементы, однако, элементы внутри <symbols> не отображаются визуально (как и в <defs>) до тех пор, пока не будут вызваны с помощью элемента <use>.
Также, в отличие от элемента <g>, <symbols> устанавливает свою собственную систему координат, отдельно от области просмотра, в которой он отображается.
Пример
Для лучшего понимания рассмотрим следующий пример:
Рассмотрим пример более подробно.