Анатомия SVG

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

  • SVG изображения — масштабируемые , и в эпоху все более разнообразных размеров мониторов являются огромным благом для разработки. С SVG у нас есть один графический элемент для управления, который масштабируется для всех устройств и, следовательно, может спасти нас от последующих HTTP-запросов. Даже более новые свойства CSS такие как  srcsetиpicture требуют нарезки изображения для разных видовых экранов, но SVG позволяет избежать всей этой дополнительной работы.
  • Вектор  (а не растр ) означает, что, поскольку они нарисованы с помощью математики, SVG, как правило, имеют более высокую производительность и меньшие размеры файлов.

SVG — это формат файла XML, и мы можем использовать его для краткого описания форм, линий и текста, импользуя при этом DOM; это означает, что мы можем иметь доступ к изображению через css или js, для манипуляций над изображением.

Рассмотрим код:

Глядя на структуру SVG, большая часть разметки может показаться вам знакомой. Синтаксис легко читается из-за сходства с HTML. В корневом <svg>  элементе мы видим объявление xи y — оба установлены в 0здесь для точек в координатной матрице, с которой мы начинаем отрисовку. Ширина и высота обозначены, и вы увидите, что они соответствуют двум последним значениям вviewBox

viewBox и preserveAspectRatio

viewBoxявляется очень мощным атрибутом, так как он позволяет холсту SVG быть действительно бесконечным, контролируя и улучшая видимое пространство. Он принимает 4 параметра в качестве значения: xywidth, и height. Это пространство не определено в пикселях, а скорее является более гибким пространством, которое можно настроить на множество различных масштабов. Думайте об этом, как будто вы рисуете на листе миллиметровки.

 

Мы можем определить координаты на основе этой системы, и сама система может быть автономной. Затем мы можем изменить размер этого листа бумаги и все, что в нем. Если бы мы указали половину ширины и высоты для SVG, но сохранили параметры viewBox, рисунок  станет меньше, но пропорционально, останется верен оригиналу.

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

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

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

Есть еще один аспект, о viewBoxвы должны знать, невидимый в этом примере. Большинство SVG, которые вы увидите в Интернете, даже не будут указывать его, потому что по умолчанию preserveAspectRatio="xMidYMid, такое значение удовлетворяет большинство потребностей svg. Данные значения позволяют svg равномерно масштабироваться.

Рисование фигур

В наш SVG, мы определили пять форм. rect относится к прямоугольнику или квадрату. Значения xи y, как и в самом SVG, — это то место, где начинается фигура: в данном случае ее левый верхний угол. Ширина и высота фигуры используют одинаковую систему координат:

<rect x="10" y="5" fill="white" stroke="black" width="90" height="90" />

Т.е. данный код означает что мы рисуем прямоугольник, с отступом 10px слева и 5 сверху, внутри белая заливка, черная обводка и размеры его будут 90 на 90 px. Не забываем все это поместить в svg тэг.

Круг:

<circle fill="white" stroke="black" cx="170" cy="50" r="45" />

cxэто точка, где центр круга лежит на xоси, cyявляется точкой, где центр круга лежит на yоси, и rявляется радиусом. Вы также можете использовать ellipseдля овальных форм, единственное отличие состоит в том, что есть два значения радиуса: rxи ry.

Например изменение строки cx=»0″, приведет к тому что центр круга, будет с начала холста, слева. И круг войдет в область просмотра только наполовину.

polygon формирует массив значений в разделенном пробелами списке, определяемый точками:

<polygon fill="white" stroke="black" points="279,5 294,35 328,40 303,62 309,94
  279,79 248,94 254,62 230,39 263,35"/>

Как не сложно догадаться — первое значение является точкой по оси x, затем после запятой точка по y, которые будут соединены линией.

В верхнем примере — по оси x ставим точку в координатах x=279 , y =5 294, и соединяем линией, и так далее.

линии довольно просты:

<line x1="0" y1="80" x2="100" y2="20" stroke="black" />

Линия принимает 2 точки — где x1=»0″ y1=»80″, первая точка, и x2=»100″ y2=»20″ вторая.

 

Адаптивный SVG, группировка и рисование путей

Теперь давайте рассмотрим код:


Первое, что следует отметить в этом SVG, это то, что мы установили ширину и высоту прямиком в тэге, но чаще всего данные параметры задаются через стили css.

