Элемент SVG <svg>

SVG-изображения создаются с использованием различных элементов, которые применяются к структуре, рисованию и макету векторного изображения. Если svg не является корневым элементом, элемент svg может быть использован для внедрения независимого фрагмента svg в текущий документ (например, HTML документ). Этот независимый фрагмент имеет независимый обзор и систему координат.

Правила использования svg элемента

Корневым элементом всех SVG-изображений является элемент <svg>. Правила использования svg элемента:

<svg xmlns="http://www.w3.org/2000/svg">　
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">　
</svg>

Помните, что не забудьте использовать две объявления命名ного пространства, иначе Firefox не будет呈现 SVG файл как изображение, а интерпретировать его как любой другой XML файл.

Вложенные элементы SVG

Элементы SVG могут быть вложены друг в друга, как показано ниже:

<svg xmlns="http://www.w3.org/2000/svg">
　　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<svg>
　　　　</svg>
</svg>

Вложенные элементы SVG можно использовать для группировки SVG-форм и их размещения в виде набора. Все формы, вложенные в элемент svg, будут позиционироваться относительно его окружающего элемента svg (x, y). Также можно переместить все вложенные формы, изменив координаты x и y окружающего svg элемента.
Это пример, в котором внутри двух элементов svg вложены два прямоугольника. Исключая цвет, x, y, высота и ширина двух прямоугольников определены одинаково. Облачные элементы svg имеют разные значения x. Поскольку положение x прямоугольника объясняется относительно его окружающего элемента svg x, два прямоугольника отображаются в разных положениях x.

Онлайн пример

<svg xmlns="http://www.w3.org/2000/svg">
　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<svg　x="10">
　　　　<rect　x="10"　y="10"　height="100"　width="100"
　　　　　　　　style="stroke:#ff0000;　fill:　#0000ff"/>
　　</svg>
　　<svg　x="200">
　　　　<rect　x="10"　y="10"　height="100"　width="100"
　　　　　　　　style="stroke:#009900;　fill:　#00cc00"/>
　　</svg>
</svg>

Свойство пространства имен необходимо только для корневого элемента SVG. Если SVG не установлено ни одного пространства имен, то все вложенные элементы предполагаются в пространстве имен по умолчанию (установленном в корневом элементе).
Это SVG-изображение, сгенерированное вышеуказанным кодом: