Gráficos Vetoriais na Web com SVG

gráficos vetoriais na

helderdarocha helder@argonavis.com.br

Setembro/2015

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

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

O que é SVG?

Scalable Vector Graphics

O que é SVGScalable Vector Graphics

curvas, polígonos, texto elipses, retângulos, linhas

imagens, máscaras gradientes, padrões, filtros

símbolos, fontes

Ideal para

logotipos, desenhos diagramas, gráficos

ícones, fontes, sprites interfaces responsivas

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 bitmapsBitmap, 10kB

Bitmap ampliado, 10kB

Vetor, 1kB

Vetor ampliado, 1kB

Vetores vs bitmapsBitmap, 10kB

Bitmap maior, 250kB

Vetor, 1kB

Vetor ampliado, 1kB

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)

PlataformasSVG 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

Elemento raiz

<?xml version="1.0" encoding="UTF-‐8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="100px" width="100px"> <circle r="50" cx="100" cy="100" fill="green"/> </svg>

svgdemo.svg

Como criar um SVG

svgdemo.svg

100 px

pxDimensões (opcional)

Como criar um SVG

svgdemo.svg

(100,100)

r = 50

Sistema de coordenadas viewBox

origem + dimensões

Como criar um SVG

svgdemo.svg(0,0)

(50px,50px)

r = 25px

100 px

Sistema de coordenadas viewBox

origem + dimensões

Como gerar: ferramentas

XMLXSLT

Como exibirAbra em um browser!

Chrome

Safari

Firefox

circle.svg

Como exibir

Chrome

Safari

Firefox

Internet Explorercircle.svg

Qualquer plataforma

Como exibir

Chrome

Safari

Firefox

Internet Explorercircle.svg

Desktop ou Mobile

Como usar em HTML5 (1)

Três maneiras de referenciar<html> <head>...</head>

<body> <h1>SVG referenciado</h1> <p>Com Img</p> <img src="circle.svg"/> <p>Com Object</p> <object data="circle.svg"></object> <p>Com Embed</p> <embed src="circle.svg"/></body>

</html>comousar.html

Como usar em HTML5 (2)

<html> <head> <style> svg { border: red dashed 1px; height: 200px; width: 200px; } circle {fill: red} </style> </head> <body> <h1>SVG embutido</h1> <svg viewBox="0 0 200 200"> <circle r="50" cx="100" cy="100" fill="green" /> </svg>

</body> </html>

Embutir no código

comoembutir.html

Como usar em CSS<html> <head> <style> #circulo { background-‐image: url(circle.svg); 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>

comousaremcss.html

<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 3Máscara SVG em CSS 3

css3_mascara.html

SVG vs. CanvasObjetos 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

Estilos em SVGCSS: atributo style

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

<html> <style>.t1 {fill: green;}</style> <svg> <circle class="t1" ...> </svg> </html>

.t1 { fill: green;}

estilo.css

arquivo.svg

arquivo.html

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

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)

Fallbacks Em caso de erro, use tecnologia alternativa (HTML/CSS/PNG)

Polyfills• Modernizr + bibliotecas snap.svg, raphaël e d3.js• 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.)

PinturaDois atributos para pintar componentes

preenchimento (fill) contorno, ou traço (stroke)

PinturaDois 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) gradientestexturas (patterns)

Preenchimentofill (atributo ou CSS) = cor

fill-opacity = componente alfa (transparência) De 0 (transparente) a 1 (opaco).

fill.svg

Traçostroke: cor stroke-width: espessura 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="http://www.w3.org/2000/svg" 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>

traco.svg

Retângulo <rect>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.svg

Círculo <circle>cx, cy – coords. do centro (default: 0) r – raio (obrigatório)

<?xml-‐stylesheet type="text/css" href="circulos.css"?>

circle { stroke-‐width: 10; stroke-‐opacity: 0.5;}#c1 { fill: green; stroke: blue; fill-‐opacity: 0.6;}#c2 { fill: #f00; stroke: yellow;}

circulos.css

circulocss.svg

Linha simples <line>

x1, y1 – coords do primeiro ponto x2, y2 – coords do segundo ponto

line.svg

Elipse <ellipse>cx, cy – coordenadas do centro rx, ry – raios horizontal e vertical

ellipse.svg

Polígono aberto <polyline>points – lista de coords x,y com pontos da linha

polyline.svg

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

Texto <text>

• Não quebra linha! Use <tspan>: <text> <tspan>linha 1</tspan> <tspan x="0" dy="16">linha 2</tspan></text>

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 1linha 2

Imagens <image>Insere PNG ou JPEG em SVG

Ou clipping, mask, fill, patterns Namespace xlink opcional se embutido em HTML

