Из иллюстратора в SVG

SVG — Scalable Vector Graphics

• 1998 — SVG 0.0
• 2001 — SVG 1.0
• 2003 — SVG 1.1
• 
• 2010 — iPhone 4, Retina
• 2014 — iPhone 6, Retina 3x

Поддержка браузерами

	Всегда была
	v2 — частично. Потом стало хорошо
	IE 9+. С багами до сих пор
	В 10 было. Про 9 — неизвестно
	Как все вебкиты

На мобильных

	v2 — нет. v3 — частично. v4 — ок
	Всегда была
	Всегда была
	Сейчас есть

Преимущества SVG

• Разный масштаб — один файл
• Это просто XML
• Модифицируемость из CSS и JS

Нужно ли делать icon@3x.png?

• Для дескотопа — нет
• icon@1x.png — 1861 байт
• icon.svg — 1093 байта

Когда SVG не подходит?

• Маленькие иконки
• Сложные градиенты и «меши»

Почему не иконочный шрифт?

1. Некоторые устройства не поддерживают области частного использования Unicode
2. Чёрные квадратики и крестики в Opera Mini
3. Разный рендеринг в разных браузерах
4. Только монохромные иконки
5. Не анимируются. Никак
6. И вообще, это хак

Ещё больше аргументов против иконочного шрифта

• Опыт lonelyplanet.com. Перевод на frontender.info
• Проблемы для людей с дислексией. Видео

Почему Illustrator?

Photoshop CS6

• File > Export > Paths to Illustrator…

Как сохранить?

• File > Save as…
• Cmd + C, Cmd + N, Cmd + S

Сколько вешать в граммах?

Размер, пикс	Минимальная точность координат
32	3
64	2
128	2
256	1

• Understanding and Manually Improving SVG Optimization
• svgo

Оптимизация процесса

• Пиксели имеют значение

Оптимизация процесса

• Пиксели имеют значение
• Имена для слоёв и объектов

Был слой — стал id

<svg ...>
    <g id="tree__item_id_31">
        <circle id="tree__pointer" />
    </g>
    <g id="tree__item_id_32">...</g>
</svg>

А зачем?

Оптимизация процесса

• Пиксели имеют значение
• Имена для слоёв и объектов
• Стили для элементов

Был style — стал <style> (и class)

<svg ...>
    <style type="text/css">
            .chip-icon_x002D_highlight{fill:#FFFFFF;}
    </style>
    <path class="background_x002D_color" d="..."/>
</svg>
    

Оптимизация процесса

• Пиксели имеют значение
• Имена для слоёв и объектов
• Стили для элементов
• Библиотека иконок

Оптимизация процесса

• Пиксели имеют значение
• Имена для слоёв и объектов
• Стили для элементов
• Библиотека иконок
• SVG Now
• iconic/illustrator-svg-exporter

Внезапный вьюпорт

1. Сохранили svg
2. Решили что-то поправить
3. Открыли файл в Illustrator

Лечение

• Object > Artboards > Fit to Artwork Bounds
• Shift + O, Fit to…

Сломаные символы

Лечение

• transform="matrix(0.42 0 0 -0.42 16.46 14.03)"

Жить стало лучше…

• PS Creative Cloud — File > Extract Assets…
• PS CC 2015 — Layer > Export As…

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<circle style="fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;" cx="16" cy="16" r="13.2"/>
</svg>
        

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     preserveAspectRatio="xMidYMid"
     width="20" height="20" viewBox="0 0 20 20">
    <defs>
        <style>...</style>
    </defs>
    <circle cx="10" cy="10" r="8" class="cls-1"/>
</svg>

SVG в моём коде

<img src="pic.svg" />
style="background: url(pic.svg)"
<div><svg>...</svg></div>
<div><svg><use xlink:href="#pic"></use></svg></div>
        

And one more thing

• SVGO
• PostCSS-плагины