Основы векторной графики SVG

Scalable Vector Graphic или коротко SVG – крайне полезный тег, благодаря которому можно создавать сложные многоугольные, анимированные объекты и шрифты. Что важно запомнить, так это то, что используемые объекты обязаны быть в теге svg. Также необходимо знать, что он основан на языке XML, поэтому при использовании нужно соблюдать синтаксис.

Линия на SVG
Для начала попробуем отобразить линию. Формирует её тег line, параметрами которого являются:
• x1 – начало по оси x;
• x2 – конец по оси x;
• y1 – начало по оси y;
• y2 – конец по оси y;
• stroke-width – толщина;
• stroke – оттенок.

Теперь немного кода:
<svg> <line x1="15" y1="15" x2="150" y2="150" stroke-width="3" stroke="#FF0000"/> </svg> Результат:

Фигуры на SVG
Для отображения фигур, состоящих из нескольких линий, не стоит постоянно использовать тег line. Это портит внешний вид кода. Гораздо уместней использовать специально разработанный тег polyline.

Снова немного кода:
<svg> <polyline points="20,20 100,20 150,150 20,150 20,20" stroke-width="4" stroke="#008800" fill="#40FF00"/> </svg> Результат:

Polyline обладает параметром points, в котором координаты x и y первой точки пишутся через запятую, а перед следующей парой точек ставится пробел, после чего всё повторяется сначала. Обратите внимание на атрибут fill, который служит для указания цвета внутри фигуры любым способом из css. Если заполнение не нужно, указывается значение none.

Прямоугольник на SVG
Теперь можно приступить к прямоугольнику.

Сразу код:
<svg> <rect width="120" height="150" fill="red" stroke-width="3" stroke="#441100"/> </svg> Результат:

Для этой фигуры используется тег rect, атрибуты которого (height и width) соответствуют обычным параметрам высоты и ширины. Всё остальное вы уже знаете, оно предназначено для выполнения тех же задач.

Круг на SVG
Создадим принципиально новую фигуру – круг.

Сначала традиционно код:
<svg> <circle cx="80" cy="120" r="60" fill="#FFFF00"/> </svg> Результат:

Как видно, окружность рисует тег circle, в котором указываются cx, cy и r, которые служат для обозначения местоположения точки центра и радиуса окружности соответственно.

Эллипс на SVG
Эллипс прописывается схожим способом, что и круг, но для его прорисовки предназначен тег ellipse, в атрибутах которого указываются величины радиусов по x и y.

Сначала код:
<svg> <ellipse cx="80" cy="70" rx="40" ry="20" fill="#FF00FF"/> </svg> Результат:

Многоугольники на SVG
Для многоугольников используется тег polygon, атрибуты которого известны из контейнера polyline.

Код:
<svg> <polygon points="1,1 40,40 120,40 40,1 1,1" fill="#0000FF" stroke-width="3" stroke="#000000"/> </svg> Результат:

Просмотры: 471
 Обсуждения: 0 Обсудить

Мы используем файлы cookie и данные о IP-адресе для улучшения работы ресурса. Продолжая использовать сайт, вы соглашаетесь с условиями использования данных технологий.