Referências e IDsObjetos referenciáveis têm atributo id

Podem ser referenciados 'por objetos locais ou remotos <circle

id="obj1" .../>

Podem ser referenciados 'por objetos locais ou remotos

Referência pode ser direta via atributos XLink xlink:href <use xlink:href="#obj1" />

Podem ser referenciados 'por objetos locais ou remotos

Referência pode ser direta via atributos XLink xlink:href <use xlink:href="#obj1" />

Ou indireta, através da função url(), em atributos SVG <rect fill="url(#grad)" />

<defs> e <use>Elementos em bloco <defs> não são desenhados Para desenhar, referencie com <use>

Grupos <g>Trata conjunto de objetos como um Elementos herdam estilos e atributos Pode conter outros grupos

Por que usar <defs> e <use>?Tabuleiro de xadrez SVG

sem <defs> e <use>

64 qua

os: 32 + 32

66 linhas ~3500 chars

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>

+ reuso!<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 ~1400 chars

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

(100,100)

(150,200)

1. Move para (100,100)2. Desenha linha até (150,200)3. Fecha figura (não faz nada)

1. M100,100 L150,200 z 2. M100,100 L150,200 h50 z

(200,200)

1. Parte de (150,200)2. Avança 50 unidades na horizontal3. Fecha figura (desenha linha)

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

1. Parte de (200,200)2. Sobe 100 unidades na vertical3. Fecha figura (desenha linha)

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

(150,150)z

(100,100)

(200,z

1. Parte de (200,100)2. Volta 50 un. e desce 50 un.3. Fecha figura (desenha linha)

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)

1. Parte de (150,150) 2. Desenha linha para (150,50)3. Desenha linha para (100,50)4. Fecha figura (desenha linha)

Curvas Bézier cúbicasCurva 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

M100,200

C100,100 250,100

250,200400,200

S400,300Ponto de controle simétrico x1,y1

calculado automaticamente

Curvas Bézier quadráticasCurva 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

ArcosArco 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

rxθ x

Flags de arcosM-‐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" />

Fonte: W3C (SVG spec)

<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 transformAltera sistema de coordenadas relativo

matrix(a11,a12,a13,a21,a22,a23) matriz de transformações

