Переходим на SVG

Переходим на SVG

Дмитрий Рычков
24/05/2016

bit.ly/1quFNmW

Image file formats usage

Источник

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

3+   9+

Зачем и почему SVG?

• Не зависит от разрешения и масштаба
• Текстовый формат и возможность сжатия
• Интерактивность через CSS / JS
• Анимации, фильтры, эффекты
• W3C стандарт

iPhone 5

Resolution, px     640 × 1136
Viewport, dp       320 × 568

iPhone 5

Retina detect

			@media	(-webkit-min-device-pixel-ratio: 2),
					(   min--moz-device-pixel-ratio: 2),
					(     -o-min-device-pixel-ratio: 2/1),
					(        min-device-pixel-ratio: 2),
					(                min-resolution: 192dpi),
					(                min-resolution: 2dppx) {
					.element { // styles... }
			}
		

Nexus 5

Resolution, px     1080 × 1920 (Full HD)
Viewport, dp       360 × 640

Nexus 5

Galaxy S7

Resolution, px   1440 × 2560 (Quad HD)
Viewport, dp     360 × 640

Galaxy S7

Raster vs Vector

Дизайнер + Верстальщик = SVG

Инструменты

• Illustrator
   Дизайн всего, что должно быть в векторе
• Sketch
   Дизайн страниц
• Avocode
   Передача макетов в вёрстку

Бесплатные печеньки

• Official Google icons
• Material icons
• Free vector icons
• ...
• SEARCH IN GOOGLE

Сделай сам

					.arrow {
						display: inline-block;
						border-width: 100px;
						border-style: solid;
						border-color: transparent;
						border-left-color: #8bc53f;
					}
				

Сделай сам (тыжпрограммист)

					<svg width="100" height="200"
					 viewBox="0 0 100 200">
						
						<path d="M0,0 L100,100 L0,200"
						fill="none"
						stroke="#8bc53f" stroke-width="5"/>
					 
					</svg>
				

SVG <path>

			<path d="
				M0,0		// Move to x=0 y=0
				L100,100	// Line to x=100 y=100
				L0,200		// Line to x=0 y=200
			"/>
		

Подготовка SVG к экспорту

• Удаление ненужных контуров, точек и т.п.
• Упрощение до примитивов
• Заливка или обводка?
• Выравнивание по пиксельной сетке
• Установка границ видимой области

Экспорт SVG

Проверяем себя

Хороший SVG

good.svg   ~5.6 kb

Плохой SVG

bad.svg   ~220 kb

Способы подключения

Способы подключения

• <img>
• background-image
• <object>
• inline
• sprite
• <iframe>
• <embed>
• iconic font

Интерактивность

<object> или <img>

Используйте для обычных встроенных изображений

inline <svg>

Только если нужен полный контроль

Base64 data-uri

Очень маленькие иконки можно кодировать в base64 и вставлять в CSS-файл

Используйте CSS transform

Для масштабирования, поворота, наклона и т.п.

Доступность SVG

Добавляйте <title> и <desc> для встроенных изображений

Для <img> прописывайте alt и title

Спрайты

Генератор спрайтов SVG Sprite

Доки по конфигурации

Gulp & Grunt

Виды SVG спрайтов

• Классический CSS (background) спрайт или через <view>
• Спрайт через <symbol> или <defs>

			var config = { mode: {
				css: {
					dest: '.',
					sprite: './sprite.svg',
					render: {
						less: {
							dest: '.'
						}
					}
				}
			}};
		

			gulp.src('./*.svg')
				.pipe( svgSprite(config) )
				.pipe( gulp.dest('.') );
		

На выходе:
sprite.less - данные спрайта
sprite.svg - cпрайт

Классический CSS (background) спрайт

			<i class="icon icon-kitty"></span>
		

			.icon { background: url(sprite.svg) no-repeat;
			.icon-kitty {
				width: 50px;
				height: 50px;
				background-size: 50px 50px;
				background-position: 0 0;
			}
		

Спрайт с помощью SVG <view>

			<img src="./sprite.svg#svgView(viewBox(0, 0, 50, 50))">
		

			<img src="./sprite.svg#icon-kitty">
		

Что внутри SVG <view> спрайта

Картинка позиционируется под область просмотра

			<view id="icon-kitty" viewBox="0 0 50 50" />
			<svg width="50" height="50" x="0" y="0">
				<path ... />
			</svg>
		

Кроссбраузерность SVG <view>

Очень плохая

Спрайт с помощью <use>

Можно разместить SVG прямо в HTML, а можно указать ссылку на внешний файл

			<svg>
				<use xlink:href="sprite.symbol.svg#icon-kitty"></use>
			</svg>
		

Что внутри SVG <symbol> спрайта

Код каждой иконки внутри одного элемента <symbol>

			<symbol viewBox="0 0 50 50" id="icon-kitty">
				<path ... />
			</symbol>
		

Проблема CORS

Невозможно загрузить спрайт с другого домена через <use>

			<svg>
				<use xlink:href="//same-domain.com/sprite.svg"/>
			</svg>
		

Кроссбраузерность SVG <use>

Очень хорошая, но нужен полифилл для внешних SVG

@media внутри SVG

Медиа-выражения работают прямо внутри svg-файла, и зависят не от вьюпорта документа, а от текущего размера SVG

Наилучшая кроссбраузерность достигается подключением через <object> или inline

Оптимизация

SVGO

SVGO

• удаление переносов строк и лишних пробелов
• удаление doctype
• удаление XML-инструкций
• удаление комментариев
• удаление <metadata>
• удаление пустых атрибутов
• удаление скрытых элементов
• ...... и еще ~30 оптимизаций

Итог

• Старайтесь использовать SVG там, где это возможно
• Оптимизируйте исходный код и способ подключения SVG
• Используйте GZIP-компрессию и браузерный кеш
• Делайте фолбеки
• Заботьтесь о доступности SVG
• Автоматизируйте рутину

Полезные ссылки

• Практическое руководство по SVG
• Фолбеки для старых браузеров
• Полифилл для внешних SVG
• Оптимизация графики
• SVG спрайты
• Чётко и резко про пиксели
• Разрешения и размеры девайсов

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

Слайды:     corsairdnb.github.io/svg-slides
VK:             vk.com/corsairdnb

Wrike:             wrike.com
Habrahabr:     habrahabr.ru/company/wrike
Blog:               wrike.com/ru/blog
Youtube:         Wrike Tech Club

Shower:      shwr.me

Вопросы?