uma introdução prática Helder da Rocha

Transcrição

1 uma introdução prática Helder da Rocha

2 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áficos 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 10. Geração de SVG com XSLT 2

3 O autor htp:// (htp://

4 O que é SVG? Scalable Vector Graphics Gráfico linhas, poligonos, figuras, texto, filtros, efeitos Escalável Zoom eficiente e rápido Pode ampliar e reduzir sem perder qualidade Vetorial Armazena a equação dos gráficos (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áficos separadamente (como objeto), permi@ndo animações 4

5 Vetores e bitmaps Vetor, 1kB Bitmap, 10kB Vetor ampliado, 1kB Bitmap ampliado, 250kB 5

6 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 Qualquer elemento pode ser animado 6

7 SVG é um formato gráfico Desenhos podem ser produzidos em ferramentas gráficas populares Corel Draw Adobe Illustrator OpenOffice 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áficos maiores usando as partes como componentes básicos 7

8 Tecnologias similares Flash / Flex Solução + popular de gráficos vetoriais e animação 2D na Web Proprietária Perdendo espaço para tecnologias emergentes como SVG HTML5 Canvas Linguagem gráfica 2D baseada em JavaScript, embu@da em HTML com recursos similares a SVG É possível interagir com SVG via HTML DOM WebGL Linguagem gráfica 3D em HTML 5 Canvas com sintaxe do OpenGL ES Outros formatos de gráfico vetorial (obsoletos, em ex@nção, proprietários, incompatveis com a Web, etc.) VML, PGML, WebCGM, EPS, AI, DWG, CGM, WMF, etc. 8

9 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 Especificação final 1.0 publicado em 2001 Especificação 1.1, 2a. ed, 2010: hap://w3.org/graphics/svg As principais influê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 especificaçã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) Introduziu suporte na@vo no Adobe Illustrator. 9

10 Mercado Mercado crescente Muitas aplicações populares e plataformas suportam, produzem ou exportam SVG desde as primeiras versões Exemplos: Adobe Illustrator, Corel Draw, OpenOffice.org, Blender, GIMP, Nokia S60,... Google indexa conteúdo SVG desde agosto de 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 * vários fabricantes, geralmente Webkit (Android, Palm, Symbian, Safari) 10

11 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 SVG Print (Canon, HP, Adobe e Corel) impressão 11

12 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 (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) SVG Viewer do editor Oxygen XML 12

13 Suporte no Windows? Nenhum suporte 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 especificação SVG 1.0 deixou de dar suporte ao popular plug- in em janeiro de 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:// Usar outros browsers no Windows Melhor suporte (12/2010): Opera, Google Chrome, Firefox 4 Firefox 3.x tem menos suporte (ex: não suporta animação SMIL) 13

14 Como criar um SVG em XML Elemento raiz <svg> Namespace htp:// Um gráfico SVG muito simples: svgdemo.svg <?xml version="1.0" encoding="utf- 8"?> <svg xmlns=" width="100%" height="100%"> <circle r="50" cx="100" cy="100" fill="green"/> </svg> 14

15 Em um browser Simplesmente abra o arquivo SVG em um browser Opera Chrome Safari Como exibir Firefox IE 8 com plug- in WebSVG do Google (Suporte nahvo em IE somente com IE9) Em outras aplicações Ferramentas gráficas: Inkscape, Sketsa, Illustrator, Corel Draw SVG Viewers (Apache Squiggle), interfaces de tablets, celulares, etc. 15

16 Ba\k Squiggle Visualizador e editor SVG da Apache (open- source) Permite exibir SVG, depurar scripts, analisar código- fonte como árvore, alterar código, etc. 16

17 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" height="300" width="400" /> 17

18 Como embu\r <xsl:stylesheet xmlns:xsl=" version="1.0"> <xsl:template match="figura"> <svg xmlns=" width="100%" height="100%"> <circle r="50" cx="100" cy="100" fill="green"/> </svg> </xsl:template> </xsl:stylesheet> Em XML <catalogo xmlns=" xmlns:svg=" <imagem> <svg:svg width="200" height="200"> <svg:circle r="50" cx="100" cy="100" fill="green"/> </svg:svg> </imagem> </catalogo> Em HTML5 <!doctype html> <html> <head> <meta charset="utf- 8"> <title>hello SVG!</title> </head> <body> <h1>hello SVG!</h1> <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg> </body> </html> 18

19 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 XSL- FO e APIs gráficas também têm opção de gerar SVG 19

20 Geração de imagem Muitas vezes é necessário converter um SVG em imagem Ex: para gerar uma visualização a browsers que não suportam SVG Isto pode ser feito dinamicamente através do framework em aplicações Web escritas em Java Ou executado via linha de comando usando o SVG Rasterizer do Ba\k 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 java - jar batik- rasterizer.jar - m image/jpeg arquivo.svg 20

21 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 ) SVGWeb (Google Code) Ample SDK FlashCanvas (converte HTML 5 Canvas em Flash) + canvg (converte SVG em HTML5 Canvas) 21

22 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, filter, 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! 22

23 Ample SDK hap:// Também usa bibliotecas JavaScript Mas suporta outros recursos além do SVG, como XUL, HTML 5, etc. Suporta scripts rodando dentro do SVG e animação) Suporta gráficos 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> <html> <head> <script type="text/javascript" src="ample/runtime- dev.js" /> <script type="text/javascript" src="ample/languages/svg/svg.js" /> </head> <body> <script type="application/ample+xml" src="svgdemo.svg" /> </body> </html> Usa <script> para carregar SVG Bibliotecas para SVG 23

24 FlashCanvas e canvg Na verdade são duas bibliotecas É preciso usar as duas FlashCanvas converte HTML 5 Canvas em Flash hap://flashcanvas.net/ canvg converte SVG em HTML 5 Canvas hap://code.google.com/p/canvg/ Para usar FlashCanvas apenas importe a biblioteca <script type="text/javascript" src="flashcanvas.js"/> 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"> function init() { canvg('tela', 'svgdemo.svg'); } </script>... <body onload="init()"> <canvas id="tela" width="800" height="600" /> </body> 24

25 Exercícios Experimente Testar se seu browser suporta SVG (como? independente, em HTML5?) Digitar o SVG mostrado como exemplo, alterá- lo e observar o que acontece Exemplos e recursos Veja vários exemplos de SVG em exemplos/ Biblioteca SVGWeb e outras em sohware/ Ferramentas Sketsa e Squiggle em sohware/ SVG Rasterizer em sohware/ 25