SVG может масштабироваться в процентах или единицах просмотра (px, em, rem и т.д), и даже может зависеть от медиа-запросов.

Второе, что я хотел бы отметить, это <g>элемент. gобозначает группу , и это способ вкладывать и собирать несколько элементов вместе в SVG DOM. Вы также можете заметить, что вместо того, чтобы определять заливку и обводку для самих элементов, мы сделали это для группы, и вы можете увидеть, как она применяется к потомкам.

Последнее, что нужно отметить, — это синтаксис пути. Путь начинается с d, для данных , и всегда начинается с команды M или m в качестве первого значения.

 

SVG экспорт, рекомендации и оптимизации

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

 

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 
   6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
   xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="218.8px" height="87.1px" viewBox="0 0 218.8 87.1" 
  enable-background=
    "new 0 0 218.8 87.1" xml:space="preserve">
  <g>
    <path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" 
      d="M133.1,58.2c0,0,12.7-69.2,24.4-47.5c0,0,4.1,8.6,9.5,0.9
              c0,0,5-10,10.4,0.9c0,0,12.2,32.6,13.6,43c0,0,39.8,5.4,15.8,
      15.4c-13.2,5.5-53.8,13.1-77.4,5.9C129.5,76.8,77.5,61.4,133.1
      ,58.2z"/>
    <path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" 
    d="M6.7,61.4c0,0-3.3-55.2,20.8-54.8s-7.2,18.1,4.1,29.9
            s8.6-31.2,32.1-15.8S86.7,41,77.2,61.8C70.4,76.8,76.8,79,37.9,
    79c-0.4,0-0.9,0.1-1.3,0.1C9,81,40.1,58.7,40.1,58.7" />
  </g>
</svg>

И этот же пример, но без лишней информации:

<svg viewBox="0 0 218.8 87.1">
 <g fill="none" stroke="#000">
   <path d="M7.3 75L25.9 6.8s58.4-6.4 33.5 13-41.1 32.8-11.2 30.8h15.9v5.5s42.6 
     18.8 0 20.6" />
   <path d="M133.1 58.2s12.7-69.2 24.4-47.5c0 0 4.1 8.6 9.5.9 0 0 5-10 10.4.9 0 
     0 12.2 32.6 13.6 43 0 0 39.8 5.4 15.8 15.4-13.2 5.5-53.8 13.1-77
       .4 5.9.1 0-51.9-15.4 3.7-18.6z" />
 </g>
</svg>

Как видно, без оптимизации svg файл может содержать множество ненужной для веба информации, которая увеличивает размер svg файла.

При использовании adobe Illustrator обязательно используйте  Файл → Экспорт → SVG, чтобы сохранить SVG, вместо Сохранить как. (Это доступно только в Illustrator CC 2015.2 или более поздней версии.) Откроется диалоговое окно SVG Options :

 

Экспорт даст вам намного меньший и более точный вывод, чем Сохранить как, который не оптимизирован для SVG. Лично я всегда сохраняю копию или несколько копий исходного кода в формате .ai , потому что иногда сильно модифицированные SVG плохо переносятся обратно в Illustrator.

Часть информации  svg файла полезна, а часть можно удалить. Комментарий о генераторе кода в Illustrator, безусловно, можно удалить. Нам также не нужна информация о версии или слое, так как сеть не будет использовать ее, и мы пытаемся передать как можно меньше байтов.

Если xи yопределены как 0(обычно так), мы также можем их исключить. Единственный случай, когда нужно их оставлять, это если мы работаем с дочерним SVG, вложенным в другой SVG.

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

XMLNS = "http://www.w3.org/2000/svg"

Если вы не уверены, использовать его или нет, лучше эту строку оставить.

Инструменты оптимизации

Хорошо когда мы знаем что можно выпилить с svg, а что пригодиться. Но чаще всего для оптимизации используются онлайн сервисы:

SVGOMG

Джейк Арчибальд создал действительно хороший веб-интерфейс для SVGO на базе терминала (см. ниже). Этот инструмент является наиболее надежным и простым в работе и включает в себя множество опций оптимизации. SVGOMG показывает относительный визуальный вывод и сравнение байтов после оптимизации.

 

SVG Editor

SVG Editor Питера Коллингриджа очень похож на SVGOMG, с немного меньшим количеством опций. Приятной особенностью является то, что вы можете редактировать SVG прямо на другой панели в случае, если вам нужно немного отрегулировать вывод.