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

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

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

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

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

• Векторный, а не растровый → масштабируется
• Текстовый, а не бинарный → доступен *
• Хитрый, а не как 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…

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

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

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

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

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

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

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

• Растровый, а не векторный → не масштабируется
• Работает через 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 );
				    }
			

Рисуем…

				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 — масштабируемый вектор, с содержимым
Canvas — плоская, фиксированная растровая графика

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

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

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

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

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