Следить за новостями:

Категории
Свежие записи
BrainFБлог

Начало работы со встроенным SVG

SVG — аббревиатура от scalable vector graphics (масштабируемая векторная графика), и уже это название является достаточно многозначительным. SVG дает нам возможность масштабировать графику от 100% до 1000% совсем без потерь качества. SVG файл декларирует в формате XML различные формы и пути внутри объекта SVG, состоящие из набора точек, позиций, длины, радиуса и т.д. в зависимости от типа фигуры. Если вы когда-либо работали в любом из векторных редакторов (таких как Adobe Illustrator or Corel Draw), то вы создавали графику, легко поддающуюся описанию в формате SVG.
Особенно удобно применять SVG для таких вещей как иконки, благодаря тому что можно создать один небольшой SVG файл и масштабировать его до больших размеров без потерь. Поддержка и мощь SVG достаточно быстро ширятся в интернете, и библиотеки наподобие Snap.svg дают нам возможность создавать действительно удивительные вещи. Сегодня вы получите некий базис в SVG и я покажу вам действительно классные вещи, охватывающие основные реализации, создание элементов и манипуляцию с атрибутами.

Использование встроенного SVG

Существует три основных применения SVG

  • как фоновое изображение
  • как атрибут SRC
  • встроенный SVG

Первые два являются основными и очень распространенными. У вас есть SVG файл и вы ссылаетесь на него также как и на любой другой медиа-файл. XML данные встроенного SVG размещены непосредственно в нашем документе, что позволяет нам получить доступ к элементам с помощью CSS и JavaScript.
Благодаря этому мы можем манипулировать заливкой, контуром, положением, прозрачностью и множеством других свойств и атрибутов.
Давайте посмотрим на обьявление нового встроенного SVG элемента и создание нескольких основных форм.
Декларирование SVG элемента
Поскольку в основе SVG лежит XML, мы должны определить пространство имен для нашего SVG элемента. Вы можете почитать об пространствах имен на страницах MDN здесь, но в двух словах это выглядит как-то так:

<svg xmlns="http://www.w3.org/2000/svg">
  <!--  svg stuff here  -->
</svg>

Существует ряд атрибутов, которые мы можем обьявить, но на данный момент остановимся на этих трех:

  • width — горизонтальная размерность в системе координат пользователя.
  • height — вертикальная размерность в системе координат пользователя
  • viewBox — позволяет определить что данный набор графики растягивается чтобы соответствовать определенному элементу контейнера. Значением атрибута viewBox является список из четырех чисел min-x, min-y, width и height.

Теперь наш SVG может выглядеть примерно так:

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300">
 <!--  svg stuff here  -->
</svg>

С полным списком атрибутов вы можете ознакомится в соответствующем разделе MDN.

Создание SVG фигур

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

  • circle — базовый примитив, используется для создания кругов, основывается на центральной точке и радиусе
  • rect — базовый примитив для создания прямоугольников, основывается на позиции угла и ширине с высотой
  • polygon — основная форма определяющая замкнутую фигуру, основывается на паре координат соединенных отрезками прямых
  • polygon — общий элемент, который может быть использован для определения любой фигуры. С его помощью может быть создана любая из базовых фигур.

Элемент circle

У элемента circle есть три специфических атрибута cx, cy, и r. cx и cy являются координатами центра элемента. По умолчанию имеют значение 0. r представляет собой радиус окружности. Зная это, мы можем сделать разметку, как например здесь:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="50"></circle>
</svg>

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

Элемент rect

Использование элемента rect так же интуитивно как и использование circle. Для этой базовой формы мы указываем позицию x и y левого верхнего угла а также высоту и ширину. Разметка может выглядеть следующим образом:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100">
  <rect x="0" y="0" width="200" height="100"></rect>
</svg>

Вывод будет следующим:

Элемент polygon

Элемент polygon определяется списком XY координат указанном в атрибуте points. Эти точки связываются отрезками прямых. Наша разметка будет выглядеть следующим образом:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 100">
  <polygon points="0,50 50,0 150,0 200,50 150,100 50,100"></polygon>
</svg>

А вывод вот таким:

Элемент path

элемент path является самым мощным среди элементов, которыми мы располагаем. Внутри элемента path мы можем установить атрибут d, определяющий траекторию. Атрибут d позволяет нам указать определенные движения с помощью набора команд. Можно использовать команды линии либо кривой для построения сложной фигуры. На самом деле вы вероятно не собираетесь писать кривые Безье вручную, а будете создавать их в векторном редакторе и экспортировать в SVG. Но понимать происходящее все-таки хорошо.

