Возможности SVG

Основные свойства SVG

Человекопонятный код

SVG можно создать самому в любимом редакторе

				<svg>
				    <line ... />
				</svg>
			

SVG масштабируемы

SVG доступны

				<svg aria-labelledby="imgTitle imgDesc" role="img" >
				    <title id="imgTitle" >Кружка чая</title>
				    <desc id="imgDesc" >
				        Изображена кружка горячего чая
				    </desc>
				    ...
				</svg>
			

SVG доступны

Прочтение страницы Voice Over

SVG доступны

CSS/JS в SVG

Подключение стилей

			<svg...>
				<style>
					@import url(../common/index.css);
					@import url(page.css);
				</style>
				...
			</svg>
		

SVG адаптивны

SVG адаптивны

			.hidden-sm, .hidden-md { transition: all 1s }
			@media (max-width: 380px) {
				.hidden-sm { opacity: 1 }
				.hidden-md { opacity: 0 }
			}
		

SVG адаптивны

SVG широко поддерживаемы

Некоторые альтернативы SVG

SVG vs Icon Fonts

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

			<!-- Добавление иконки на страницу -->
			<i class="fa fa-home" aria-hidden="true"></i>
		

SVG vs Icon Fonts

• Частые проблемы с поддержкой и распознаванием шрифта;
• Разное экранное сглаживание шрифта;
• Задействие псевдоэлементов ::before и ::after;
• Стилизация - это только цвет, тень, размер;
• Сложность в использовании нескольких цветов для иконки;
• Проблемы при неудачной загрузке, а так же во время загрузки css и шрифта.

SVG vs Icon Fonts

SVG vs JPG/PNG

• Изображения не гибкие - нельзя применить стилизацию;
• Для современных экраном следует вырезать @2x, @3x и тд картинки;
• Выбор между хорошим отображением на экране и небольшим весом файла.

SVG vs JPG/PNG

SVG vs JPG/PNG

SVG vs JPG/PNG

Mayyyybe SVG

Нужно сравнивать gzip размеры файла SVG и растра

Not SVG

Как использовать SVG уже сейчас?

Существуют несколько способ добавить svg на сайт.

Как использовать SVG уже сейчас?

Обычная картинка

			<div>
				<img src="apple.svg" alt="Изображение яблока" />
			</div>
		

Как использовать SVG уже сейчас?

Inline svg

			<div>
				<svg ... >
					<line .... />
				</svg>
			</div>
		

Как использовать SVG уже сейчас?

Embed, object, iframe

			<div>
				<iframe src="apple.svg" ... > </iframe>
			</div>
		

Как использовать SVG уже сейчас?

SVG иконки (спрайты)

			<svg>
				<defs>
					<symbol id="pinapple"><line .../></symbol>
					<symbol id="grape"><line .../></symbol>
					<symbol id="orange"><line .../></symbol>
				</defs>
			</svg>
		

Как использовать SVG уже сейчас?

SVG иконки (спрайты)

			<div>
				<svg>
					<use xlink:href="fruits.svg#pinapple" />
				</svg>
			</div>
		

Как использовать SVG уже сейчас?

SVG иконки (спрайты)

Как использовать SVG уже сейчас?

SVG иконки (спрайты)

Как использовать SVG уже сейчас?

SVG как свойство background-image

Также data:image/svg+xml, data-url

			.element {
				background: url(apple.svg);
			}
		

Оптимизация SVG

Выигрыш в размере может быть до 90%

Оптимизация SVG

			htaccess
				addType image/svg+html .svg .svhg
			<ifmodule mod_deflate.c>
				AddOutputFilterByType DEFLATE text/html image/svg+xml
			</ifmodule>
		

Системы координат SVG

The SVG Canvas

The viewport

The viewport

			<!-- viewport 100px x 100px -->
			<svg width="100" height="100">...</svg>
		

The viewBox

			<svg viewBox="min-x min-y width height">
				...
			</svg>
		

min-x, min-y — задают верхний левый угол
width, height — задают ширину и высоту области

The viewBox

В данном примере viewBox равен viewport, но они могут не совпадать

			<svg width="100" height="100" viewBox="0 0 100 100">
				...
			</svg>
		

The viewBox

Когда viewBox и viewport не совпадают, SVG масштабируется с учетом коэффициента, показывающего разницу этих атрибутов — unit.

The viewBox

The viewBox

The viewBox

The preserveAspectRatio

The preserveAspectRatio

The preserveAspectRatio

			<!-- xMaxYMax - выравнивание правого нижнего угла -->
			<!-- meet - сохранение пропорций насколько возможно -->
			<svg preserveAspectRatio="xMaxYMax meet">...</svg>
		

Системы координат SVG

Фигуры SVG

Фигуры SVG — lines

Фигуры SVG — dashing

Фигуры SVG — corners

