Веб в кривых.
Второе рождение SVG

История

Появление

• Adobe, IBM, Netscape, Sun → PGML ?
• Microsoft, Macromedia, HP → VML ?
• …
• W3C → SVG !

SVG — Scalable Vector Graphics
Масштабируемая Векторная Графика.

Развитие

• SVG 0.0 → 1998 г.
• SVG 1.0 → 2001 г.
• SVG 1.1 → 2003 г.
• SVG 1.2 → ∞
• SVG 2.0 → когда-нибудь…

Застой с SVG 1.2 преодолён, ожидаем версию 2.0.

Профили

• SVG Tiny → для мобильников
• SVG Basic → для смартфонов

Профили появились в SVG 1.1.

Особенности

• Векторный, а не растровый → масштабируется
• Текстовый, а не бинарный → доступен *
• Хитрый, а не как GIF → стили, скрипты, анимация…

31 августа Google заявил о начале индексации SVG.

Примитивы

Шаблон

			<?xml version="1.0" encoding="utf-8"?>
			<svg version="1.1"
			    xmlns="http://www.w3.org/2000/svg"
			    xmlns:xlink="http://www.w3.org/1999/xlink">
			    …
			</svg>
		

Прямоугольник

			<rect
			    x="100" y="100"
			    width="550" height="550"
			    fill="#FAFAA2" stroke="#000"
			/>
		

Исходный файл

Прямоугольник

			<rect
			    x="100" y="100" rx="120" ry="120"
			    width="550" height="550"
			    fill="#FAFAA2" stroke="#000"
			/>
		

Исходный файл

Круг

			<circle
			    cx="100" cy="100" r="275"
			    fill="#FAFAA2" stroke="#000"
			/>
		

Исходный файл

Линия

			<line
			    x1="230" y1="570"
			    x2="640" y2="490"
			    stroke="#000"
			/>
		

Исходный файл

Ломаная

			<polyline
			    points="200,400 300,300 400,400"
			    fill="none" stroke="#000"
			/>
		

Исходный файл

Полигон

			<polygon
			    points="197,197 430,100 660,198 758,430
			            662,663 429,760 197,663 100,432"
			    fill="#FAFAA2" stroke="#000"
			/>
		

Исходный файл

Кривые

			<path fill="#E11F21" d="M51.423,68.398c0,
			    0,14.807,17.41,14.807,33.001,c0,14.44,
			    51.423,82.842,51.423,68.398 M30,69.6,
			    2.519-32.819,14.829-32.819c12.307c,
			    c21.754,0,36.249-18.806,36.49-39,
			    452c0-23.206-14.923-38.669-36…"
			/>
		

Градиенты

			<circle cx="375" cy="375" r="275"
			    fill="url(>#linear)"
			    stroke="#000"
			/>
		

Исходные файлы: линейный и радиальный.

Градиенты

			<linearGradient id="linear"
			    x1="20%" y1="20%" x2="80%" y2="80%">
			    <stop stop-color="#FAFAA2" offset="10%"/>
			    <stop stop-color="#000" offset="50%"/>
			    <stop stop-color="#C00" offset="90%"/>
			</linearGradient>
		

Градиенты

			<radialGradient id="radial"
			    cx="20%" cy="20%">
			    <stop stop-color="#000" offset="30%"/>
			    <stop stop-color="#FAFAA2" offset="70%"/>
			    <stop stop-color="#C00" offset="100%"/>
			</radialGradient>
		

Анимация

Анимация

SMIL → Synchronized Multimedia Integration Language *

• SMIL 1.0 → 1998 г.
• SMIL 2.1 → 2005 г.
• SMIL 3.0 → 2008 г.

Произносится как «смайл».

Спиннер

			<rect width="50" height="150"
			    rx="25" ry="25" id="rect"/>
		

			<use x="225" y="0" xlink:href="#rect"/>
			<use x="225" y="350" xlink:href="#rect"/>
		

От винта!

Спиннер

			<animateTransform attributeName="transform"
			    type="rotate" dur="0.6s" calcMode="discrete"
			    values=" 45,250,250;  90,250,250; 135,250,250;
			            180,250,250; 225,250,250; 270,250,250;
			            315,250,250; 360,250,250"
			    repeatCount="indefinite"
			/>
		

Гипножаба!

Жабьи глазки

			<circle r="22" class="ball"/>
			<circle r="16" class="glow"/>
			<circle r="12" class="hole"/>
		

