Динамическая графика

SVG

Появление SVG

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

SVG (масштабируемая векторная графика) — XML-подобный язык для визуального описания векторной графики.

Поддержка SVG

Chrome, Firefox, Safari — сносная поддержка с исключениями
IE9 — нативно, IE7–8 при помощи Raphaël и Chrome Frame ;)
Opera — исторический лидер во внедрении и поддержке
iOS, Android, Opera Mobile и Opera Mini

Opera Mini — показывает статическую картинку.

Особенности SVG

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

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

Примитивы

Шаблон

			<svg 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"
			/>

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

Круг

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

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

Линия

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

А также: polyline, polygon, path, градиенты и многое другое…

Анимация

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

Гипножаба

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

Все любят гипножабу

Соседи

Скрипты

SMIL, вероятно, будет заменён CSS-трансформациями
SVG имеет ту же DOM
Старый добрый JavaScript спешит на помощь…

Inbox Attack

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

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

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

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

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

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

Canvas

Появление Canvas

Придумано в Apple, как компонент Mac OS для Dashboard
Предложено W3C в качестве стандарта
Широко поддерживается современными браузерами

Canvas (англ. canvas — «холст») — набор API для создания и управления растровой графикой при помощи JavaScript.

Поддержка Canvas

Chrome, Firefox, Opera, Safari — уверенная поддержка
IE9 — нативно, IE7–8 при помощи трюков *
iOS, Android, Opera Mobile и Opera Mini

Имитация: через VML ExplorerCanvas, через Flash fxCanvas.

Особенности Canvas

Растровый, а не векторный → не масштабируется
Работает через JavaScript → ограниченная доступность
Плоская картинка → отсутствие содержимого *

Не забывайте про фолбек: <canvas> Too Old </canvas>.

Примитивы

Шаблон

			<canvas id="canvas">
			    width="600" height="600"></canvas>

			var canvas =
			    document.querySelector('#canvas').getContext('2d');

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

Примитивы

			canvas.beginPath();
			    …
			canvas.closePath();
			canvas.fill();
			canvas.stroke();

Обратите внимание на порядок применения fill() и stroke().

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

			canvas.rect( 25, 25, 550, 550 );
			canvas.fillStyle = '#FAFAA2';
			canvas.strokeStyle = '#000';
			canvas.lineWidth = 50;

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

Круг

			canvas.arc( 300, 300, 275, 0, Math.PI*2, true );
			canvas.fillStyle = '#FAFAA2';
			canvas.strokeStyle = '#000';
			canvas.lineWidth = 50;

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

Анимация

			function draw() {
			    canvas.clearRect( 0, 0, 600, 600 );
			    canvas.arc( x, y, 100, 0, Math.PI*2, true );
			    x += 2; y += 2;
			}

Понеслась…

Частицы

Сияние

Бублик

Изображения

			var pepelsbey = new Image();
			    pepelsbey.src = 'pepelsbey.png';
			    pepelsbey.onload = function() {
			        canvas.drawImage( pepelsbey, 44, 44 );
			    }

Рисуем…

Ambilight

Текст

			canvas.font = 'bold 7em "PT Sans", sans-serif';
			canvas.fillStyle = 'rgba( 0, 0, 0, 0.5 )';
			canvas.textAlign = 'center';
			canvas.textBaseline = 'top';
			canvas.fillText( 'Ололо', 290, 330 );

Пишем…

SVG vs. Canvas

SVG — масштабируемый вектор, с содержимым
Canvas — плоская, фиксированная растровая графика

Canvas, accessibility and SVG — Брюс Лоусон
SVG or Canvas? Сhoosing Between the Two — Dev.Opera

Но вообще — это длинная история…

Динамическая графика

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

Презентация: pepelsbey.net/pres/dynamic-graphics