SVG формат — как растр только лучше.

SVG Scaleble Vector Graphics
  1. SVG - преимущества
  2. Как работает SVG
  3. Редактор SVG файлов
  4. Простые фигуры SVG
  5. Атрибуты stroke и fill

SVG это графический формат как jpg. Но только этот Graphic ещё и Scalabel, да к тому же Vector. SVG файл - это не картинка в том виде, как мы к ним привыкли. Он содержит XML разметку, которая определяет все линии, цвета, слои и прочее. Такой файл мы можем менять вручную в текстовом редакторе или с помощью JavaScript и CSS кода.

SVG — преимущества.

SVG файл не ограничен заранее заданным разрешением потому-что состоит не из пикселей, а из векторных фигур. Благодаря этому можно сколько угодно увеличивать размер svg картинки без потери качества.

SVG файл весит меньше любого другого графического файла, когда речь идёт о элементах интерфейса. Для фотографий лучше по прежнему использовать jpeg. Это происходит потому что для растрового изображения, главным фактором определяющим размер является разрешение. Для svg определяющими факторами являются: количество слоёв, градиенты, маски и эффекты которые должны быть описаны. Поэтому для иконок svg формат подходит как нельзя лучше.

SVG файл можно анимировать с помощью css и js или средствами svg. Мы получаем что-то вроде gif но гораздо меньшего размера. Плюс к этому анимацию можно привязать к действиям пользователя, таким как клик, наведение и прочее. Также svg может изменяться в зависимости от размера экрана, плотности пикселей и других параметров.

Как работает SVG.

SVG это файл с XML разметкой, описывающей то что должно быть изображено. Если вам нужен круг то достаточно указать в файле координаты центра, радиус и цвет. Получив эти данные браузер сам нарисует круг. Мы можем изменить радиус, ширину и цвет линий, размер svg файла не измениться.

Для использования svg на страницах сайта есть несколько вариантов. Можно вставить как обычную картинку используя тег <img> или свойство background-img. Оба этих способа ограничивают в применении анимации.

Как я уже говорил svg это файл с xml разметкой который можно открыть в текстовом редакторе. Если скопировать этот код и вставить его в HTML то картинка будет отображаться так же как если вставлять через <img>. Этот способ позволяет использовать все возможности анимации и манипуляции svg.

Ещё один вариант использовать тег <object>. Также как и предыдущий вариант даёт полную свободу действий без встраивания кода в HTML. Плюс к этому изображение будет кэшироваться брузером.

SVG картинки. Рисуем или скачиваем.

Разжиться svg картинками труда не составит. Например на этом сайте http://www.flaticon.com/. Для тех кто любит всё делать своими руками список программ для работы с векторной графикой

  1. Adobe Illustrator для Windows
  2. Sketch для Mac OS
  3. Inkscape бесплатный редактор для всех операционных систем.
  4. Онлайн редактор https://svg-edit.github.io/svgedit/releases/svg-edit-2.8.1/svg-editor.html

Перечисленых выше ресурсов должно хватить если нужны просто svg картинки без анимации. Для оживления svg, нужно знать как он устроен. Нарисуем картинку в текстовом редакторе. Прежде чем начать рисовать фигуры указываем что это векторная графика и определяем размер картинки.

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<!--здесь код картинки-->
</svg>

SVG простые фигуры

Есть несколько базовых фигур.  Каждой соответствует свой тег и атрибуты, определяющие как рисовать фигуру. Тег должен быть обязательно закрытым.

Прямоугольник.

<rect width="100" height="50" x="10" y="10" rx="5" ry="15" />

Обязательно должны быть параметры определяющие ширину width и высоту height. Дальше идут координаты X и Y определяющие где будет находиться верхний левый угол прямоугольника. Точка отсчёта находиться в верхнем левом углу изображения. Если координаты не заданы то их значение принимается равным 0. Значение rx и ry указывать не обязательно. Эти значения определяют радиусы закругления углов по осям x и y. Если радиусы по обоим осям одинаковы то можно указать один.

Окружность

<circle cx="100" cy="50" r="50" />

r — радиус окружности. cx и cy — координаты центра окружности.

Эллипс

<ellipse cx="100" cy="50" rx="100" ry="50" />