Структура жабьего глаза: яблоко, радужка, зрачок.

Жабьи глазки

			.ball { fill: #a89503; stroke: #000 }
			.glow { fill: #FF0; filter: url(#blur) }
			.hole { fill: #000; stroke: #C00 }
		

			<filter id="blur">
			    <feGaussianBlur stdDeviation="2"/>
			</filter>
		

Жабьи глазки

			<g transform="scale( 1, 0.2 )">
			    <circle class="glow"/>
			    <circle class="hole"/>
			    <animateTransform id="left1 … "/>
			    <animateTransform id="left2 … "/>
			</g>
		

Жабьи глазки

			<animateTransform
			    id="left1" attributeName="transform"
			    begin="0;left2.end" type="scale"
			    to="1, 1" dur="0.5s" fill="freeze"
			/>
		

Первый шаг анимации левого глаза.

Жабьи глазки

			<animateTransform
			    id="left2" attributeName="transform"
			    begin="left1.end" type="scale"
			    to="1, 0.2" dur="0.5s"
			/>
		

Второй шаг анимации левого глаза.

Фильтры

Фильтры

			<filter id="softfocus">
			    <feGaussianBlur/>
			    <feComposite/>
			    <feBlend/>
			    <feBlend/>
			    <feComposite/>
			</filter>
		

Фильтры

			#video {
			    filter: url(#softfocus)
			    }
		

SVG-фильтры + <video>

Заяц Несудьбы™

			<img src="noway.svg">
			<audio loop src="noway.ogg"></audio>
		

Диавольский заяц

Заяц Несудьбы™

			<path
			   fill="#000" fill-opacity="0.4"
			   d="M553.199,164.241c6.957,2.722,13.914,5…
			   onclick="this.style.filter='url(#blur)'"
			/>
		

Заяц Несудьбы™

			<filter id="blur">
			    <feGaussianBlur
			        in="SourceGraphic" stdDeviation="15"
			    />
			</filter>
		

Исчезающий заяц

Соседи

Скрипты

• Поддержка SMIL оставляет желать лучшего
• SVG — имеет ту же DOM
• Старый добрый JavaScript спешит на помощь…

Inbox Attack

Медиа-выражения

• Новая технология в ответ на требования времени
• Широко поддерживается, легко эмулируется
• Блестяще интегрируется с SVG…

Супер-логотип

Супер-логотип

			<img src="logo.svg" alt="Opera Software">
			<input type="range" min="100" max="1000">
		

			<g id="icon">
			<g id="long">
			<g id="short">
		

Супер-логотип

			@media screen and (max-width: 800px) {
			    #long  { display: none }
			    #short { display: inline }
			    }
			@media screen and (max-width: 500px) {
			    #short { display: none }
			    }
		

Супер-иконка

• Растровые иконки пока неизбежны
• Скучные дубовые форматы
• Элегатное решение…

Супер-иконка

Супер-иконка

			<img src="logo.svg" width="512" height="512">
			<img src="logo.svg" width="256" height="256">
			<img src="logo.svg" width="128" height="128">
			<img src="logo.svg" width="32"  height="32">
			<img src="logo.svg" width="16"  height="16">
		

Одна и та же картинка разных размеров.

Супер-иконка

			<image id="icon-16"  xlink:href="data…
			<image id="icon-32"  xlink:href="data…
			<image id="icon-128" xlink:href="data…
			<image id="icon-256" xlink:href="data…
			<image id="icon-512" xlink:href="data…
		

Растровые иконки в base64.

Супер-иконка

			#icon-16, #icon-32, #icon-128,
			#icon-256, #icon-512 {
			    display: none;
			    }
			@media screen and (width: 16px) {
			    #icon-16 { display: inline }
			    }
		

Супер-иконка

Графика в base64 увеличивается в весе, однако…

• Вес пяти отдельных растровых иконок → 221 КБ
• Вес файла icon.svgz → 213 КБ

PROFIT!

Браузеры

Браузеры

• Firefox, Webkit → почти уверенная поддержка SVG 1.1
• IE9 → полный игнор SMIL и фильтров
• Opera → SVG Tiny 1.2, лидер в поддержке фильтров

Набор тестов на поддержку SVG от W3C

Премьера!

Веб в кривых. Второе рождение SVG

Вадим Макеев, Opera Software

• pepelsbey.net
• twitter.com/pepelsbey
• pepelsbey@opera.com

Презентация: pepelsbey.net/pres/web-in-curves