SVG градиенты

SVG градиенты

			<linearGradient id="linear-gradient">
				<stop offset="0%" stop-color="gold"/>
				<stop offset="100%" stop-color="yellowgreen"/>
			</linearGradient>
			 
			<rect fill="url(#linear-gradient)" .../>
		

SVG градиенты

			<radialGradient id="radial-gradient" fx="30%" fy="20%">
				<stop offset="0%" stop-color="gold"/>
				<stop offset="51%" stop-color="crimson"/>
				<stop offset="100%" stop-color="yellowgreen"/>
			</radialGradient>
			 
			<rect fill="url(#radial-gradient)" .../>
		

SVG Clip-path

SVG Clip-path

			<svg>
				<clipPath id="clip-path"><path d="..." /></clipPath>
			</svg>
			 
			<img class="clip-svg" src="..." ... />
			.clip-svg { clip-path: url(#clip-path) }
		

SVG маски

See the Pen Flashlight by yoksel (@yoksel) on CodePen.

SVG фильтры

See the Pen SVG Glitch by Dirk Weber (@DirkWeber) on CodePen.

SVG в рассылках

SVG в рассылках

Почтовые клиенты и движки рендеринга

SVG в рассылках

Браузеры: AOL Web, Outlook 2013, Outlook.com, Yahoo!, Mail (OSX), Mail (iOS), Gmail, Gmail (iOS), Gmail (Android)

			<div class="no-webkit">
				<img src="path/to/fallback/image">
			</div>
			<!--[if !mso 9]><-->
			<div class="is-webkit" style="display: none; max-height: 0">
				<img src="path/to/logo.svg">
			</div>
			<!--<![endif]-->
		

			@media all and (-webkit-min-device-pixel-ratio:1) {
				.is-webkit {
					display: block !important;
					max-height: none !important;
				}
				.no-webkit {
					display: none !important;
				}
			}
		

SVG в рассылках

CSS/JS in SVG. Немного практики

currentColor

			<ul class="menu">
				<li class="menu-item">
					<svg class="menu-item-icon">...</svg>
					<label class="menu-item-label">Title</label>
				</li>
				...
			</ul>
		

currentColor

SVG в разметке html

			<svg class="menu-item-icon">
				<use xlink:href="fruits.svg#apple" />
			</svg>
		

currentColor

SVG разметка внутри fruits.svg

			<svg xmlns="http://www.w3.org/2000/svg">
				<symbol id="apple" viewBox="0 0 100 100"/>
					<path d="....." />
				</symbol>
			</svg>
		

currentColor

			.menu-item-icon {
				fill: currentColor;
				stroke: currentColor;
				transition: all 0.3s;
			}
			
			.menu-item { color: yellowgreen }
			.menu-item:hover { color: crimson }
		

currentColor

CSS variables

Использование в CSS

			element {
				--main-bg-color: brown;
				background-color: var(--main-bg-color);
			}
		

CSS variables

Использование в JS

			element.style.getPropertyValue("--foo");
			getComputedStyle(element).getPropertyValue("--foo");
			element.style.setProperty("--foo", "bar");
		

CSS variables

Использование в JS

			var root = document.documentElement;
			document.addEventListener("mousemove", evt => {
				let x = evt.clientX / innerWidth;
				root.style.setProperty("--mouse-x", x);
			});
		

CSS variables

Использование в SVG

			<svg ...>
				...
				<circle class="iris" cx="45" ... />
			</svg>
		

CSS variables

Использование в SVG

			.iris {
				cx: calc(25px + 55px * var(--mouse-x));
			}
		

CSS variables

Лоадеры

See the Pen SVG Sprite Animation by Mark Nelson (@marknelson) on CodePen.

See the Pen SVG Path Animation by Poorva Janbandhu (@poorvanj) on CodePen.

See the Pen SVG CSS3 Menu / Burger Button by Kyle Henwood (@kyleHenwood) on CodePen.

See the Pen SVG Animated Drum Kit (Play Me!) 🥁 by Josh (@iamjoshellis) on CodePen.

See the Pen X-ray me (SVG Experiment) by Noel Delgado (@noeldelgado) on CodePen.

See the Pen When you're an introvert... by Sarah Drasner (@sdras) on CodePen.

Что еще о SVG?

• Готовые библиотеки для работы с svg:
  snapsvg, velocity js, svg js, d3 js
• Интерактивные графики: css-tricks
• Игры
• ...

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

• Коллекции SVG на все случаи
• Accessible SVG
• Оптимизатор SVG
• SVG на css-tricks
• currentColor
• Lea Verou: CSS Variables
• Seren Davies: Death to icon fonts
• Chris Coyier: The wonderful world of svg
• Генератор svg шрифтов
• Css tricks: mega list svg
• Understanding SVG Coordinate Systems and Transformations
• Гид по SVG в рассылках