Начинается документ SVG со следующего заголовка:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
После чего открывается контейнер <svg>, и уже в его теле описываются элементы, рассмотрим на примере:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="500px" width="500px">
<rect x="20" y="20" width="100" height="100" fill="black" stroke="yellow" stroke-width="5px" />
<circle cx="100px" cy="100px" r="50px" fill="red" style="fill-opacity: 0.3" />
<circle cx="150px" cy="150px" r="100px" fill="blue" style="fill-opacity: 0.5" />
<circle cx="250px" cy="250px" r="200px" fill="green" style="fill-opacity: 0.8" />
</svg>
Итог будет выглядеть так:
Теперь по порядку:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="500px" width="500px">
Эта строка задаёт размер создаваемого элемента, в конкретном случае это объект с шириной и высотой 500 пикселей, в случае если «внутренние» элементы будут выходить за эти пределы - они не будут отображаться на странице.
<rect x="20" y="20" width="100" height="100" fill="black" stroke="yellow" stroke-width="5px" />
Эта строка создаёт чёрный квадрат шириной и высотой 100 пикселей, координаты – 20 пикселей сверху вниз от начальной точки и слева направо столько же. Атрибут stroke – задаёт линию, которая окружает квадрат, я специально сделал её жёлтого цвета, чтобы было видно, что это значит.
Далее идут три круга разных размеров и разного цвета:
<circle cx="100px" cy="100px" r="50px" fill="red" style="fill-opacity: 0.3" />
<circle cx="150px" cy="150px" r="100px" fill="blue" style="fill-opacity: 0.5" />
<circle cx="250px" cy="250px" r="200px" fill="green" style="fill-opacity: 0.8" />
Первый круг имеет объём в 50 пикселей и координаты 100 пикселей от начальной точки сверху вниз и слева направо, имеет заливку красного цвета и «прозрачность» - style="fill-opacity: 0.3". По тому же образцу были нарисованы и другие два круга, я не стал добавлять атрибут stroke, но он подходит и круглым объектам.
Стоит так же отметить, по поводу прозрачности, что теги объектов создают некие «слои» и эти слои накладываются друг на друга в порядке очереди. Соответственно первый тег с квадратом создал самый нижний слой, и дальше по списку: красный, синий, зелёный.