SVG. Двумерная масштабируемая векторная графика

Маленький, да удаленький, велик, да дик.

Сразу начну с примера SVG, чтобы все были в курсе, о чем тут вообще речь идёт. Перечислю чем так хорош и привлекателен SVG.

Текст vs Картинка

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

По размеру получается меньше чем обычная растровая картинка. Хорошо поддается сжатию. Хорошо выглядит на ретина-экранах. В SVG можно вставлять растровую графику (PNG, GIF, JPG). Это для тяжелых случаев.

svg

Масштабирование

SVG масштабируемый, а это значит, что в отличие от обычной растровой картинки при увеличении не теряет в качестве. Также можно увеличивать отдельные куски векторного изображения и вообще прописывать им разные стили и всячески изменять. Давайте в нашем примере уменьшим колонки, дабы не пугать сильно соседей громкой музыкой :) Для этого мы элементам колонки добавим transform="translate(250, 120) scale(0.8)", где scale - масштаб элемента (если меньше 1, то уменьшает, если больше, то увеличивает), а translate - сдвиг по горизонтали и вертикали. Вообще по фен-шую сдвиг относительно центральной точки в зависимости от коэффициента масштабирования считается по следующей формуле transform="translate(-centerX*(factor-1), -centerY*(factor-1) ) scale(factor)", но я позволю себе немного побыть дизайнером и сделаю на глазок. http://jsfiddle.net/krontill/tkLhjd53/1/ Также очевидно что можно было не прописывать трижды код, а добавить класс и в css прописать стили для масштабирования, вот так. Как и к любым тегам на странице, к svg может добраться и javascript, но чем более простой технологией решается задача, тем лучше.

Еще бонусы

Повторное использование с помощью тега use, ссылающегося на нужный id. Допустим, я хочу вставить несколько векторных иконок разного цвета, и одно из них положить на бок - да без проблем. Всего лишь надо добавить пару строк:
<use xlink:href="#Layer_x0020_1" fill="yellowgreen" transform="translate(250, 120) scale(0.8)"/>
<use xlink:href="#Layer_x0020_1" fill="gold" transform="translate(250, 120) scale(0.666) rotate(90 1000 1000)"/>

svg

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

Анимация

Сразу хочу продемонстрировать широчайшие возможности - пример шикарной динамичной анимации. Исходных код можно глянуть на гитхабе. Впечатляюще, не правда ли? :)

Анимировать SVG можно с помощью css, javascript и помощью языка SMIL ( немного документации), однако у последнего варианта есть фатальный недостаток, а именно поддержка браузером internet-explorer, и я не говорю о каких-то древних версиях, вообще все не поддерживают, пруф прилагается - http://caniuse.com/#feat=svg-smil. Кстати, рекомендую этот сайт для проверки поддержки браузерами тех или иных возможностей.

Самый простой вариант что-либо анимировать это использовать CSS. Добавим чуть-чуть магии и сделаем эффект “дыхания” или пульсации - пример.

Есть множество классных javascript библиотек для анимации SVG, вот малая их часть для примера - Textures.js, D3.js (заточена для создания эффектной интерактивной инфографики), Snap.svg, Raphaël.

Встраиваем

Итак, мы разобрались почему SVG это круто, модно, молодёжно, теперь рассмотрим варианты встраивания его в страницу. Самый очевидный и крутой вариант вы уже видели в примерах выше - встраивание SVG прямо в HTML-документ или инклудим (если используется php-движок или CMS) <?php include("music.svg"); ?>.

Еще варианты:
<object type="image/svg+xml" data="music.svg" class="music">
  music
</object>

Если не надо обращаться к элементам SVG, используя часть возможностей описанных выше, то есть альтернативные варианты - добавление его как изображение
<img src="music.svg" alt="Музыкальный центр">
или можно добавить через class и css
<a href="/" class="music">music</a>
.music {
  display: block;
  text-indent: -9999px;
  width: 100px;
  height: 100px;
  background: url(music.svg);
  background-size: 100px 100px;
}

В этих трех вариантах SVG можно засунуть в base64, прописав вместо data/url/src код "data:image/svg+xml;base64,[data]" где [data] - это наш base64. Base64 encoder and decoder в помощь.

А также доступно встраивание векторной графики через теги <iframe> и <embed>, но про эти теги вообще лучше забыть.

Элементы SVG

Adobe Illustrator создает первой строчкой <?xml version="1.0" encoding="utf-8"?>, также добавляет DOCTYPE, всё это не нужно и это можно смело выпилить.

Элемент <svg> - это контейнер, внутри которого находятся все детали SVG. Тег <g> используется для группировки элементов. Элемент <title> - понятно, что заголовок. Содержимое внутри элемента <desc> позволит обеспечить подробное описание графики для пользователей скринридеров. Все что внутри тега <defs> не отображается, тут может быть CSS или элементы которые будут использоваться позже с помощью привязки к id. <use> используется для повторения элементов графики и ссылается на id с помощью xlink:href="#id". Элемент <symbol> представляет собой группу связных элементов, у которых своя система координат и которые не отображаются на странице также как и <defs>, до тех пор, пока к ним не обратиться через <use>. В SVG есть фигуры, такие как прямоугольник (<rect>), круг ( <circle>), контур ( <path>), текст (<text>), множество их - для подробного ознакомления рекомендую Карманное руководство по написанию SVG.

Фильтры

Это очень большая обширная тема, которой хватит еще на две подобные статьи поэтому рассмотрю вкратце. Фильтры помогают модифицировать элементы как векторной, так и растровой графики для создания эффектов, например размытие. Для его создания просто прописываем
<filter id="myFilter1">
   <feGaussianBlur stdDeviation="10"/>
</filter>

И указываем данный фильтр на том элементе, к которому будем применять. Можно фильтры прописывать и через CSS, однако internet explorer нас тут подводит с поддержкой, поэтому лучше прописывать непосредственно в SVG. Для примера поиграем со шрифтами цветами. Можно использовать несколько фильтров на каждом элементе SVG. Список фильтров. Для примеров использования рекомендую почитать вот эти замечательные статьи - раз, два.

Подведя итог, скажу следующее: друзья, используйте SVG! Он дает веб-разработчику новые возможности и множество плюсов при использовании.

svg filter