Отличается от окружности наличием двух радиусов — rx и ry по осям X и Y соответственно.

Полигон

<polygon points="30 10, 170 10, 100 100" />

Один обязательный атрибут points — содержит координаты вершин. Для каждой вершины записывают две координаты разделённых пробелом. Координаты вершин разделяют запятой.

Линия

<line x1="50" y1="10" x2="180" y2="90" stroke-width="5" stroke="red"/>

x1, y1, x2, y2 -координаты начала и конца линии. Storke-width и storke определяют толщину линии и цвет.

Ломаная линия

<polyline points="30 10, 170 10, 150 90, 10 90" stroke-width="5" stroke="red" fill="none"/>

Похожа на полигон. Координаты точек также записываются в атрибут points. Различаются тем, что у полигона последняя точка сама соединяется с первой. Атрибут fill определяет каким цветом будет заполнено пространство между линиями.

Атрибуты stroke и fill

Я уже упоминал об этих атрибутах. Рассмотрим их подробнее. fill — устанавливает цвет заливки, stroke- цвет обводки. Эти атрибуты можно использовать со всеми фигурами перечисленными выше. Для указания цвета прописываем в качестве значения атрибута название(red, green и т.д.) или указываем rgb или hex значения. В общем всё то чем пользуемся в CSS. Кроме этого мы можем задать прозрачность для обводки stroke-opacity и для заливки fill-opacity

<polygon points="30 10, 170 10, 150 90, 10 90" stroke-width="5" stroke="yellow" fill="green" stroke-opacity="0.7" fill-opacity="0.5"/>

В дополнение к свойствам определяющим цвет есть несколько атрибутов для управления способом рисования линии. Атрибут stroke-linecap определяет как рисовать концы линии.У него есть три значения

  1. but — закрывает линию под прямы углом.
  2. square — Внешне выглядит как but, но немного растягивает обводку за фактическую длину линии на растояние равное половине ширины обводки
  3. round — края линии рисуются полуругом. Радиус определяется шириной обводки.
<svg width="200" height="160" xmlns="http://www.w3.org/2000/svg">
<line x1="40" y1="40" x2="160" y2="40" stroke-width="20" stroke="black" stroke-linecap="but"/>
<line x1="40" y1="80" x2="160" y2="80" stroke-width="20" stroke="black" stroke-linecap="square"/>
<line x1="40" y1="120" x2="160" y2="120" stroke-width="20" stroke="black" stroke-linecap="round"/>
</svg>

Чтобы контролировать как соединяются две линии используем stroke-linejoin.

  1. miter - расширяет линию немного за пределы своей нормальной ширины, чтобы создать квадратный уголок, где используется только один угол
  2. round — создаёт закруглённый сегмент линии
  3. bevel — создает угол, чтобы помочь в переходе между двумя сегментами.
<svg width="200" height="250" xmlns="http://www.w3.org/2000/svg">
<polyline points="10 120, 100 20, 190 120" stroke="black" stroke-width="20" stroke-linejoin="miter" fill="none"/>
<polyline points="10 170, 100 70, 190 170" stroke="black" stroke-width="20" stroke-linejoin="round" fill="none"/>
<polyline points="10 230, 100 130, 190 230" stroke="black" stroke-width="20" stroke-linejoin="bevel" fill="none"/>
</svg>

В заключении атрибут, меняющий стандартную линию на пунктирную — stroke-dasharray. Значение атрибута — цифры разделённые запятой. Первая цифра — длина пунктира, вторая — длина пропуска.

<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
<line x1="10" y1="40" x2="290" y2="40" stroke-width="4" stroke="black" stroke-dasharray="5,5"/>
<line x1="10" y1="80" x2="290" y2="80" stroke-width="4" stroke="black" stroke-dasharray="5,10,5"/>
</svg>

С первым примером всё понятно. Пунктиры длиной 5 пикселей и расстоянием между ними 5 пикселей. Во втором примере заданы значения 5,10,5. Расчёт происходит так. Сначала пунктир 5px, далее пропуск 10px, далее снова пунктир 5px. После этого нужно опять определить длину пропуска и мы возвращаемся в начало и получаем 5px пропуска, 10px пунктир и так далее.