2. Uma introdução abrangente a SVG 1.1
Como criar e usar com HTML5 e CSS
Breve Tutorial
1. Elementos gráficos: figuras, caminhos e texto
2. Grupos e elementos estruturais
3. Sistema de coordenadas e transformadas 2D
4. Cores, filtros, máscaras, gradientes
5. SVG DOM + CSS + JavaScript
6. Animações declarativas com SMIL
Alternativas e bibliotecas
SVG2
Programa
3. Quem sou eu? Who am I? Кто я?
Helder da Rocha
argonavis.com.br
Tecnologia * Ciência * Arte
HTML & tecnologias Web desde 1995
Autor de cursos e livros sobre
Java, XML e tecnologias Web
helderdarocha.com.br
5. O que é SVG
Scalable Vector Graphics
curvas, polígonos, texto
elipses, retângulos, linhas
imagens, máscaras
gradientes, padrões, filtros
símbolos, fontes
6. O que é SVG
Scalable Vector Graphics
Ideal para
logotipos, desenhos
diagramas, gráficos
ícones, fontes, sprites
interfaces responsivas
7. O que é SVG
Scalable Vector Graphics
Guarda a fórmula do gráfico
(não é mapa de pixels)
Coordenadas, ângulos, dimensões
Arcos, curvas Bézier
Transformadas
Tesselações
11. Origens
• 1998 (W3C, Adobe, Microsoft)
• Influências
• VML da Microsoft (com HP, Autodesk e
Macromedia)
• PGML, da Adobe (com IBM, Netscape e Sun)
• CSS e HTML (W3C)
12. Origens
• 1998 (W3C, Adobe, Microsoft)
• Influências
• VML da Microsoft (com HP, Autodesk e Macromedia)
• PGML, da Adobe (com IBM, Netscape e Sun)
• CSS e HTML (W3C)
• Versão atual: SVG 1.1
• W3C Recommendation (segunda edição) 16/08/2011
• Suporte razoável na maior parte dos browsers (ótimo
em Firefox, Chrome, Safari e Opera)
13. Plataformas
SVG Full
• SVG 1.0 e SVG 1.1
• Formato SVGZ (SVG comprimido com ZIP)
SVG Mobile
• SVG 1.2 Tiny (SVGT) e SVG Basic (SVGB)
• A 3GPP adotou SVG Tiny como padrão de mídia vetorial
• Em desenvolvimento
• SVG2 (antes chamado de SVG 1.2 e SVG 2.0)
• SVG Print (Canon, HP, Adobe e Corel) – impressão
25. <html>
<head>
<style>
#paraiba
{
-‐webkit-‐mask-‐image:
url(svgdemo.svg);
-‐webkit-‐mask-‐origin:
padding;
-‐webkit-‐mask-‐position:
180px
220px;
-‐webkit-‐transform:
scale(2.8);
}
</style>
</head>
<body>
<h1>Mascaras
SVG
e
CSS3</h1>
<img
src="imagens/paraiba2005.jpg"
id="paraiba">
</body>
</html>
Como usar em CSS 3
Máscara SVG em CSS 3
css3_mascara.html
26. SVG vs. Canvas
Objetos em XML vs
Operações JavaScript
<h1>HTML5
Canvas</h1>
<canvas
id="desenho1"
height="300"
width="300"></canvas>
<script>
var
acanvas
=
document.getElementById("desenho1");
var
ctx
=
acanvas.getContext("2d");
ctx.fillStyle
=
"#ff459a";
ctx.fillRect(50,50,
150,150);
</script>
<h1>SVG
(usando
tags)</h1>
<svg
height="300"
width="300">
<rect
x="50"
y="50"
width="150"
height="150"
fill="#ff459a"
/>
</svg> canvas_svg1.html
27. Estilos em SVG
CSS: atributo style
<rect
x="50"
y="20"
width="120"
height="100"
style="stroke-‐width:4;
stroke:blue;
fill:red"/>
XML: atributos do SVG
<rect
x="50"
y="20"
width="120"
height="100"
stroke-‐width="4"
stroke="blue"
fill="red"/>
+ atributos id, style e class como HTML
+ folhas de estilo (bloco <style> ou arquivo .css externo)
28. CSS externo
SVG embutido: HTML e SVG podem
compartilhar mesmas folhas de estilo CSS
Arquivo SVG ou referenciado em HTML: CSS
embutido ou vinculado ao próprio SVG
<?xml-‐stylesheet
type="text/css"
href="estilo.css"?>
<svg
xmlns="..."
>
<circle
class="t1"
...>
</svg>
<svg
xmlns="..."
>
<style>
.t1
{fill:
green;}
</style>
<circle
class="t1"
...>
</svg>
<html>
<style>.t1
{fill:
green;}</style>
<svg>
<circle
class="t1"
...>
</svg>
</html>
<html>
<link
rel="stylesheet"
href="estilo.css"/>
<svg>
<circle
class="t1"
...>
</svg>
</html>
.t1
{
fill:
green;
}
estilo.css
arquivo.svg
arquivo.html
29. SVG DOM
API de Document Object Model para SVG
<h1>SVG
(usando
SVG
DOM)</h1>
<svg
id="desenho2"
height="300"
width="300"></svg>
<script>
var
svgns
=
"http://www.w3.org/2000/svg";
var
ansvg
=
document.getElementById("desenho2");
var
rect
=
document.createElementNS(svgns,
"rect");
rect.setAttribute("x",50);
rect.setAttribute("y",50);
rect.setAttribute("height",150);
rect.setAttribute("width",150);
rect.setAttribute("fill","#ff459a");
ansvg.appendChild(rect);
</script>
canvas_svg1.html
30. E se não funcionar?
Workarounds
Às vezes funciona se escrever o SVG de outro jeito
31. E se não funcionar?
Workarounds
Às vezes funciona se escrever o SVG de outro jeito
Fallbacks
Em caso de erro, use tecnologia alternativa (HTML/CSS/PNG)
<img
src="svgdemo.svg"
onerror="this.src='circle.png'"/>
32. E se não funcionar?
Workarounds
Às vezes funciona se escrever o SVG de outro jeito
Fallbacks
Em caso de erro, use tecnologia alternativa (HTML/CSS/PNG)
Polyfills
• Modernizr + bibliotecas snap.svg, raphaël e d3.js
• FakeSmile
<img
src="svgdemo.svg"
onerror="this.src='circle.png'"/>
36. Pintura
Dois atributos para pintar componentes
preenchimento (fill)
contorno, ou traço (stroke)
Três tipos de "tinta"
cores sólidas (sRGB) - mesma spec do CSS.
Ex: red,
lightblue,
#a09,
#AA0099,
rgb(128,64,32)
gradientes
texturas (patterns)
43. Polígono aberto <polyline>
points – lista de coords x,y
com pontos da linha
<polyline
points="150,150
50,150
100,20
150,50
200,200
50,200
20,154
48,82
32,20"
fill="yellow"
fill-‐opacity="0.2"
stroke="red"
stroke-‐width="10"/>
polyline.svg
(0,0)
150
150
44. Polígono fechado <polygon>
Similar a <polyline>, mas sempre fechada
points – lista de coords x,y com vértices
<polygon
points="150,150
50,250
50,150
100,50
200,50
250,100
300,150
350,250
250,250"
fill="red"
fill-‐opacity="0.2"
stroke-‐opacity="0.5"
stroke="navy"
stroke-‐width="10"
stroke-‐linecap="round"
stroke-‐linejoin="round"
stroke-‐dasharray="40
20
5
20"/>
polygon.svg
45. Texto <text>
• Não quebra linha! Use <tspan>:
<text>
<tspan>linha
1</tspan>
<tspan
x="0"
dy="16">linha
2</tspan>
</text>
<svg
...
viewBox="-‐10
-‐50
200
200">
<rect
x="0"
y="0"
height="36"
width="180"
...
/>
<text
font-‐size="36"
x="0"
y="0">Agora</text>
</svg>
Posição (0,0): baseline
só esta parte é visível se
viewBox começar em 0,0
Retângulo e texto com
mesmas coordenadas x,y
linha 1
linha 2
46. Imagens <image>
Insere PNG ou JPEG em SVG
Ou clipping, mask, fill, patterns
Namespace xlink opcional se embutido em HTML
<svg
width="4in"
height="4in"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image
x="200"
y="200"
width="100px"
height="100px"
xlink:href="pluto.png">
<title>Imagem
de
Plutão</title>
</image>
</svg> Imagem de Plutão
47. Referências e IDs
Objetos referenciáveis têm atributo id
Podem ser referenciados 'por
objetos locais ou remotos <circle
id="obj1"
.../>
<gradient
id="grad"
.../>
48. Referências e IDs
Objetos referenciáveis têm atributo id
Podem ser referenciados 'por
objetos locais ou remotos
Referência pode ser direta
via atributos XLink xlink:href
<use
xlink:href="#obj1"
/>
<use
xlink:href="http://w.com/outro.svg#obj1"
/>
<circle
id="obj1"
.../>
<gradient
id="grad"
.../>
49. Referências e IDs
Objetos referenciáveis têm atributo id
Podem ser referenciados 'por
objetos locais ou remotos
Referência pode ser direta
via atributos XLink xlink:href
<use
xlink:href="#obj1"
/>
<use
xlink:href="http://w.com/outro.svg#obj1"
/>
Ou indireta, através da função url(),
em atributos SVG
<rect
fill="url(#grad)"
/>
<rect
fill="url(http://w.com/outro.svg#grad)"
/>
<circle
id="obj1"
.../>
<gradient
id="grad"
.../>
50. <defs> e <use>
Elementos em bloco <defs> não são desenhados
Para desenhar, referencie com <use>
<svg
...>
<defs>
<rect
id="preto"
x="0"
y="0"
width="20"
height="20"
fill="rgb(64,32,32)"
/>
<rect
id="branco"
x="0"
y="0"
width="20"
height="20"
fill="rgb(255,225,200)"
/>
</defs>
<use
xlink:href="#preto"
/>
<use
xlink:href="#branco"
transform="translate(20)"/>
<use
xlink:href="#branco"
transform="translate(0,20)"/>
<use
xlink:href="#preto"
transform="translate(20,20)"/>
</svg>
51. Grupos <g>
Trata conjunto de objetos como um
Elementos herdam estilos e atributos
Pode conter outros grupos
<svg
...>
<defs>
...
<g
id="quatroCasas"
transform="translate(10,10)">
<use
xlink:href="#preto"
/>
<use
xlink:href="#branco"
transform="translate(20)"/>
<use
xlink:href="#branco"
transform="translate(0,20)"/>
<use
xlink:href="#preto"
transform="translate(20,20)"/>
</g>
</defs>
<use
xlink:href="#quatroCasas"
/>
</svg>
58. Caminhos (paths)
• Seqüências de comandos (letras) + coordenadas
• Ex: M 50,50 L 120,120 z
• Comando afeta coordenadas seguintes (até novo comando)
• Maiúsculas = coords absolutas / Minúsculas = relativas
59. Caminhos (paths)
• Seqüências de comandos (letras) + coordenadas
• Ex: M 50,50 L 120,120 z
• Comando afeta coordenadas seguintes (até novo comando)
• Maiúsculas = coords absolutas / Minúsculas = relativas
• Quatro tipos de movimentos
• M: move até um ponto sem desenhar
• L, H, V: desenha linha reta até um ponto (L,
l,
H,
h,
V,
v)
• C, S, Q, T, A (curve to): desenha curva a um ponto; pode ser
• Bézier cúbica com dois pontos tangenciais (C,
c,
S,
s)
• Bézier quadrática com um ponto tangencial (Q,
q,
T,
t)
• Arco elíptico ou circular (A,
a)
• Z: fecha a figura (Z ou z)
60. Linhas retas
H ou h + coordenadas x linhas retas horizontais
V ou v + coordenadas y linhas retas verticais
L ou l + pares de coords x,y linhas retas em qq direção
1. M100,100
L150,200
z
(0,0)
(100,100)
(150,200)
1. Move para (100,100)
2. Desenha linha até (150,200)
3. Fecha figura (não faz nada)
61. Linhas retas
H ou h + coordenadas x linhas retas horizontais
V ou v + coordenadas y linhas retas verticais
L ou l + pares de coords x,y linhas retas em qq direção
1. M100,100
L150,200
z
2. M100,100
L150,200
h50
z
(
(
(0,0)
(200,200)
z
1. Parte de (150,200)
2. Avança 50 unidades na horizontal
3. Fecha figura (desenha linha)
62. Linhas retas
H ou h + coordenadas x linhas retas horizontais
V ou v + coordenadas y linhas retas verticais
L ou l + pares de coords x,y linhas retas em qq direção
1. M100,100
L150,200
z
2. M100,100
L150,200
h50
z
3. M100,100
L150,200
h50
v-‐100
z
(
( (
(200,100)z
z
(0,0)
1. Parte de (200,200)
2. Sobe 100 unidades na vertical
3. Fecha figura (desenha linha)
63. Linhas retas
H ou h + coordenadas x linhas retas horizontais
V ou v + coordenadas y linhas retas verticais
L ou l + pares de coords x,y linhas retas em qq direção
1. M100,100
L150,200
z
2. M100,100
L150,200
h50
z
3. M100,100
L150,200
h50
v-‐100
z
4. M100,100
L150,200
h50
v-‐100
l-‐50,50
z
(0,0)
(150,150)
z
(100,100)
(
(200,z
z
1. Parte de (200,100)
2. Volta 50 un. e desce 50 un.
3. Fecha figura (desenha linha)
64. Linhas retas
H ou h + coordenadas x linhas retas horizontais
V ou v + coordenadas y linhas retas verticais
L ou l + pares de coords x,y linhas retas em qq direção
1. M100,100
L150,200
z
2. M100,100
L150,200
h50
z
3. M100,100
L150,200
h50
v-‐100
z
4. M100,100
L150,200
h50
v-‐100
l-‐50,50
z
5. M100,100
L150,200
h50
v-‐100
l-‐50,50
L150,50
100,50
z
(100,100)
(150,200) (200,200)
(200,100) (
(150,50)
(100,50)
z
z
z
z
(0,0)
1. Parte de (150,150)
2. Desenha linha para (150,50)
3. Desenha linha para (100,50)
4. Fecha figura (desenha linha)
65. Curvas Bézier cúbicas
Curva normal: C ou c com coordenadas x1,y1
x2,y2 x,y onde
x,y = coordenadas do ponto final
x1,y1
= coordenadas do controle tangencial do ponto inicial
x2,y2
= coordenadas do controle tangencial do ponto final
Curva suave: S ou s com coordenadas x2,y2 x,y
Controle tangencial do ponto inicial é implícito (simétrico a controle
final da curva anterior) = junção suave
<path
d="M100,200
C100,100
250,100
250,200
S400,300
400,200"
...
/>
M100,200
C100,100 250,100
250,200
400,200
S400,300
Ponto
de
controle
simétrico
x1,y1
calculado
automaticamente
66. Curvas Bézier quadráticas
Curva normal: Q ou q com coordenadas
x1,y1
x,y
onde
x,y = coordenadas do ponto final
x1,y1 = coordenadas do (único) controle tangencial
Curva suave: T ou t com coordenadas x,y
Controle tangencial é implícito (simétrico a controle
tangencial da curva anterior) = junção suave
<path
d="M
200,300
Q
400,50
600,300
T
1000,300"
...
/> (200,300)
(400,50)
(600,300)
(1000,300)
Ponto
de
controle
simétrico
calculado
automaticamente
67. Arcos
Arco em SVG = curva na borda de um elipse
Comando A ou a; sintaxe: A
rx,ry
θ
laf,sf
x,y onde
rx e ry = raio horizontal e vertical do elipse
θ = ângulo de rotação do eixo x onde está o elipse
laf = flag do arco maior, sf = sweep flag (veja exemplo)
x,y = coordenadas do ponto final
ry
rx
θ
x
y
68. Flags de arcos
M-‐100,-‐100
L0,-‐100
A100,100
0
0,1
-‐100,0
L-‐100,-‐100
z
M0,0
L0,-‐100
A100,100
0
0,0
-‐100,0
L0,0
z
M-‐100,-‐100
L0,-‐100
A100,100
0
1,0
-‐100,0
L-‐100,-‐100
z
M0,0
L0,-‐100
A100,100
0
1,1
-‐100,0
L0,0
z
71. View Port
• Área onde o SVG é desenhado
• Dois sistemas de coordenadas (inicialmente idênticos)
• Dimensões, proporções, unidade, etc. herdadas pelos
objetos contidos no SVG
72. View Port
• Área onde o SVG é desenhado
• Dois sistemas de coordenadas (inicialmente idênticos)
• Dimensões, proporções, unidade, etc. herdadas pelos
objetos contidos no SVG
• Cada componente SVG pode ter seu próprio
sistema de coordenadas, ou herdá-lo
• Atributo viewBox="min-x min-y largura altura" + outros
atributos com unidades, dimensões, aspect ratio, etc.
• Atributo transform="funções de transformação 2D"
73. Atributo transform
Altera sistema de coordenadas relativo
matrix(a11,a12,a13,a21,a22,a23)
matriz de transformações
translate(tx)
ou
translate(tx,
ty)
deslocamento da origem
scale(sx)
ou
scale(sx,
sy)
redimensionamento
rotate(θ)
ou
rotate(θ,
cx,
cy)
giro de θ graus sobre origem ou cx,cy
skewX(θ)
e
skewY(θ)
cisalhamento de θ graus
[ ]
a11
a12
a13
a21
a22
a23
0
0
1
82. Símbolos e marcadores
Ícones e setas reutilizáveis
<polyline
points="0,50
25,50"
marker-‐end="url(#setaPNP)"/>
<symbol
id="transistorPNP"
viewBox="-‐1
-‐1
22
22">
<use
xlink:href="#baseColetor"
/>
<line
x1="0"
x2="9"
y1="20"
y2="10"
marker-‐end="url(#seta)"
/>
</symbol>
<marker
id="setaPNP"
viewBox="0
0
10
10"
refX="0"
refY="5"
orient="auto"
markerUnits="userSpaceOnUse"
markerWidth="50"
markerHeight="50">
<use
xlink:href="#transistorPNP"
x="0"
y="0"
height="10"
width="10"
transform="rotate(-‐90,5,5)"
/>
</marker>
Símbolo
"transistorPNP"
sendo reusado
como "seta" de
uma polyline
83. Image sprites e fontes
Símbolos podem ser agrupados em um SVG e
referenciados pelo ID para reuso
• Coleção de fontes usando <font>, <glyph>, ...
• Coleção de ícones usando <symbol>, ...
Referenciáveis via ID / XLink
<defs>
<symbol
id="twitter-‐icon"
viewBox="0
0
32
32">
<path
d="..."
/>
</symbol>
...
</defs>
<use
xlink:href="#twitter-‐icon"
/>
<svg
...>
...
<use
xlink:href="/sprites/icons.svg#twitter-‐icon"
/>
</svg>
85. DOM 2.0 + namespaces
Necessário para elementos e atributos
que usam namespaces (ex: xlink)
Em vez de getAttribute, getElement, etc.
use getAttributeNS, getElementNS, etc.
var
svgNS
=
"http://www.w3.org/2000/svg";
var
xlinkNS
=
"http://www.w3.org/1999/xlink";
var
circle
=
document.createElementNS(svgNS,"use");
circle.setAttributeNS(null,"x",500);
circle.setAttributeNS(null,"y",500);
circle.setAttributeNS(xlinkNS,
"href",
"#tabuleiro");
86. Criação dinâmica de objetos
function
criarCirculo(evt)
{
var
randomX
=
Math.floor(
Math.random()
*
document.rootElement.getAttributeNS(null,
"width"));
var
randomY
=
Math.floor(
Math.random()
*
document.rootElement.getAttributeNS(null,
"height"));
var
color
=
"rgb("
+
Math.floor(Math.random()
*
256)
+",
"+
Math.floor(Math.random()
*
256)
+",
"+
Math.floor(Math.random()
*
256)
+")";
...
script_3.js
randomY
randomX
width
height
Calculando valores para
criar círculos SVG em
posições e cores aleatórias
Dimensões
do
SVG
(exemplo: parte 1 de 3)
87. function
criarCirculo(evt)
{
...
var
svgNS
=
"http://www.w3.org/2000/svg";
var
circulo
=
document.createElementNS(svgNS,
"circle");
circulo.setAttributeNS(null,
"cx",
randomX);
circulo.setAttributeNS(null,
"cy",
randomY);
circulo.setAttributeNS(null,
"fill",
color);
circulo.setAttributeNS(null,
"r",
evt.target.getAttributeNS(null,
"r"));
circulo.addEventListener("click",
criarCirculo,
false);
evt.target.parentNode.appendChild(circulo);
}
script_3.js
Criação dinâmica de objetos
(exemplo: parte 2 de 3)
Círculo criado com cx, cy e fill aleatórios
adicionado ao parentNode (<svg>)
88. <svg
xmlns="http://www.w3.org/2000/svg"
width="500"
height="500">
<script
xlink:href="script_3.js"
/>
<circle
cx="125"
cy="40"
r="5"
fill="green"
onclick="criarCirculo(evt)"/>
<circle
cx="225"
cy="100"
r="10"
fill="blue"
onclick="criarCirculo(evt)"/>
<circle
cx="325"
cy="170"
r="15"
fill="red"
onclick="criarCirculo(evt)"/>
</svg>
script_3.svg
Criação dinâmica de objetos
(exemplo: parte 3 de 3)
SVG carrega o script e
cria três círculos iniciais
89. <svg
xmlns="http://www.w3.org/2000/svg"
width="500"
height="500">
<script
xlink:href="script_3.js"
/>
<circle
cx="125"
cy="40"
r="5"
fill="green"
onclick="criarCirculo(evt)"/>
<circle
cx="225"
cy="100"
r="10"
fill="blue"
onclick="criarCirculo(evt)"/>
<circle
cx="325"
cy="170"
r="15"
fill="red"
onclick="criarCirculo(evt)"/>
</svg>
script_3.svg
Criação dinâmica de objetos
(exemplo: parte 3 de 3)
SVG carrega o script e
cria três círculos iniciais
90. Tesselações e outros algoritmos
Diagrama de Voronoi
http://bl.ocks.org/mbostock/4060366
com
SVG DOM
ou
d3.js
91. Animação sem scripts
<set>
<animate>
<animateColor>
<animateMotion>
<animateTransform>
<rect
x="50"
y="50"
fill="red"
>
<animate
attributeName="x"
to="200"
dur="3s"
begin="click"
fill="freeze"
/>
</rect>
<rect
x="200"
y="50"
fill="blue"
opacity="0.5"/>
SMIL
animações declarativas
(como em CSS3)
atributo que irá variar ("x")
valor final do atributo "x"
duração da animação
evento que dispara a animação
o que fazer no final
94. <animate values>
Animação ignora to/from e usa valores especificados
calcMode determina como os valores são usados
(discreto, linear, uniforme, spline, etc.)
<svg
xmlns="http://www.w3.org/2000/svg">
<image
id="trends"
xlink:href="TrendsMonster.svg"
height="100"
width="250"
x="50"
y="50"
/>
<g
stroke="blue"
stroke-‐width="2">
<line
x1="200"
x2="200"
y1="175"
y2="225"/>
...
</g>
...
<animate
attributeName="x"
calcMode="linear"
values="50;150;200;500"
dur="4s"
begin="click"
fill="freeze"
xlink:href="#trends"
/>
</svg>
smil_3_values.svg
Ex: o monstro leva
o mesmo tempo
em cada trecho
95. values + keyTimes
keyTimes associa intervalo a cada valor em values
0.0 a 0.1: 10% do tempo para ir de x=50 a x=200
0.1 a 0.9: 90% do tempo para ir de x=200 a x=350
0.9 a 1.0: 10% do tempo para ir de x=350 a x=500
0s 0.4s 3.6s
<svg
xmlns="http://www.w3.org/2000/svg">
<image
id="openweb"
xlink:href="OpenWebMonster.svg"
x="50"
y="50"/>
<animate
values="50
;
200;
350;
500"
attributeName="x"
keyTimes="0.0;
0.1;
0.9;
1.0"
begin="click"
fill="freeze"
dur="4s"
xlink:href="#openweb"
/>
</svg>
smil_4_keyTimes.svg
96. values + keyTimes + keySplines
Trecho 1: movimento linear
Trecho 2: começa lento, acelera no meio, depois desacelera
Trecho 3: dispara no início e desacelera até parar
<animate
attributeName="x"
values="50;
200;
350;
500"
dur="4s"
keyTimes="0;
0.333;
0.667;
1"
begin="click"
keySplines="0.0,0.0
1.0,1.0;
0.5,0.0
0.5,1.0;
0.0,0.75
0.25,1.0;"
calcMode="spline"
fill="freeze"
xlink:href="#security"
/>
smil_5_keySplines.svg
97. <animateTransform>
Porque <animate> não funciona com
funções de transformação de coordenadas
<animateTransform
attributeName="transform"
type="rotate
ou
translate
ou
scale
ou
skewX
ou
skewY
"/>
101. <animateMotion>
Objeto move-se por caminho que pode ser
• xlink:href="#path" (referência para um <path> )
• Atributo path: sintaxe do atributo d do elemento <path>
• Elemento filho <mpath xlink:href="#path" />
Atributos keyPoints + keyTimes
• keyPoints: valores = % da distância percorrida: 0 a 1
% do caminho total. Ex: 0;
.25;
.5;
.75;
0
• keyTimes: valores = % do tempo transcorrido: 0 a 1
% da duração total. Ex: 0;
.25;
.5;
.75;
0
102. Exemplo: <animateMotion>
O alienígena em órbita
elíptica acelera quando
se aproxima do Sol
<path
id="orbita"
...
d="M
20,175
A
244,220
0
1,0
493,175
A
244,220
0
0,0
20,175"/>
<image
x="0"
y="-‐100"
xlink:href="PayMonster.svg"
height="80"
width="200"
>
<animateMotion
dur="10s"
repeatCount="indefinite"
rotate="auto"
calcMode="spline"
keyTimes="0;1"
keyPoints="0;1"
keySplines="0.75,
0.25
0.25,
0.75">
<mpath
xlink:href="#orbita"/>
</animateMotion>
</image>
smil_6_motion.svg
103. SMIL vs. JS
SMIL é padrão W3C e parte da spec SVG 1.1
SMIL é mais eficiente (menos uso de CPU)
SMIL é declarativo (+ simples, + reuso)
104. SMIL vs. JS
SMIL é padrão W3C e parte da spec SVG 1.1
SMIL é mais eficiente (menos uso de CPU)
SMIL é declarativo (+ simples, + reuso)
SMIL é limitado (dependendo da complexidade,
pode ser mais fácil usar scripts)
SMIL não é suportado no MSIE (troque
por polyfills em JS: + uso de CPU
105. SMIL vs. JS
SMIL é padrão W3C e parte da spec SVG 1.1
SMIL é mais eficiente (menos uso de CPU)
SMIL é declarativo (+ simples, + reuso)
SMIL é limitado (dependendo da complexidade,
pode ser mais fácil usar scripts)
SMIL não é suportado no MSIE (troque
por polyfills em JS: + uso de CPU
SMIL foi marcado como deprecated pelo Google!
(agosto 2015)
106. Qual a alternativa?
• Google sugere usar polyfills
• Solução rápida mas ineficiente (scripts, +CPU)
107. Qual a alternativa?
• Google sugere usar polyfills
• Solução rápida mas ineficiente (scripts, CPU)
• Bibliotecas que geram SVG e CSS
http://d3js.org/http://snapsvg.io/
108. Qual a alternativa?
• Google sugere usar polyfills
• Solução rápida mas ineficiente (scripts, CPU)
• Bibliotecas que geram SVG e CSS
• Animações CSS 3!
http://d3js.org/http://snapsvg.io/
109. Alternativas W3C
HTML5 Canvas CSS
SVG
Gradientes
Filtros
Animação
declarativa
DOM
Figuras
Caminhos
Manipulação
de pixels
Figuras
são objetos
Estilos
Patterns
Curvas
Fontes
Transform 2D
Transformadas
+ anim 3D
Masks Transições
Grupos
Texto
Image
XML
Fill/stroke
Clipping
Símbolos
Há uma sobreposição de soluções
Sombras
Reflexos
112. SVG2
Working draft!
• Muito mais integração com CSS
• CSS compositing & blending
• CSS3 2D+3D transforms
• CSS masking
• Filter Effects 1.0
• CSS Color
• Paint servers (+CSS gradients em SVG)
• Elemento <star>
• Interoperabilidade com HTML5 Canvas
• Novos objetos em SVG DOM
• ...
113. Conclusões
SVG 1.1 é solução eficiente para gráficos vetoriais
• Leve, escalável, reusável e padrão aberto W3C
• Elementos e estilos manipuláveis como objetos
• Compatibilidade com HTML5 e CSS3
• Suporte quase universal para gráficos estáticos na Web
• Amplo suporte em ferramentas gráficas
114. Conclusões
SVG 1.1 é solução eficiente para gráficos vetoriais
• Leve, escalável, reusável e padrão aberto W3C
• Elementos e estilos manipuláveis como objetos
• Compatibilidade com HTML5 e CSS3
• Suporte quase universal para gráficos estáticos na Web
• Amplo suporte em ferramentas gráficas
Ainda existem problemas
• Compatibilidade (resolvidos com workarounds)
• Falta de suporte para animações
• Duplicação de funcionalidades
115. Conclusões
SVG 1.1 é solução eficiente para gráficos vetoriais
• Leve, escalável, reusável e padrão aberto W3C
• Elementos e estilos manipuláveis como objetos
• Compatibilidade com HTML5 e CSS3
• Suporte quase universal para gráficos estáticos na Web
• Amplo suporte em ferramentas gráficas
Ainda existem problemas
• Compatibilidade (resolvidos com workarounds)
• Falta de suporte para animações
• Duplicação de funcionalidades
SVG2: +interoperabilidade com CSS3 e HTML5
116. Referências
Este material é baseado em Tutorial SVG (Helder da Rocha, 2010) disponível em
http://www.argonavis.com.br/download/download_xml-svg.html
Especificações
• SVG 1.1 Second Edition. www.w3.org/TR/SVG/ August 2011
• SVG 2 Working Draft. http://www.w3.org/TR/SVG2/ July 2015
• SMIL 3 www.w3.org/TR/SMIL/ December 2008
• CSS 2 http://www.w3.org/TR/2008/REC-CSS2-20080411/ April 2008
• DOM 3 http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/ April 2004
Livros sobre SVG
• Kurt Cagle. SVG Programming: the graphical Web. Apress. 2002.
• Frost, Goesser, Hirtzler. Learn SVG: The Web Graphics Standard. http://www.learnsvg.com/
• Mike Dewar. Getting Started with D3. O'Reilly. 2012.
• J. David Eisenberg, Amelia Bellamy-Royds. SVG Essentials 2nd. Edition. O'Reilly. 2014.
• J. Frost, D. Dailey, D. Strazzullo, Building Web Applications with SVG. MS Press. 2012.
Produtos
• d3.js http://d3js.org/ Biblioteca JavaScript para dados e gráficos (gera SVG)
• snap.js http://snapsvg.io/ Biblioteca JavaScript para SVG
Exemplos
• Aplicação Orbitas (gera órbitas planetárias em SVG): www.argonavis.com.br/astronomia/orbitas escrito em
Java, XSLT e SVG. Código-fonte em https://github.com/helderdarocha/orbits
• Monstrinhos em SVG originalmente do site da conferência conferenciaweb.w3c.br alterados para
fazer animações em olhos e braços; código disponível em GitHub (veja slide seguinte)