uma introdução prática Helder da Rocha

(1)

(2)

na vi s .com.br

Programa (4 dias)

•  Introdução

•  O que é SVG, ferramentas, suporte, plataformas

•  Parte I

•  1. Cores de preenchimento, es@los e traços

•  2. Figuras básicas: retângulo, círculo, elipse, polígono, linha

•  3. Estrutura do documento, símbolos, marcadores

•  Parte II

•  4. Caminhos, curvas Bézier e arcos

•  5. Texto, fontes e efeitos com texto

•  6. Filtros e efeitos gráﬁcos com gradient, paTern, clipping, masks

•  Parte III

•  7. Transformação de coordenadas

•  8. Manipulação de componentes SVG com JavaScript e DOM

•  9. Animação SVG com SMIL

•  Parte IV

(3)

na vi s .com.br hTp://www.youtube.com/watch?v=jHteVqfKhNo (hTp://www.helderdarocha.com.br)

O autor

(4)

na

vi

s

.com.br

O que é SVG?

• Scalable Vector Graphics

• Gráﬁco

• linhas, poligonos, ﬁguras, texto, ﬁltros, efeitos

• Escalável

• _{Zoom
eﬁciente
e
rápido}

• Pode ampliar e reduzir sem perder qualidade

• Vetorial

• Armazena a equação dos gráﬁcos (e não um mapa de

pixels como imagens bitmap)

• _{Imagens
maiores
ocupam
mesmo
espaço
que
imagens}

menores, e não perdem qualidade

• Pode tratar gráﬁcos separadamente (como objeto),

(5)

na

vi

s

.com.br

Vetores e bitmaps

Bitmap, 10kB

Bitmap ampliado, 250kB Vetor, 1kB

(6)

na

vi

s

.com.br

SVG é XML!

• Tudo expresso em XML

• Pode ser alterado em editor de textos

• Pode ser processado como texto

• Pode ser transformado via XSLT

• Pode ter objetos selecionados via XPath

• Pode ser validado com XML Schema

• Pode ter a aparência de objetos alteradas com CSS

• Pode ter comportamento de objetos alterado com

JavaScript e DOM

• Pode ser embu@do em HTML como texto

(7)

na

vi

s

.com.br

SVG é um formato gráﬁco

• Desenhos podem ser produzidos em ferramentas

gráﬁcas populares

• Corel Draw

• Adobe Illustrator

• OpenOﬃce

• Formato aberto e mul@plataforma

• Pode-‐se criar um SVG no Illustrator e fazer alterações

em um editor de texto e vice-‐versa

• Pode-‐se desenhar partes de um SVG no Corel Draw, e

usar XSLT para gerar gráﬁcos maiores usando as partes

como componentes básicos

(8)

na vi s .com.br

Tecnologias similares

•  Flash / Flex

•  Solução + popular de gráﬁcos vetoriais e animação 2D na Web

•  Proprietária

•  Perdendo espaço para tecnologias emergentes como SVG

•  HTML5 Canvas

•  Linguagem gráﬁca 2D baseada em JavaScript, embu@da em HTML com recursos similares a SVG

•  É possível interagir com SVG via HTML DOM

•  WebGL

•  Linguagem gráﬁca 3D em HTML 5 Canvas com sintaxe do OpenGL ES

•  Outros formatos de gráﬁco vetorial (obsoletos, em ex@nção, proprietários, incompatveis com a Web, etc.)

(9)

na

vi

s

.com.br

Origens do SVG

• SVG foi criado em 1998 a par@r de propostas enviadas à

W3C para a padronização de linguagem vetorial para a Web

•  Especiﬁcação ﬁnal 1.0 publicado em 2001

•  Especiﬁcação 1.1, 2a. ed, 2010: hAp://w3.org/Graphics/SVG

• As principais inﬂuências do SVG são

•  VML da Microsow (com HP, Autodesk e Macromedia)

•  PGML, da Adobe (com IBM, Netscape e Sun)

•  CSS e HTML (W3C)

• Primeira especiﬁcação escrita por Jon Ferraiolo (Adobe)

• A Adobe foi a empresa que mais inves@u no SVG nos

primeiros anos

•  Produziu o viewer mais popular (Adobe SVG Viewer)

(10)

na vi s .com.br

Mercado

• Mercado crescente

