Воскресенье, 06 Сентябрь 2015 11:31

Кратко об SVG

SVG (Scalable Vector Graphic) – масштабируемая векторная графика. Я не стал создавать отдельную рубрику для SVG, хотя скорей всего нужно было, но у меня просто не будет времени настолько углублённо изучить эту систему. Поэтому все свои опыты в этом направлении я буду писать именно в xhtml потому что файлы SVG описываются по всем правилам XML и имеют разрешения *.svg и *.svgz.

Начинается документ 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>

Итог будет выглядеть так:

Scalable Vector Graphic

Теперь по порядку:

<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, но он подходит и круглым объектам.

Стоит так же отметить, по поводу прозрачности, что теги объектов создают некие «слои» и эти слои накладываются друг на друга в порядке очереди. Соответственно первый тег с квадратом создал самый нижний слой, и дальше по списку: красный, синий, зелёный.

Спонсоры: