Веб в кривых.
Второе рождение 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/pres/web-in-curves