•  Muitas aplicações populares e plataformas suportam, produzem ou exportam SVG desde as primeiras versões

•  Exemplos: Adobe Illustrator, Corel Draw, OpenOﬃce.org, Blender, GIMP, Nokia S60, ...

•  Google indexa conteúdo SVG desde agosto de 2010.

• Suporte na@vo SVG em browsers (StatCounter):

•  Internet Explorer (46% mercado): SVG 1.1 a par@r do IE 9.0

•  Firefox (30%_{):
SVG
1.1
desde
2005
(parcial)}

•  Webkit: Chrome e Safari (18%): SVG 1.1 desde 2006 (parcial)

•  Opera (2%) SVG 1.1 desde versão 8.0, completo desde 10.0

•  Mobile* (4%): SVG 1.1/SVG 1.2 Tiny

(11)

na vi s .com.br

Plataformas SVG

• SVG Full

• SVG 1.0 e SVG 1.1 – quase iguais no que se refere à

componentes e sintaxe (em 1.1, o DTD é modular)

• Formato SVGZ (SVG comprimido com ZIP)

• SVG Mobile

• SVG 1.2 Tiny (SVGT) e SVG Basic (SVGB): des@nados a

disposi@vos móveis, tablets, etc.

• A 3GPP adotou SVG Tiny como padrão de mídia vetorial

• Em desenvolvimento

• SVG 2.0 (antes chamado de SVG 1.2) – tem recursos de

transformação 3D

(12)

na

vi

s

.com.br

Suporte SVG 1.1

•  Para testar, executar e exibir os exemplos demonstrados neste curso foram usados os seguintes browsers e plataformas

•  Plataforma Mac OS X (10.6) e Linux (Ubuntu)

•  Google Chrome 10.0 (Webkit)

•  Safari 4.04 e 5.03 (Webkit)

•  Firefox 4 (Beta) (Mozilla)

•  Opera 10.62 (Presto)

•  Plataforma Windows (XP)

•  Internet Explorer 8 (Windows XP) com diversos plug-‐ins JavaScript

•  Chrome 10, Opera 10, Firefox 4, Safari 4 (Windows XP)

•  Plataforma Windows 7

•  Internet Explorer 9

•  Ferramentas (mul@plataforma – usadas em Mac OS X)

•  Squiggle (SVG Viewer do framework Ba@k)

(13)

na

vi

s

.com.br

Suporte no Windows?

• Nenhum suporte na@vo: Internet Explorer 6, 7, 8

•  IE foi um dos primeiros browsers a ter suporte SVG 1.0 através do Adobe SVG Viewer Plugin (2000, Windows 98/2000/XP)

•  Mas Microsow nunca inves@u no suporte na\vo a SVG, e Adobe – proponente da especiﬁcação SVG 1.0 – deixou de dar suporte ao popular plug-‐in em janeiro de 2009.

•  Adobe Plugin ainda funciona em IE 6, 7, 8: parcial e com bugs

• Soluções usando o Internet Explorer

•  Usar Internet Explorer 9 (mas só roda em Vista ou Seven)

•  Plug-‐in SVGWeb do Google: hAp://code.google.com/p/svgweb/

•  Outros plug-‐ins que embutem SVG: hAp://www.amplesdk.com/

• Usar outros browsers no Windows

•  Melhor suporte (12/2010): Opera, Google Chrome, Firefox 4

(14)

na

vi

s

.com.br

Como criar um SVG em XML

• Elemento raiz

• <svg>

• Namespace

• hTp://www.w3.org/2000/svg

• Um gráﬁco SVG muito simples:

<?xml version="1.0" encoding="UTF-‐8"?>

width="100%" height="100%">

</svg>

(15)

na

vi

s

.com.br

Como exibir

•  Em um browser

•  Simplesmente abra o arquivo SVG em um browser

•  Em outras aplicações

•  Ferramentas gráﬁcas: Inkscape, Sketsa, Illustrator, Corel Draw

•  SVG Viewers (Apache Squiggle), interfaces de tablets, celulares, etc.

Opera

Chrome

Safari

Firefox