translate(tx) ou translate(tx, ty) deslocamento da origemscale(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 a13a21 a22 a230 0 1

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" stroke="red" transform="translate(100,100)" />

translate.svg

scale()e rotate()

rotate_scale.svg

... <use xlink:href="#coords" stroke="black" /> <use xlink:href="#coords" stroke="red" 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" stroke="red" transform="translate (100,100) skewX(50)" />

skew.svg

Em cascata<g transform="translate(-‐10,-‐20)"> <g transform="scale(2)"> <g transform="rotate(45)"> <g transform="translate(5,10)"> <!-‐-‐ elementos -‐-‐> </g> </g> </g></g> <g transform="translate(-‐10,-‐20)

scale(2) rotate(45) translate(5,10)"> <!-‐-‐ elementos -‐-‐></g>

Fonte: W3C (especificação SVG)

Transformações equivalentes

Gradientes<linearGradient> Atributos x1/x2 e y1/y2

<radialGradient> Atributos cx, cy e r

Valores relativos ao gráfico (0 - 100%) Pontos de parada marcados com <stop>

offset x2 90%

y1 10%

vetor perpendicular

Máscaras <mask>Multiplicação com luminância de fonte (imagem ou gráfico)

Referenciada em <image> com atributo mask

TheFishMask.png (fonte)

TheFish.png

Resultadox =

Clipping <clipPath><defs> <clipPath id="poly"> <circle r="152" cx="254" cy="245"/> </clipPath></defs>

Faz o mesmo que <mask> de 1-bit (P & B)

ClippedImage.svgClippedMoon.svg

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="TheFish.png" ... filter="url(#f2)" />

Símbolos e marcadoresÍcones e setas reutilizáveis

Símbolo "transistorPNP" sendo reusado como "seta" de uma polyline

Image sprites e fontesSí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 com JavaScript<svg xmlns="http://www.w3.org/2000/svg"> <script><![CDATA[ function acende(evt) { evt.target.setAttribute("opacity", "1.0"); } function apaga(evt) { evt.target.setAttribute("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 + namespacesNecessá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");

Criação dinâmica de objetosfunction 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

heightCalculando valores para criar círculos SVG em posições e cores aleatórias

Dimensões do SVG

(exemplo: parte 1 de 3)

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óriosadicionado ao parentNode (<svg>)

script_3.svg

SVG carrega o script e cria três círculos iniciais

script_3.svg

SVG carrega o script e cria três círculos iniciais

Tesselações e outros algoritmos

Diagrama de Voronoi http://bl.ocks.org/mbostock/4060366

com SVG DOM

ou d3.js

Animação sem scripts<set><animate><animateColor><animateMotion> <animateTransform>

SMILanimaçõ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

smil_2.svg

(como em CSS3)

smil_2.svg

(como em CSS3)

<animate values>Animação ignora to/from e usa valores especificados

calcMode determina como os valores são usados (discreto, linear, uniforme, spline, etc.)

smil_3_values.svg

Ex: o monstro leva o mesmo tempo em cada trecho

values + keyTimeskeyTimes 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

smil_4_keyTimes.svg

values + keyTimes + keySplinesTrecho 1: movimento linear Trecho 2: começa lento, acelera no meio, depois desacelera Trecho 3: dispara no início e desacelera até parar

smil_5_keySplines.svg

<animateTransform>Porque <animate> não funciona com

funções de transformação de coordenadas

Exemplo <animateTransform> (parte 1 de 3)

Um retângulo com cantos arredondados

"Escadaria" em espiral

"Escadaria" girando

<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 elíptica acelera quando se aproxima do Sol

smil_6_motion.svg

SMIL vs. JSSMIL é 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. JSSMIL é 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)

• Solução rápida mas ineficiente (scripts, CPU)

• Bibliotecas que geram SVG e CSS

http://d3js.org/http://snapsvg.io/

• Solução rápida mas ineficiente (scripts, CPU)

• Bibliotecas que geram SVG e CSS

• Animações CSS 3!

http://d3js.org/http://snapsvg.io/

Alternativas W3C

HTML5 Canvas CSS

Gradientes

Filtros

Animação declarativa

Figuras

CaminhosManipulação

de pixels

Figuras são objetos

Estilos

Patterns

CurvasFontes

Transform 2D

Transformadas + anim 3D Masks Transições

Grupos

TextoImage

Fill/strokeClipping

Símbolos

Há uma sobreposição de soluções

Sombras

Reflexos

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>

SVG + animações CSS3

SVG2Working 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õesSVG 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ênciasEste 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)

helder@argonavis.com.br

https://github.com/argonavisbr/SVGExamples

http://www.argonavis.com.br/download/w3c_2015_svg.htmlOutros formatos para esta palestra em

Código-fonte dos exemplos

Este material pode ser usado de acordo com os termos da licença Creative Commons Attribution Share-Alike

Gráficos Vetoriais na Web com SVG

Technology

Transcript of Gráficos Vetoriais na Web com SVG

Condições Gerais e Especiais - SVG Prestamista

Macromedia Flash MX Márcio Bueno. Conteúdo Visão Geral Gráficos Bitmaps e Vetoriais Interface do Flash MX Área Principais da Interface.

Play svg! Utilizando vetores na web

Svg cartilha do operador v1 0 revista

FUNÇÕES VETORIAIS

Computação Gráfica Scalable Vector Graphics (SVG)jorge.cavalcanti/comput_graf06_SVG.pdf · Scalable Vector Graphics (SVG) •Gráficos de Rasterização vs. Gráficos Vetoriais

Geração de Gráficos Estatísticos como Gráficos Vetoriais ...20... · Tabela 1 – Tabela de Formas Básicas Lista de Figuras Figura 1 – Exemplo básico de documento XML Figura

Ferramentas Web, Web 2.0 e Software Livre em EVT · animação tradicional desenhada à mão (desenhos animados) usando tanto bitmap como gráficos vetoriais. Este manual foi realizado

Grandezas escalares e vetoriais

FUNÇÕES A VALORES VETORIAIS

An Original Occasion case study (BP) - CorelDRAW...adicionados os gráficos vetoriais dos elementos planejados, como cadeiras, mesas e adereços. O resultado final? A An Original Occasion

Campos vetoriais - UFPel

Funções Vetoriais - UTFPR

Dispositivos de Entrada e Saída - eduardosan.com · Interfaces gráficas • Existem duas categorias de terminais gráficos: – Gráficos vetoriais, usados essencialmente para desenhos

SVG Reference Sheet

Revisão: Campos Escalares e Vetoriais · Apêndice A Revisão: Campos Escalares e Vetoriais Neste Apêndice será apresentado um breve resumo sobre campos vetoriais, e que pode ser

2.2 Subespaços Vetoriais - mat.ufpb.br€¦ · 32 CAPÍTULO 2. ESPAÇOS VETORIAIS 2.2 Subespaços Vetoriais Sejam Vum espaço vetorial sobre R e Wum subconjunto de V.DizemosqueWé

Espaços Vetoriais

SVG Brasil! Projeto único sem nada igual!

Protótipos em svg+javascript