Элемент SVG

SVG элемент может быть использован для встраивания фрагмента SVGвнутри текущего документа, например HTML - документа. Этот фрагмент 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элемента, вы также перемещаете все вложенные объеты.

Пример

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

  1. SVG
  2. HTML