IE 8 com plug-‐in WebSVG do Google (Suporte naHvo em IE

(16)

na

vi

s

.com.br

Ba\k Squiggle

• Visualizador e editor SVG da Apache (open-‐source)

• Permite exibir SVG, depurar scripts, analisar código-‐fonte

(17)

na

vi

s

.com.br

Como vincular em HTML/XHTML

• A forma recomendada é usar <object>

•  <object src="svgdemo.svg"

classid="image/svg+xml" type="image/svg+xml"

height="300" width="400" />

• Outras formas também funcionam (mas não em

todos os browsers)

•  <img src="svgdemo.svg"

height="300" width="400" />

•  <embed src="svgdemo.svg"

type="image/svg+xml"

(18)

na vi s .com.br

Como embu\r

• Em XML

• Em HTML5

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="figura">

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> <circle r="50" cx="100" cy="100" fill="green"/>

</svg>

</xsl:template>

</xsl:stylesheet> <catalogo xmlns="http://www.acme.com/Catalogo"

xmlns:svg="http://www.w3.org/2000/svg"> <imagem>

<svg:svg width="200" height="200">

<svg:circle r="50" cx="100" cy="100" fill="green"/> </svg:svg> </imagem> </catalogo> <!doctype html> <html> <head>

<title>Hello SVG!</title> </head>

<body>

<h1>Hello SVG!</h1>

<svg>

<circle r="50" cx="50" cy="50" fill="green"/> </svg>

(19)

na

vi

s

.com.br

Como programar

• Intera\vidade: para interagir e manipular SVG em

tempo de exibição

• Scrip@ng em SVG 1.1 com W3C Document Object Model

Level 2 (DOM 2.0)

• Para programar o DOM, pode-‐se usar qualquer linguagem

suportada pelo viewer u@lizado

• JavaScript (ECMA Script) é a linguagem mais usada (e

única suportada pela maioria dos visualizadores SVG)

• Geração: Para gerar e manipular SVG antes da exibição

• Com Java, pode-‐se usar o popular framework open-‐source

Apache Ba@k:

hAp://xmlgraphics.apache.org/baHk

• Pode-‐se gerar SVG através de XSLT com amplo suporte em

diversas plataformas e linguagens

(20)

na

vi

s

.com.br

Geração de imagem

• Muitas vezes é necessário converter um SVG em imagem

•  Ex: para gerar uma visualização alterna@va a browsers que não suportam SVG

• Isto pode ser feito dinamicamente através do framework

Ba@k, em aplicações Web escritas em Java

• Ou executado via linha de comando usando o SVG

Rasterizer do Ba\k

•  http://xmlgraphics.apache.org/batik/tools/rasterizer.html

• Exemplo de uso: default é gerar PNG

•  O comando abaixo gera arquivo.png

java -‐jar batik-‐rasterizer.jar arquivo.svg

• Mas também é possível gerar outros formatos

•  O comando abaixo gera um JPEG

(21)

na

vi

s

.com.br

Soluções para IE e browsers an\gos

•  Fornecer uma imagem alterna@va quando um browser não suporta SVG é recomendado, mas há perdas:

•  Perde-‐se intera@vidade e animação

•  Zoom perde qualidade

•  Imagens geralmente são maiores

•  Alguns plug-‐ins e extensões tentam converter SVG em VML ou

Flash, usando JavaScript, para que funcionem em browsers an@gos e no Internet Explorer com mais recursos que imagens

•  A maioria ainda está em versões alfa ou beta, e não implementam vários recursos

•  Mas alguns já conseguem implementar intera@vidade e animação

•  Alterna@vas mais maduras (em 12-‐2010)

•  SVGWeb (Google Code)

•  Ample SDK

•  FlashCanvas (converte HTML 5 Canvas em Flash) + canvg (converte

(22)

na vi s .com.br

SVGWeb

•  hAp://code.google.com/p/svgweb/

•  Requer instalação de biblioteca JavaScript e hacks que usam Flash para exibir SVG

•  Browser precisa ter plug-‐in Flash

•  Suporte SVG 1.1 ainda limitado (versão alfa – 12/2010)

•  Suporta animações SMIL simples e scrip@ng

•  Código SVG pode ter que ser adaptado (evitar usar symbol, ﬁlter, etc.)

•  Se browser suportar SVG, o plug-‐in é ignorado

•  É preciso carregar via HTML (embu\r dentro de um bloco <script> ou usar <object> para vincular):

<html> <script src="src/svg.js" data-‐path="src" /> <body> <object src="svgdemo.svg" classid="image/svg+xml" width="800" height="600" id="mySVGObject" /> </body> Precisa carregar biblioteca antes de qualquer outro script!

(23)

na vi s .com.br

Ample SDK

•  hAp://www.amplesdk.com/

•  Também usa bibliotecas JavaScript

•  Mas suporta outros recursos além do SVG, como XUL, HTML 5, etc.

•  Suporta scripts rodando dentro do SVG (intera@vidade e animação)

•  Suporta gráﬁcos complexos (porém ainda não suporta alguns elementos – pode-‐se re-‐escrever o SVG com apenas elementos suportados)

•  É preciso carregar via HTML (embu@do ou externo)

<!DOCTYPE html>

<script type="text/javascript" src="ample/runtime-‐dev.js" />

<script type="text/javascript" src="ample/languages/svg/svg.js" /> </head>

<body>

(24)

na

vi

s

.com.br

FlashCanvas e canvg

• Na verdade são duas bibliotecas

•  É preciso usar as duas

• FlashCanvas converte HTML 5 Canvas em Flash

•  hAp://ﬂashcanvas.net/

• canvg converte SVG em HTML 5 Canvas

•  hAp://code.google.com/p/canvg/

• Para usar FlashCanvas apenas importe a biblioteca

• Para usar canvg, crie um <canvas> com um id, e inicialize

via uma chamada JavaScript

<script type="text/javascript" src="canvg/rgbcolor.js"/>

<script type="text/javascript" src="canvg/canvg.js"/> <script type="text/javascript">

uma introdução prática Helder da Rocha

Programa (4 dias)

O autor

O que é SVG?

•

Scalable Vector Graphics

•

Gráﬁco

•

linhas, poligonos, ﬁguras, texto, ﬁltros, efeitos

•

Escalável

•

Zoom eﬁciente e rápido

•

Pode ampliar e reduzir sem perder qualidade

•

Vetorial

•

Armazena a equação dos gráﬁcos (e não um mapa de

pixels como imagens bitmap)

•

Imagens maiores ocupam mesmo espaço que imagens

menores, e não perdem qualidade

•

Pode tratar gráﬁcos separadamente (como objeto),

Vetores e bitmaps

SVG é XML!

•

Tudo expresso em XML

•

Pode ser alterado em editor de textos

•

Pode ser processado como texto

•

Pode ser transformado via XSLT

•

Pode ter objetos selecionados via XPath

•

Pode ser validado com XML Schema

•

Pode ter a aparência de objetos alteradas com CSS

•

Pode ter comportamento de objetos alterado com

JavaScript e DOM

•

Pode ser embu@do em HTML como texto

SVG é um formato gráﬁco

•

Desenhos podem ser produzidos em ferramentas

gráﬁcas populares

•

Corel Draw

•

Adobe Illustrator

•

OpenOﬃce

•

Formato aberto e mul@plataforma

•

Pode-­‐se criar um SVG no Illustrator e fazer alterações

em um editor de texto e vice-­‐versa

•

Pode-­‐se desenhar partes de um SVG no Corel Draw, e

usar XSLT para gerar gráﬁcos maiores usando as partes

como componentes básicos

Tecnologias similares

Origens do SVG

•

SVG foi criado em 1998 a par@r de propostas enviadas à

W3C para a padronização de linguagem vetorial para a Web

•

As principais inﬂuências do SVG são

•

Primeira especiﬁcação escrita por Jon Ferraiolo (Adobe)

•

A Adobe foi a empresa que mais inves@u no SVG nos

primeiros anos

Mercado

•

• 

• 

• 

• 

• 

_{Zoom
eﬁciente
e
rápido}

• 

• 

• 

• 

_{Imagens
maiores
ocupam
mesmo
espaço
que
imagens}

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

Pode-‐se criar um SVG no Illustrator e fazer alterações

em um editor de texto e vice-‐versa

• 

Pode-‐se desenhar partes de um SVG no Corel Draw, e

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

Visualizador e editor SVG da Apache (open-‐source)

• 

Permite exibir SVG, depurar scripts, analisar código-‐fonte

• 

• 

• 

• 

• 

• 

• 

Para programar o DOM, pode-‐se usar qualquer linguagem

• 