Introdução ao SVG na Web
Enviado por
lucasgta59Introdução ao SVG na Web
Enviado por
lucasgta59Setembro/2015
gráficos
vetoriais
na
web com
helderdarocha helder@[Link]
Programa
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
Quem sou eu? Who am I? Кто я?
Helder da Rocha
Tecnologia * Ciência * Arte
HTML & tecnologias Web desde 1995
Autor de cursos e livros sobre
Java, XML e tecnologias Web
[Link]
[Link]
O que é SVG?
Scalable Vector Graphics
O que é SVG
Scalable Vector Graphics
curvas, polígonos, texto
elipses, retângulos, linhas
imagens, máscaras
gradientes, padrões, filtros
símbolos, fontes
O que é SVG
Scalable Vector Graphics
Ideal para
logotipos, desenhos
diagramas, gráficos
ícones, fontes, sprites
interfaces responsivas
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
Vetores vs bitmaps
Vetor, 1kB Bitmap, 10kB
Vetor ampliado, 1kB Bitmap ampliado, 10kB
Vetores vs bitmaps
Vetor, 1kB Bitmap, 10kB
Vetor ampliado, 1kB Bitmap maior, 250kB
Origens
• 1998 (W3C, Adobe, Microsoft)
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)
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)
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
Como criar um SVG
[Link]
Elemento raiz
<svg>
Namespace
[Link]
<?xml version="1.0" encoding="UTF-‐8"?>
<svg xmlns="[Link]
viewBox="0 0 200 200" height="100px" width="100px">
<circle r="50" cx="100" cy="100" fill="green"/>
</svg>
Como criar um SVG
[Link]
100 px
Dimensões (opcional)
100 px
<?xml version="1.0" encoding="UTF-‐8"?>
<svg xmlns="[Link]
viewBox="0 0 200 200" height="100px" width="100px">
<circle r="50" cx="100" cy="100" fill="green"/>
</svg>
Como criar um SVG
(0,0) [Link]
Sistema de coordenadas
r = 50
viewBox
200
(100,100)
origem + dimensões
200
<?xml version="1.0" encoding="UTF-‐8"?>
<svg xmlns="[Link]
viewBox="0 0 200 200" height="100px" width="100px">
<circle r="50" cx="100" cy="100" fill="green"/>
</svg>
Como criar um SVG
(0,0) [Link]
Sistema de coordenadas
r = 25px
100 px
viewBox
(50px,50px)
origem + dimensões
100 px
<?xml version="1.0" encoding="UTF-‐8"?>
<svg xmlns="[Link]
viewBox="0 0 200 200" height="100px" width="100px">
<circle r="50" cx="100" cy="100" fill="green"/>
</svg>
Como gerar: ferramentas
XSLT XML
Como exibir
Abra em um browser!
Opera
Chrome
Safari
Firefox
[Link]
Como exibir
Qualquer plataforma
Opera
Chrome
Safari
Firefox
[Link] Internet Explorer
Como exibir
Desktop ou Mobile
Opera
Chrome
Safari
Firefox
[Link] Internet Explorer
Como usar em HTML5 (1)
Três maneiras de referenciar
<html>
<head>...</head>
<body>
<h1>SVG referenciado</h1>
<p>Com
Img</p>
<img
src="[Link]"/>
<p>Com
Object</p>
<object
data="[Link]"></object>
<p>Com
Embed</p>
<embed
src="[Link]"/>
</body>
</html>
[Link]
Como usar em HTML5 (2)
Embutir no código
<html>
<head>
<style>
svg
{
border:
red
dashed
1px;
height:
200px;
width:
200px;
}
circle
{fill:
red}
</style>
</head>
<body>
<h1>SVG
embutido</h1>
[Link]
<svg
viewBox="0
0
200
200">
<circle
r="50"
cx="100"
cy="100"
fill="green"
/>
</svg>
</body>
</html>
Como usar em CSS
<html>
<head>
<style>
#circulo
{
background-‐image:
url([Link]);
height:
100%;
width:
100%;
}
#container
{
height:
200px;
width:
200px;
border:
blue
dashed
1px;
}
</style>
</head>
<body>
<h1>SVG
background
CSS</h1>
<div
id="container">
<div
id="circulo"></div>
</div>
</body>
</html>
[Link]
Como usar em CSS 3
<html>
<head> Máscara SVG em CSS 3
<style>
#paraiba
{
-‐webkit-‐mask-‐image:
url([Link]);
-‐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/[Link]"
id="paraiba">
</body>
</html>
css3_mascara.html
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
=
[Link]("desenho1");
var
ctx
=
[Link]("2d");
[Link]
=
"#ff459a";
[Link](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
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)
CSS externo
SVG embutido: HTML e SVG podem
compartilhar mesmas folhas de estilo CSS
[Link]
<html>
<html> <link rel="stylesheet"
<style>.t1 {fill: green;}</style> href="[Link]"/>
<svg> <svg>
<circle class="t1" ...> <circle class="t1" ...>
</svg> </svg>
</html> </html>
Arquivo SVG ou referenciado em HTML: CSS .t1 {
fill: green;
embutido ou vinculado ao próprio SVG }
[Link]
<svg xmlns="..." > [Link]
<style>
.t1 {fill: green;} <?xml-‐stylesheet type="text/css"
</style> href="[Link]"?>
<circle class="t1" ...> <svg xmlns="..." >
</svg> <circle class="t1" ...>
</svg>
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 = "[Link]
var ansvg =
[Link]("desenho2");
var rect =
[Link](svgns, "rect");
[Link]("x",50);
[Link]("y",50);
[Link]("height",150);
[Link]("width",150);
[Link]("fill","#ff459a");
[Link](rect);
</script>
canvas_svg1.html
E se não funcionar?
Workarounds
Às vezes funciona se escrever o SVG de outro jeito
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="[Link]"
onerror="[Link]='[Link]'"/>
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="[Link]"
onerror="[Link]='[Link]'"/>
Polyfills
• Modernizr + bibliotecas [Link], raphaël e [Link]
• FakeSmile
breve tutorial
Componentes gráficos
<rect> – Retângulo
<circle> – Círculo
<ellipse> – Elipse
<line> – Linha reta
<polyline> – Linha com múltiplos segmentos
<polygon> – Polígono
<image> - Imagem bitmap
<text> - Texto
<path> - Caminho arbitrário (curvas, linhas, etc.)
Pintura
Dois atributos para pintar componentes
preenchimento (fill)
contorno, ou traço (stroke)
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)
Preenchimento
fill (atributo ou CSS) = cor
<rect ... fill="rgb(255,255,0%)" />
<rect ... style="fill: rgb(100%,100%,0%)" />
fill-opacity = componente alfa (transparência)
De 0 (transparente) a 1 (opaco). [Link]
<svg
xmlns="[Link]
<circle
r="50"
cx="100"
cy="100"
fill="green"/>
<circle
r="50"
cx="125"
cy="125"
fill="#008000"
fill-‐opacity="0.5"/>
<circle
r="50"
cx="150"
cy="150"
fill="#080"
fill-‐opacity="0.2"/>
</svg>
Traço
stroke: cor
stroke-width: espessura [Link]
stroke-opacity: transparência (alfa)
stroke-dasharray
Valores para tracejado (seqüência de traços e vazios)
<?xml version="1.0" encoding="UTF-‐8"?>
<svg xmlns="[Link] viewBox="0 0 300 300">
<circle r="50" cx="100" cy="100" fill-‐opacity="0"
stroke="green" stroke-‐width="1" stroke-‐dasharray="5 5"/>
<circle r="50" cx="125" cy="125" fill-‐opacity="0"
stroke="green" stroke-‐width="5" stroke-‐opacity="0.5"/>
<circle r="50" cx="150" cy="150" fill-‐opacity="0"
stroke="green" stroke-‐width="20" stroke-‐opacity="0.2"/>
</svg>
Retângulo <rect>
[Link]
x, y – coords de posição (default: 0)
width, height – largura, altura (obrigatório)
rx, ry – raios horizontal e vertical para
cantos arredondados (opcional)
<rect x="25" y="50" width="90" height="90"
stroke="green" fill-‐opacity="0" stroke-‐width="1"
stroke-‐dasharray="5 5"/>
<rect x="50" y="150" width="125" height="125" rx="40" ry="40"
stroke="red" fill-‐opacity="0" stroke-‐width="5"
stroke-‐opacity="0.5" />
<rect x="150" y="50" width="150" height="150"
stroke="green" fill="blue" fill-‐opacity="0.2"
stroke-‐width="20" stroke-‐opacity="0.2" />
Círculo <circle> [Link]
cx, cy – coords. do centro (default: 0)
r – raio (obrigatório)
circle
{
<?xml-‐stylesheet
type="text/css"
stroke-‐width:
10;
href="[Link]"?>
stroke-‐opacity:
0.5;
}
<svg
xmlns="[Link]
#c1
{
viewBox="0
0
300
300">
fill:
green;
stroke:
blue;
<circle
r="75"
cx="100"
cy="100"
fill-‐opacity:
0.6;
}
id="c2"/>
#c2
{
<circle
r="50"
cx="150"
cy="150"
fill:
#f00;
id="c1"/>
stroke:
yellow;
</svg> }
[Link]
Linha simples <line>
[Link]
x1, y1 – coords do primeiro ponto
x2, y2 – coords do segundo ponto
<line x1="25" y1="50" x2="190" y2="190"
stroke="blue" stroke-‐width="1" stroke-‐dasharray="5 5"/>
<line x1="50" y1="150" x2="125" y2="125"
stroke="red" stroke-‐width="5" stroke-‐opacity="0.5"/>
<line x1="150" y1="50" x2="150" y2="150"
stroke="green" stroke-‐width="20" stroke-‐opacity="0.2" />
Elipse <ellipse>
[Link]
cx, cy – coordenadas do centro
rx, ry – raios horizontal e vertical
<svg
xmlns="[Link]
<ellipse
cx="200"
cy="100"
rx="190"
ry="90"
fill="yellow"
fill-‐opacity="0.5"
stroke="#00f"
stroke-‐width="1"
stroke-‐dasharray="5
5"/>
<ellipse
cx="250"
cy="150"
rx="75"
ry="125"
fill="red"
fill-‐opacity="0.2"
stroke="#f00"
stroke-‐width="5"
stroke-‐opacity="0.5"/>
<ellipse
cx="300"
cy="200"
rx="40"
ry="150"
fill="black"
fill-‐opacity="0"
stroke="#0f0"
stroke-‐width="20"
stroke-‐opacity="0.2"
/>
</svg>
Polígono aberto <polyline>
points – lista de coords x,y (0,0) 150
com pontos da linha
<polyline
points="150,150
50,150
100,20
150
150,50
200,200
50,200
[Link]
20,154
48,82
32,20"
fill="yellow"
fill-‐opacity="0.2"
stroke="red"
stroke-‐width="10"/>
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
[Link]
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"/>
Texto <text>
<svg
...
viewBox="-‐10
-‐50
200
200">
<rect
x="0"
y="0"
height="36"
width="180"
...
/>
Retângulo e texto com
<text
font-‐size="36"
mesmas coordenadas x,y
x="0"
y="0">Agora</text>
</svg>
Posição (0,0): baseline
só esta parte é visível se
viewBox começar em 0,0
• Não quebra linha! Use <tspan>:
<text>
<tspan>linha 1</tspan> linha 1
<tspan x="0" dy="16">linha 2</tspan> linha 2
</text>
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="[Link]
xmlns:xlink="[Link]
<image x="200" y="200"
width="100px" height="100px"
xlink:href="[Link]">
<title>Imagem de Plutão</title>
</image>
</svg> Imagem de Plutão
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" .../>
Referências e IDs
Objetos referenciáveis têm atributo id
Podem ser referenciados 'por
objetos locais ou remotos <circle
id="obj1" .../>
Referência pode ser direta <gradient
via atributos XLink xlink:href id="grad" .../>
<use xlink:href="#obj1" />
<use xlink:href="[Link] />
Referências e IDs
Objetos referenciáveis têm atributo id
Podem ser referenciados 'por
objetos locais ou remotos <circle
id="obj1" .../>
Referência pode ser direta <gradient
via atributos XLink xlink:href id="grad" .../>
<use xlink:href="#obj1" />
<use xlink:href="[Link] />
Ou indireta, através da função url(),
em atributos SVG
<rect fill="url(#grad)" />
<rect fill="url([Link] />
<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>
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>
Por que usar <defs> e <use>?
Tabuleiro de xadrez SVG 66
linhas
sem <defs> e <use> ~3500
chars
<svg xmlns="[Link] width="1050" height="600" viewBox="0 0 1050 600">
64 quadrados: 32 + 32
<rect x="0" y="0" width="20" height="20" fill="rgb(64,32,32)" transform="translate(20)" />
<rect x="0" y="0" width="20" height="20" fill="rgb(255,225,200)" transform="translate(40)" />
<rect x="0" y="0" width="20" height="20" fill="rgb(64,32,32)" transform="translate(60)" />
<rect x="0" y="0" width="20" height="20" fill="rgb(255,225,200)" transform="translate(80)" />
<rect x="0" y="0" width="20" height="20" fill="rgb(64,32,32)" transform="translate(100)" />
<rect x="0" y="0" width="20" height="20" fill="rgb(255,225,200)" transform="translate(120)" />
<rect x="0" y="0" width="20" height="20" fill="rgb(64,32,32)" transform="translate(140)" />
<rect x="0" y="0" width="20" height="20" fill="rgb(255,225,200)" transform="translate(160)" />
<rect x="0" y="0" width="20" height="20" fill="rgb(255,225,200)" transform="translate(20,20)" />
<rect x="0" y="0" width="20" height="20" fill="rgb(64,32,32)" transform="translate(40,20)" />
<rect x="0" y="0" width="20" height="20" fill="rgb(255,225,200)" transform="translate(60,20)" />
<rect x="0" y="0" width="20" height="20" fill="rgb(64,32,32)" transform="translate(80,20)" />
<rect x="0" y="0" width="20" height="20" fill="rgb(255,225,200)" transform="translate(100,20)" />
<rect x="0" y="0" width="20" height="20" fill="rgb(64,32,32)" transform="translate(120,20)" />
<rect x="0" y="0" width="20" height="20" fill="rgb(255,225,200)" transform="translate(140, 20)" />
...
<rect x="0" y="0" width="20" height="20" fill="rgb(255,225,200)" transform="translate(140,140)" />
<rect x="0" y="0" width="20" height="20" fill="rgb(64,32,32)" transform="translate(160,140)" />
</svg>
Tabuleiro com <defs> e <use>
<defs>
<rect id="preto" ... fill="rgb(64,32,32)" />
<rect id="branco" ... fill="rgb(255,225,200)" />
</defs>
Tabuleiro com <defs> e <use>
<defs>
<rect id="preto" ... fill="rgb(64,32,32)" />
<rect id="branco" ... fill="rgb(255,225,200)" />
<g id="quatroCasas">
<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>
Tabuleiro com <defs> e <use>
<defs>
<rect id="preto" ... fill="rgb(64,32,32)" />
<rect id="branco" ... fill="rgb(255,225,200)" />
<g id="quatroCasas">
<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>
<g id="filaDupla">
<use xlink:href="#quatroCasas" />
<use xlink:href="#quatroCasas" transform="translate(40)" />
<use xlink:href="#quatroCasas" transform="translate(80)" />
<use xlink:href="#quatroCasas" transform="translate(120)" />
</g>
</defs>
Tabuleiro com <defs> e <use>
<defs>
<rect
id="preto"
...
fill="rgb(64,32,32)"
/>
<rect
id="branco"
...
fill="rgb(255,225,200)"
/>
<g
id="quatroCasas">
<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>
<g
id="filaDupla">
<use
xlink:href="#quatroCasas"
/>
<use
xlink:href="#quatroCasas"
transform="translate(40)"
/>
<use
xlink:href="#quatroCasas"
transform="translate(80)"
/>
<use
xlink:href="#quatroCasas"
transform="translate(120)"
/>
</g>
<g
id="tabuleiro">
<use
xlink:href="#filaDupla"
/>
<use
xlink:href="#filaDupla"
transform="translate(0,40)"
/>
<use
xlink:href="#filaDupla"
transform="translate(0,80)"
/>
<use
xlink:href="#filaDupla"
transform="translate(0,120)"
/>
</g>
</defs>
28
linhas
<defs>
+ reuso! ~1400
chars
<rect id="preto" ... fill="rgb(64,32,32)" />
<rect id="branco" ... fill="rgb(255,225,200)" />
<g id="quatroCasas">
<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>
<g id="filaDupla">
<use xlink:href="#quatroCasas" />
<use xlink:href="#quatroCasas" transform="translate(40)" />
<use xlink:href="#quatroCasas" transform="translate(80)" />
<use xlink:href="#quatroCasas" transform="translate(120)" />
</g>
<g id="tabuleiro">
<use xlink:href="#filaDupla" />
<use xlink:href="#filaDupla" transform="translate(0,40)" />
<use xlink:href="#filaDupla" transform="translate(0,80)" />
<use xlink:href="#filaDupla" transform="translate(0,120)" />
</g>
</defs>
<use xlink:href="#tabuleiro" />
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
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)
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
1. Move para (100,100)
2. Desenha linha até (150,200)
3. Fecha figura (não faz nada)
(0,0)
(100,100)
(150,200)
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
1. Parte de (150,200)
2. Avança 50 unidades na horizontal
(0,0)
3. Fecha figura (desenha linha)
(
( (200,200)
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
1. Parte de (200,200)
2. Sobe 100 unidades na vertical (0,0)
3. Fecha figura (desenha linha)
( z (200,100)
( (
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)
1. Parte de (200,100)
(100,100) z (200,
2. Volta 50 un. e desce 50 un. z
3. Fecha figura (desenha linha) z (150,150)
(
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
(0,0)
(100,50)
(150,50)
1.(100,100)
Parte de (150,150) z (200,100) ( z
2. Desenha linha para (150,50) z
3. Desenha linhaz para (100,50)
4. Fecha figura (desenha linha)
(150,200) (200,200)
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
C100,100 250,100
<path
d="M100,200
C100,100 250,100 250,200 400,200
S400,300 400,200" ... /> 250,200
M100,200
Ponto de controle simétrico x1,y1
calculado automaticamente S400,300
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
(400,50)
<path
d="M 200,300
Q 400,50 600,300 (1000,300)
T 1000,300" (600,300)
... /> (200,300)
Ponto de controle simétrico
calculado automaticamente
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
ry y
rx
θ
x
laf = flag do arco maior, sf = sweep flag (veja exemplo)
x,y = coordenadas do ponto final
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
Exemplos de arcos simples
<path
d="M300,200
h-‐150
a150,150
0
1,0
150,-‐150
z"
fill="red"
stroke="blue"
stroke-‐width="5"
/>
<path d="M275,175 v-‐150 a150,150 0 0,0 -‐150,150 z"
fill="yellow" stroke="blue"
stroke-‐width="5" />
<path d="M600,350 l 50,-‐50
a25,25 -‐30 0,1 50,-‐25 l 50,-‐25
a25,50 -‐30 0,1 50,-‐25 l 50,0
a25,75 0 0,1 50,0 l 50,25
a25,100 30 0,1 50,25 l 50,50"
fill="none"
stroke="red"
stroke-‐width="5"
/>
Fonte: W3C (SVG spec)
<textPath>
<defs>
<path d="M100,200
C100,100 250,100 250,200
S100,300 100,200"
id="circulo" stroke="red"
stroke-‐width="1"
fill-‐opacity="0">
</path>
</defs>
...
<use xlink:href="#circulo" stroke-‐dasharray="5 5" />
<text font-‐size="15" x="100" dy="-‐10" id="texto"
font-‐family="monospace">
<textPath xlink:href="#circulo">
palavras que giram confundem as letras
</textPath>
</text>
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
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"
Atributo transform
Altera sistema de coordenadas relativo
[ ]
a11
a12
a13
matrix(a11,a12,a13,a21,a22,a23)
a21
a22
a23
matriz de transformações 0
0
1
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
translate()
<defs>
<g id="coords">
<line x1="10" y1="10"
x2="200" y2="10"/>
<line x1="10" y1="10"
x2="10" y2="200"/>
<text x="200"
y="20">x</text>
<text x="20"
y="200">y</text>
</g>
</defs>
<use xlink:href="#coords"
stroke="black" />
<use xlink:href="#coords"
[Link]
stroke="red"
transform="translate(100,100)" />
scale()
e rotate()
...
<use
xlink:href="#coords"
stroke="black"
/>
<use
xlink:href="#coords"
stroke="red" rotate_scale.svg
transform="translate(200,100)
rotate(30)
scale(1.5)"
/>
skew()
Distorção
de
cisalhamento
(graus)
...
<use
xlink:href="#coords"
stroke="black"
/>
<use
xlink:href="#coords"
[Link]
stroke="red"
transform="translate
(100,100)
skewX(50)"
/>
Em cascata
<g
transform="translate(-‐10,-‐20)">
<g
transform="scale(2)">
<g
transform="rotate(45)">
<g
transform="translate(5,10)">
<!-‐-‐
elementos
-‐-‐>
</g>
</g> Fonte:
W3C
(especificação
SVG)
</g>
<g
transform="translate(-‐10,-‐20)
</g>
scale(2)
rotate(45)
translate(5,10)">
<!-‐-‐
elementos
-‐-‐>
</g>
Transformações equivalentes
offset
Gradientes vetor perpendicular
x2
90%
<linearGradient>
Atributos x1/x2 e y1/y2
y1
10%
<radialGradient>
Atributos cx, cy e r
Valores relativos ao gráfico (0 - 100%)
Pontos de parada marcados com <stop>
<linearGradient x1="0" y1="0.1" x2="0.9" y2="0" id="arcoiris">
<stop offset="0" stop-‐color="rgb(255,0,0)" />
<stop offset="0.3" stop-‐color="rgb(180,180,0)" />
<stop offset="0.6" stop-‐color="rgb(0,180,0)" />
<stop offset="0.8" stop-‐color="blue" />
<stop offset="1" stop-‐color="rgb(128,0,220)" />
</linearGradient>
Máscaras <mask>
Multiplicação com luminância de fonte (imagem ou gráfico)
Referenciada em <image> com atributo mask
<defs>
<mask id="fishMask" x="0" y="0" width="300" height="150">
<image xlink:href="[Link]" ... />
</mask>
</defs>
<rect x="0" y="0" width="600" height="300" fill="aquamarine" />
<g transform="translate(100,50)">
<image xlink:href="[Link]" mask="url(#fishMask)" />
</g>
[Link]
[Link]
(fonte)
x = Resultado
Clipping <clipPath>
<defs>
<clipPath
id="poly">
<circle
r="152"
+
cx="254"
+
cy="245"/>
</clipPath>
</defs>
<image
xlink:href="[Link]"
x="0"
y="0"
height="500"
width="500"
clip-‐path="url(#poly)"/>
Faz o mesmo que <mask>
[Link]
de 1-bit (P & B) [Link]
Filtros <filter>
<defs>
<filter id="f2" x="-‐100" y="-‐100"
height="200" width="200">
<feGaussianBlur stdDeviation="50,0"
in="SourceGraphic"/>
</filter>
<filter
id="f1">
<feGaussianBlur
stdDeviation="5"
/>
</filter>
</defs>
<text font-‐size="48" ... filter="url(#f1)">Voce precisa de oculos?</text>
<polygon points="..." fill="red" fill-‐rule="evenodd"/>
<circle cx="250" cy="283" r="75" fill="blue" filter="url(#f1)" />
<image xlink:href="[Link]" ... filter="url(#f2)" />
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)"
/>
Símbolo
</symbol>
"transistorPNP"
sendo reusado
<marker
id="setaPNP"
viewBox="0
0
10
10"
como "seta" de
refX="0"
refY="5"
orient="auto"
uma polyline
markerUnits="userSpaceOnUse"
markerWidth="50"
markerHeight="50">
<use
xlink:href="#transistorPNP"
x="0"
y="0"
height="10"
width="10"
transform="rotate(-‐90,5,5)"
/>
</marker>
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/[Link]#twitter-‐icon" />
</svg>
SVG com JavaScript
<svg xmlns="[Link]
<script><![CDATA[
function acende(evt) {
[Link]("opacity", "1.0");
}
function apaga(evt) {
[Link]("opacity", "0.4");
}
]]></script>
<g>
<rect x="10" y="100" width="45" height="45"
fill="red" opacity="0.4"
onmouseover="acende(evt)" onmouseout="apaga(evt)"/>
<rect x="65" y="100" width="45" height="45"
fill="blue" opacity="0.4"
onmouseover="acende(evt)" onmouseout="apaga(evt)"/>
</g>
</svg>
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 = "[Link]
var xlinkNS = "[Link]
var circle = [Link](svgNS,"use");
[Link](null,"x",500);
[Link](null,"y",500);
[Link](xlinkNS, "href",
"#tabuleiro");
Criação dinâmica de objetos
(exemplo: parte 1 de 3)
function criarCirculo(evt) {
var randomX = [Link]( [Link]() *
[Link](null, "width"));
var randomY = [Link]( [Link]() *
[Link](null, "height"));
var color = "rgb(" + [Link]([Link]() * 256) +", "+
[Link]([Link]() * 256) +", "+
[Link]([Link]() * 256) +")";
randomY
...
randomX
height
Calculando valores para
criar círculos SVG em
width posições e cores aleatórias
script_3.js
Dimensões
do
SVG
Criação dinâmica de objetos
(exemplo: parte 2 de 3)
function
criarCirculo(evt)
{
...
var
svgNS
=
"[Link]
var
circulo
=
[Link](svgNS,
"circle");
[Link](null,
"cx",
randomX);
[Link](null,
"cy",
randomY);
[Link](null,
"fill",
color);
[Link](null,
"r",
[Link](null,
"r"));
[Link]("click",
criarCirculo,
false);
[Link](circulo);
}
Círculo criado com cx, cy e fill aleatórios
adicionado ao parentNode (<svg>) script_3.js
Criação dinâmica de objetos
(exemplo: parte 3 de 3)
<svg
xmlns="[Link]
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" script_3.svg
onclick="criarCirculo(evt)"/>
</svg>
SVG carrega o script e
cria três círculos iniciais
Criação dinâmica de objetos
(exemplo: parte 3 de 3)
<svg xmlns="[Link]
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" script_3.svg
onclick="criarCirculo(evt)"/>
</svg>
SVG carrega o script e
cria três círculos iniciais
Tesselações e outros algoritmos
com
SVG DOM
ou
[Link]
Diagrama de Voronoi
[Link]
Animação sem scripts
<set>
<animate> SMIL
<animateColor> animações declarativas
<animateMotion> (como em CSS3)
<animateTransform>
<rect x="50" y="50" fill="red" >
<animate attributeName="x" atributo que irá variar ("x")
to="200" valor final do atributo "x"
dur="3s" duração da animação
begin="click" evento que dispara a animação
fill="freeze" /> o que fazer no final
</rect>
<rect x="200" y="50" fill="blue" opacity="0.5"/>
Animação sem scripts
<set>
<animate> SMIL
<animateColor> animações declarativas
<animateMotion> (como em CSS3)
<animateTransform>
smil_2.svg
<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"/>
Animação sem scripts
<set>
<animate> SMIL
<animateColor> animações declarativas
<animateMotion> (como em CSS3)
<animateTransform>
smil_2.svg
<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"/>
<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="[Link]
<image
id="trends"
xlink:href="[Link]"
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>
Ex: o monstro leva
o mesmo tempo
em cada trecho
smil_3_values.svg
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
<svg xmlns="[Link]
<image id="openweb" xlink:href="[Link]" 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>
0s 0.4s 3.6s
smil_4_keyTimes.svg
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
<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
"/>
Exemplo <animateTransform>
(parte 1 de 3)
<svg
...>
<defs>
<rect
id="r"
x="50"
y="-‐10"
height="20"
width="75"
rx="10"
fill="blue"
/>
</defs>
<g
id="g">
<use
xlink:href="#r"
opacity="1"/>
</g>
</svg>
Um retângulo com
cantos arredondados
Exemplo <animateTransform>
(parte 2 de 3)
<g>
<use
xlink:href="#r"
opacity="1"/>
<use
xlink:href="#r"
opacity=".9"
transform="rotate(30)
scale(0.95)"
/>
<use
xlink:href="#r"
opacity=".8"
transform="rotate(60)
scale(0.9)"
/>
<use
xlink:href="#r"
opacity=".7"
transform="rotate(90)
scale(0.85)"
/>
<use
xlink:href="#r"
opacity=".6"
transform="rotate(120)
scale(0.8)"
/>
<use
xlink:href="#r"
opacity=".5"
transform="rotate(150)
scale(0.75)"
/>
<use
xlink:href="#r"
opacity=".4"
transform="rotate(180)
scale(0.7)
"
/>
<use
xlink:href="#r"
opacity=".35"
transform="rotate(210)
scale(0.65)"
/>
<use
xlink:href="#r"
opacity=".3"
transform="rotate(240)
scale(0.6)
"
/>
<use
xlink:href="#r"
opacity=".25"
transform="rotate(270)
scale(0.55)"
/>
<use
xlink:href="#r"
opacity=".2"
transform="rotate(300)
scale(0.5)"
/>
<use
xlink:href="#r"
opacity=".15"
transform="rotate(330)
scale(0.45)"
/>
</g>
"Escadaria"
em espiral
Exemplo <animateTransform>
(parte 3 de 3)
<svg
...>
<defs>
<rect
id="r"
x="50"
y="-‐10"
height="20"
width="75"
rx="10"
fill="blue"
/>
</defs>
<g
transform="translate(150,150)"
<animateTransform
attributeName="transform"
type="rotate"
begin="0s"
dur="1s"
calcMode="discrete"
values="330;300;270;240;210;180;150;120;90;60;30"
repeatCount="indefinite"/>
<use
xlink:href="#r"
opacity="1"/>
...
"Escadaria"
<use
xlink:href="#r"
opacity=".15"
transform="rotate(330)
scale(0.45)"
/>
girando
</g>
</svg>
<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
Exemplo: <animateMotion>
O alienígena em órbita
<path id="orbita" ...
elíptica acelera quando d="M 20,175
se aproxima do Sol A 244,220 0 1,0 493,175
A 244,220 0 0,0 20,175"/>
<image x="0" y="-‐100"
xlink:href="[Link]"
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
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 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 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)
Qual a alternativa?
• Google sugere usar polyfills
• Solução rápida mas ineficiente (scripts, +CPU)
Qual a alternativa?
• Google sugere usar polyfills
• Solução rápida mas ineficiente (scripts, CPU)
• Bibliotecas que geram SVG e CSS
[Link] [Link]
Qual a alternativa?
• Google sugere usar polyfills
• Solução rápida mas ineficiente (scripts, CPU)
• Bibliotecas que geram SVG e CSS
[Link] [Link]
• Animações CSS 3!
Alternativas W3C
Há uma sobreposição de soluções
HTML5 Canvas CSS
Fill/stroke
Clipping Filtros
DOM Sombras
Transform 2D
Caminhos Gradientes Animação Reflexos
Manipulação Patterns declarativa
de pixels Transformadas
Figuras Masks Transições + anim 3D
Image
Texto Estilos
Fontes
Curvas
Figuras SVG Símbolos
são objetos Grupos
XML
SVG + animações SMIL
<g class="monster-‐trends__left-‐arm">
<use xlink:href="#left-‐arm-‐background"
fill="pink" stroke="blue"/>
<use xlink:href="#left-‐arm-‐detail" fill="blue" />
<animateTransform attributeName="transform" dur="2s"
values="0 60 30;-‐45 60 35;0 60 30"
type="rotate"
repeatCount="indefinite"/>
</g>
<g
class="monster-‐trends__right-‐arm">
<use
xlink:href="#right-‐arm-‐background"
fill="yellow"
stroke="blue"/>
<use
xlink:href="#right-‐arm-‐detail"
fill="blue"
/>
<animateTransform
attributeName="transform"
dur="2s"
type="rotate"
values="0
120
30;45
120
35;0
120
30"
repeatCount="indefinite"/>
</g>
SVG + animações CSS3
<style
type="text/css">
.monster-‐trends__right-‐arm
{
animation:
right-‐arm-‐values
2s
infinite;
transform-‐origin:
30%
70%;
}
@keyframes
right-‐arm-‐values
{
0%
{
transform:
rotate(0deg);
}
50%
{
transform:
rotate(45deg);
}
100%
{
transform:
rotate(0deg);
}
}
</style>
<g
class="monster-‐trends__right-‐arm">
<use
xlink:href="#right-‐arm-‐background"
fill="yellow"
stroke="blue"/>
<use
xlink:href="#right-‐arm-‐detail"
fill="blue"
/>
</g>
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
• ...
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
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
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
Referências
Este material é baseado em Tutorial SVG (Helder da Rocha, 2010) disponível em
[Link]
Especificações
• SVG 1.1 Second Edition. [Link]/TR/SVG/ August 2011
• SVG 2 Working Draft. [Link] July 2015
• SMIL 3 [Link]/TR/SMIL/ December 2008
• CSS 2 [Link] April 2008
• DOM 3 [Link] April 2004
Livros sobre SVG
• Kurt Cagle. SVG Programming: the graphical Web. Apress. 2002.
• Frost, Goesser, Hirtzler. Learn SVG: The Web Graphics Standard. [Link]
• 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
• [Link] [Link] Biblioteca JavaScript para dados e gráficos (gera SVG)
• [Link] [Link] Biblioteca JavaScript para SVG
Exemplos
• Aplicação Orbitas (gera órbitas planetárias em SVG): [Link]/astronomia/orbitas escrito em
Java, XSLT e SVG. Código-fonte em [Link]
• Monstrinhos em SVG originalmente do site da conferência [Link] alterados para
fazer animações em olhos e braços; código disponível em GitHub (veja slide seguinte)
Este material pode ser usado de acordo
com os termos da licença Creative
Commons Attribution Share-Alike
helder@[Link]
Outros formatos para esta palestra em
[Link]
Código-fonte dos exemplos
[Link]
Você também pode gostar
- Posicionamento Relativo em SVG AninhadoAinda não há avaliaçõesPosicionamento Relativo em SVG Aninhado11 páginas
- Fundamentos de Gráficos Vetoriais SVGAinda não há avaliaçõesFundamentos de Gráficos Vetoriais SVG85 páginas
- Introdução ao Elemento <canvas> em HTML5Ainda não há avaliaçõesIntrodução ao Elemento <canvas> em HTML52 páginas
- Building Web Applications With SVG - Parte 1 TraduzidoAinda não há avaliaçõesBuilding Web Applications With SVG - Parte 1 Traduzido155 páginas
- Introdução ao Elemento Canvas no HTML5Ainda não há avaliaçõesIntrodução ao Elemento Canvas no HTML510 páginas
- Introdução ao CSS: Estrutura e EstilosAinda não há avaliaçõesIntrodução ao CSS: Estrutura e Estilos70 páginas
- Introdução ao CSS e Seletores BásicosAinda não há avaliaçõesIntrodução ao CSS e Seletores Básicos22 páginas
- Introdução ao VRML para Modelagem 3DAinda não há avaliaçõesIntrodução ao VRML para Modelagem 3D12 páginas
- Introdução ao CSS para Desenvolvimento WebAinda não há avaliaçõesIntrodução ao CSS para Desenvolvimento Web29 páginas
- Guia Completo de CSS3 para Web DesignAinda não há avaliaçõesGuia Completo de CSS3 para Web Design23 páginas
- Desenvolvimento de Site com HTML e CSSAinda não há avaliaçõesDesenvolvimento de Site com HTML e CSS21 páginas
- Introdução: Quais Softwares Eu Precisarei?Ainda não há avaliaçõesIntrodução: Quais Softwares Eu Precisarei?42 páginas
- Exercícios Práticos HTML5 + CSS3. Profa. Flávia Pereira de Carvalho - PDF Download GrátisAinda não há avaliaçõesExercícios Práticos HTML5 + CSS3. Profa. Flávia Pereira de Carvalho - PDF Download Grátis14 páginas
- Introdução ao CSS: Estilização de PáginasAinda não há avaliaçõesIntrodução ao CSS: Estilização de Páginas25 páginas
- Introdução ao CSS: O que é e Como UsarAinda não há avaliaçõesIntrodução ao CSS: O que é e Como Usar12 páginas
- Fundamentos de HTML e CSS para WebAinda não há avaliaçõesFundamentos de HTML e CSS para Web8 páginas
- Fundamentos de CSS para Web DesignAinda não há avaliaçõesFundamentos de CSS para Web Design4 páginas
- Introdução ao CSS para Desenvolvimento WebAinda não há avaliaçõesIntrodução ao CSS para Desenvolvimento Web60 páginas
- Introdução ao CSS: Estruturas e SintaxeAinda não há avaliaçõesIntrodução ao CSS: Estruturas e Sintaxe13 páginas
- Apostila de CSS 3 para Desenvolvimento WebAinda não há avaliaçõesApostila de CSS 3 para Desenvolvimento Web15 páginas
- Introdução ao CSS: Fundamentos e PráticasAinda não há avaliaçõesIntrodução ao CSS: Fundamentos e Práticas29 páginas
- Atributos de Preenchimento em GráficaAinda não há avaliaçõesAtributos de Preenchimento em Gráfica4 páginas
- Animações e Transformações em CSS3Ainda não há avaliaçõesAnimações e Transformações em CSS321 páginas
- Teoria do CSS: Propriedades e FormataçãoAinda não há avaliaçõesTeoria do CSS: Propriedades e Formatação12 páginas
- Tutorial de Jogos com HTML5 CanvasAinda não há avaliaçõesTutorial de Jogos com HTML5 Canvas15 páginas
- Curso de Desenvolvimento Web: HTML, CSS, JSAinda não há avaliaçõesCurso de Desenvolvimento Web: HTML, CSS, JS15 páginas
- Introdução ao CSS: Sintaxe e ExemplosAinda não há avaliaçõesIntrodução ao CSS: Sintaxe e Exemplos75 páginas
- Introdução ao CSS: Sintaxe e SeletoresAinda não há avaliaçõesIntrodução ao CSS: Sintaxe e Seletores70 páginas
- Introdução ao CSS e Seus SeletoresAinda não há avaliaçõesIntrodução ao CSS e Seus Seletores75 páginas
- Guia Completo de CSS para DesenvolvedoresAinda não há avaliaçõesGuia Completo de CSS para Desenvolvedores15 páginas
- Características e Vantagens do XMLAinda não há avaliaçõesCaracterísticas e Vantagens do XML6 páginas
- Fundamentos da Programação Web EaDAinda não há avaliaçõesFundamentos da Programação Web EaD4 páginas
- Introdução ao RDF Schema e OntologiasAinda não há avaliaçõesIntrodução ao RDF Schema e Ontologias44 páginas
- Javascript - Validação Email e Senha Usando Keyup - Stack Overflow em PortuguêsAinda não há avaliaçõesJavascript - Validação Email e Senha Usando Keyup - Stack Overflow em Português6 páginas
- Fundamentos de Programação e HTML/CSSAinda não há avaliaçõesFundamentos de Programação e HTML/CSS19 páginas
- Acessibilidade em E-commerce no BrasilAinda não há avaliaçõesAcessibilidade em E-commerce no Brasil31 páginas
- Formulário de Registro com Alpine.js e TailwindAinda não há avaliaçõesFormulário de Registro com Alpine.js e Tailwind16 páginas
- Fornecedores de Eletrônicos no BrasilAinda não há avaliaçõesFornecedores de Eletrônicos no Brasil66 páginas
- Gestão de Conteúdos Web em MoçambiqueAinda não há avaliaçõesGestão de Conteúdos Web em Moçambique126 páginas
- Curso de HTML5 com Gustavo GuanabaraAinda não há avaliaçõesCurso de HTML5 com Gustavo Guanabara7 páginas
- Libri degli Idoli: Consulta de RegistrosAinda não há avaliaçõesLibri degli Idoli: Consulta de Registros3 páginas