Давайте создадим простой квадрат используя команды линии. У нас в распоряжении есть:

  • M x y — перемещение на XY координату
  • L x y — рисует линию от текущей координаты
  • H x — рисует горизонтальную линию по координате X
  • V y — рисует горизонтальную линию по Y координате
  • Z — замыкает текущую фигуру

Зная это можно разметить квадрат для примера:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <path d="M 0 0 H 200 V 200 H 0 Z"></path>
</svg>

Мы начали в точке (0 0) переместились по горизонтали в (200 0) затем вертикально в (200 200) снова горизонтально в (0 200) и замкнули фигуру. Результат выглядит следующим образом:

Создание кривых является более сложной задачей, но в нашем распоряжении есть кривые Безье и дуги. Для примера рассмотрим построение кубической кривой Безье.
Если вы хотите больше знать о кривых Безье, я вам предлагаю ознакомится со следующей ссылкой. Вкратце, кубическая кривая Безье определяется начальной и конечной точкой, а также двумя наборами координат для которых мы рисуем касательные линии от начальной и от конечной точки. При построении кубической Безье, мы определяем нашу начальную точку, перемещаясь в нее с помощью команды M, затем инициализируем кривую Безье с помощью команды C. Вот разметка для простой кривой:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100">
  <path d="M 0 0 C 50 100, 150 100, 200 0"/>
</svg>

А вот вывод:

Добавляем стили к нашим элементам

На данный момент мы коснулись только поверхностных возможностей. Давайте вернемся к нашему примеру с кругом и добавим ему стилей.

Помните я ссылался на описание атрибутов? С их помощью мы можем многое контролировать. Давайте рассмотрим самые распространенные:

  • fill — заливка элемента цветом
  • fill-opacity — прозрачность цвета заливки
  • stroke — цвет контура элемента
  • stroke-width — толщина контура
  • stroke-opacity — прозрачность контура

Прежде всего давайте зададим нашему кругу класс для того чтобы иметь возможность использовать его в css. Теперь давайте его немного стилизуем. Вот пример новой и улучшенной разметки:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <circle class="circle" cx="100" cy="100" r="90" fill="#3399cc" stroke="#333333" stroke-width="5"></circle>
</svg>

Теперь добавим некоторые переходы и эффекты при наведении мышкой с помощью CSS. Здесь проявится красота встроенного SVG, когда мы манипулируем определенными атрибутами.

.circle {
  transition: stroke 0.3s, fill 0.3s;
}

.circle:hover {
  stroke: #3399cc;
  fill: #333333;
}

Вывод:

Удивительно! Снова убедительно призываю вас ознакомится с описанием атрибутов для того чтобы увидеть все доступные возможности.

Что дальше?

Созданный круг с переходом заливки и контура имеет минимальный шанс быть задействованным в вашем приложении/на сайте. Но знания, полученные при освоении основных приемов SVG, помогут вам продвинутся дальше. Вы, скорее всего, захотите получить доступ к путям и фигурам SVG из вашего векторного редактора (либо загруженных из сети) посредством названий классов, CSS и JavaScript.

В контексте разговора о JavaScript, SVG является еще одним элементом DOM со всеми своими субэлементами. Это дает вам доступ ко всем элементам и атрибутам через JavaScript и соответственно полный контроль над манипуляциями с ними.

Сохранение SVG для WEB

Adobe Illustrator ведущая в области индустрии программного обеспечения для работы с вектором позволяет сохранять файлы в формате .svg. Вы можете вновь открывать их в графическом редакторе или же в текстовом редакторе. Сделав это вы хорошо увидите вывод всех этих SVG путей и форм, о которых мы говорили в этом туториале. Но они все еще не готовы для публикации в сети. Вы можете подчистить их вручную (бугага), либо воспользоватся одним из предложенных инструментов:

  • онлайн оптимизатор SVG by Peter Collingridge. Удобен тем что он онлайновый)
  • этот замечательный инструмент называется SVGO. Он содержит целый ряд настроек и работает быстро прямо на вашем компьютере. Это мой предпочтительный инструмент. Но он требует установленной node.

Заключение

Это был весьма теоретический урок, но основная цель не в том чтобы заставить вас полностью понять внутреннее устройство SVG на фундаментальном уровне. Разобравшись с основами вы можете создавать действительно удивительные штуки.

На сегодняшний день поддержка SVG достаточно высокая (IE9 и выше), а возможности безграничны. Многие люди уже делают действительно интересные вещи с его применением и я надеюсь как можно скорее применить его в собственных проектах.

Спасибо за внимание.

Данная статья является переводом. Оригинал здесь

Еще по теме

Ваш комментарий
выберите имя