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

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

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

История

Появление

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

Развитие

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

Профили

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

Особенности

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 *

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

Спиннер

			<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>
		

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

Соседи

Скрипты

Inbox Attack

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

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

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

			<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 увеличивается в весе, однако…

PROFIT!

Браузеры

Браузеры

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

Премьера!

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

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

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

Powered by Shower