1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista

2 Introdução Gráficos na Web tem diferentes usos:  A WWW contém milhões de páginas de dados.  Gráfico é um mecanismo importante para visualizar dados (mapas, diagramas, ilustrações, imagens, etc)  Gráfico é também um bom meio para envio de mensagens: anúncios, campanhas, etc  Pode ser usado para criar ambientes e mundos virtuais - virtual shops, games, simuladores.

3 Introdução Existem várias formas de representar gráficos na Web:  Bitmap – armasenando valores RGB de cada pixel na imagem.  Vetorial – armazenando as coordenadas de cada vetor e as cores nas quais serão exibidos.

4 Bitmap  Imagens bitmap são largamente usadas na Internet: anexadas a documentos HTML usando a tag  Principais formatos: GIF, JPEG, BMP.  Representados em formato binários.  Processamento de imagem é realizado no lado servidor e imagem´é transferida para cliente.

5 Vector Graphics  Usa o potencial das transformações, sistemas de coordenadas, unidades e formas baseadas em vetores  Exibição é feita no lado cliente – usando poder de processamento local.  Pode ser representado em formatos binário e texto.  Pode incluir imagens bitmap

6 Vetores vs Bitmaps(1)  Tamanho : vetores tendem a custar menos que quando representação por bitmaps.  Exemplo: uma linha azul diagonal numa janela 640X480 custa ~3000 bytes em Bitmap, e cerca de ~20 bytes em Vector Graphics  Bitmaps têm problemas com resolução e cores quando vistas e impressas em tipos de telas diferentes em tamanhos distintos.  Transformações podem ser aplicadas a vetores para resolver este problema.

7 Vetores vs Bitmaps(2)  Formato - Bitmaps são arquivos binários, vector based graphics podem ser representados como arquivos de texto.  Instrução de desenho é textual portanto pode ser selecionado e pesquisado. Links podem ser criados para qualquer parte de um vector.  Flexibilidade - Vectors são muito mais flexíveis à mudanças (transformações e estilos diferentes).

8 Vectors vs Bitmaps(3)  Animação é mais simples com vectors.  Edição é simples pois é texto XML  Interatividade – o uso de scripts permite uma interatividade muito boa.

9 Vectors vs Bitmaps(4)  SVG  PNG

10 Vector Graphics Formats  SVF - Simple Vector Format. Plug-in para desenho CAD Encerrou em Limitado, sem animação.  DWF - Drawing Web Format. Plug-in pode ser usado com Javascript – mas sem animação.  Flash - Macromedia’s Vector Graphics Format. O mais atualizado. Completo suporte a características multimídia. Ocupa grande parte do mercado (70%). É proprietário e binário, o que torna mais difícil a gerção dinâmica de gráficos.

11 Vector Graphics Formats(2)  VML - Vector Markup Language – baseado em formato 2D vector da Microsoft – encerrado em Limitado à plataforma Microsoft.  WebCGM – meta-arquivo de computação gráfica para Web – formato binário. Voltado para visualização de desenhos técnicos e científicos.  VRML - Virtual Reality Modeling Language – voltado para 3D, suporta 2D também – complicado para apresentações simples.

12 Other Vector Graphics Tools  APIs 2D combinadas com ActiveX – limitados a plataforma Microsoft.  Java2D - program com saída gráfica 2D – inserido em web pages como applet – ou Java Server Faces, mas requer mais habilidade em ambiente Java, se sofre dos problemas de Applet.

13 Motivação para SVG  Linguagem baseada em texto.  Simples para programar.  Tem a vantagem de ferramentas existentes - XML, CSS, XSL.  Poderosas capacidades gráficas – alta performace, suporte a animação  Padrão aberto (W3C).  Estensível - MathML por exemplo  Pesquisável.

14 SVG(1)  SVG é uma linguagem para descrever vetores 2D e mesclar gráficos vector/raster em XML  Desenvolvido pela W3C.  Suportado por várias empresas como Sun, Adobe, IBM, Oracle, Intergraph, Nokia, Siemens, Motorola, etc.  Plug-in é requerido.

15 SVG(2)  A especificação SVG specification está disponível em : /  Primeiro draft: 11/2/1999 SVG 1.0  SVG 1.0 Recommendation em 14/01/2003  Draft SVG 1.2: 27/10/2004

16 SVG – Conceitos(1)  SVG significa Scalable Vector Graphics  Em termos de gráficos, scalable significa não limitado a unidades fixas e únicas.  Em termos de Web scalable significa que uma tecnologia particular pode crescer para a um grande número de arquivos, usuários e aplicações.  SVG, sendo uma tecnologia de computação gráfica para Web, prover escala em ambos sentidos da palavra.

17 SVG – Conceitos(2)  Gráficos SVG são “escaláveis” em diferentes resoluções de display e espaço de cores.  O memo gráfico SVG pode ser posto em tamanhos diferentes numa mesma página Web, e re-usado em tamanhos diferentes em páginas diferentes.  Gráfico SVG pode ser aumentado em detalhes mais finos, ou ajudar àqueles com problemas de visão reduzida.

18 SVG  SVG é um documento XML  Código SVG está entre tags Todas as tags devem começar com tag de abertura e fechamento,ou uma tag vazil (ex. ) Tags devem estar aninhadas propriamente. nested properly. Por exemplo, Hello there! O documento deve começar com a declaração XML. O documento deve conter uma declaração DOCTYPE que contém os elementos permitidos

19 SVG exemplo(2)  Documento SVG bem formado : 

20 SVG exemplo(1)  Documento SVG válido: 

21 Exemplo  Four separate rectangles

22 Grouping Element(1)  A tag é o elemento para agrupar e nomear coleções de elementos de desenho.  Permite executar a mesma operação em todos os itens no grupo.  Pode ser usado com a tag para prover descrição semântica do grupo.

23 Grouping Element(2)  Cada grupo pode ser dado um id attribute para reusabilidade.  Elementos podem estar aninhados.  Desenhar um elemento que não está contido em nenhum elemento pode ser considerado um grupo unitário.

24 Outro Example  Two groups, each of two rectangles

25 A tag defs (1)  O elemento é um elemento container para ser referenciado por outros elementos.

26 A tag defs(2)  Local URI references within ancestor's ‘defs’ element

27 Referências em SVG  SVG suporta dois tipos de referências:  Local URI reference – o objeto referenciado está no mesmo documento.  Non-Local URI reference– o objeto referenciado é encontrado em outro documento.  O suporte à referências em SVG usa Xlink e Xpointer.

28 O elemento image(1)  indica que o conteúdo do arquivo será exibido num dado retângulo.  pode referenciar a um arquivo com imagem raster tal como PNG ou JPEG ou para um arquivo SVG.  Principais atributos: “x”, “y”, “width”, “height” e “xlink:href”

29 O elemento image (2)  não pode referenciar elementos dentro do documento SVG.  Podemos aplicar transformações e estilos ao elemento

30 O elemento text  é usado para especificar um texto a ser exibido com outros elementos gráficos.  Podemos aplicar transformation, clipping, masking, etc ao texto.  Fontes são especificadas como em CSS2.

31 exemplo Example text01 - 'Hello, out there' in blue Hello, out there

32 Formas Básicas Suportadas  Todas as formas básicas em SVG são representadas como elementos, com atributos associados. ,,,.  - define um conjunto de linhas retas conectadas.  - define uma forma fechada de segmentos de linhas conectados (poligonal fechada)  Cada forma pode tre atributos stroke, fill e transformation.

33 Modelo de Rendering(1)  Conteúdo SVG é pintado em um canvas 2D.  Rendering ocorre relativo a região especificada no canvas.  Esta região é chamada de SVG Viewport.  O tamanho da Viewport (height e width) é definido através de atributos da tag

34 Rendering Model(2)  Examples de viewports: 300x200 view port: 150x200 viewport:

35 Rendering Model(3)  SVG usa um "painters model" para rendering: Paint é aplicado em operações sucessivas no dispositivo de output – quando a área sobrepões uma outra, esta última é sobreposta.  Ordem de Rendering: First Comes First Painted  Suporta 3 tipos de elementos gráficos: Shapes, Text, Raster images.

36 Coordinate Systems  Viewport é especificado  O ponto 0,0 está no lado superior esquerdo  Onde o eixo x positivo segue para direita e o eixo y positivo segue para baixo  Um pixel no sistema de coordenadas corresponde a 1 pixel no viewport  O viewbox permite a imagem escalar para o tamanho disponível independente do tamanho  O viewbox é um atributo de

37 Transformações  Usa-se o elemento  Transformações 2D são representadas usando matrizes 3X3  Transformações comuns: translate(x,y) – estabelece um sistema de coordenadas novo cuja origem é (x,y). rotate(a) – rotaciona o sistema de coordenadas por graus ao redor da origem. scale(a,b) – escala o sistema de coordenadas

38 Transformações  Translation Matrix:  Rotation Matrix:  Scaling Matrix:

39 Transformações

40 Paths(1)  Paths são um conjunto de pontos que podem representar curvas (abertos ou fechados)  A geometria do path é definida em termos de moveto, lineto, curveto, arc, e closepath.  Path é representado em SVG pela tag

41 Paths(2)  Example triangle01- simple example of a 'path' A path that draws a rectangle

42 Animation(1)  SVG permite a mudança de um gráfico vetorial no tempo.  Há 2 maneiras para fazer animação em SVG:  Através de elementos de animação SVG  Através de acesso ao SVG DOM.

43 Elementos de Animação  ‘animate’, ‘set’, ‘animateMotion’, ‘animateColor’, ‘animateTransform’.  Animação introduz a dimensão time ao document.  Noção de Time em SVG: document begin, document end.(When ’s onload event was triggered, when ’s resources have been released).

44 Mais SVG Features  Gradients  Scripting: usando scripting languages para manipular eventos:  onclick, onactivate, onmousedown, onmouseup, onmouseover, onmousemove,  onmouseout, onload, onresize, onunload, e onrepeat.  Filter effects (Lighting, Color spaces, etc..).  Clipping e masking (alpha values).

45 Exemplos(1) Linear Gradient: Radial Gradient:

46 Exemplos(2) Filter effects:

47 Demos Map Example Moscow Map Example Animated Filter Effect

48 Ferramentas para autoria SVG  CSIRO SVG Toolkit : Corel Draw 10: PhotoShop  Vários Conversores de outros formatos gráficos para SVG.

49 Conversores SVG to HTML and Text – extracts text from SVGextracts text from SVG SVG to PDF – Apache Batik, FOP, FOP Developer IssuesBatikFOPFOP Developer Issues SVG inside PDF – kevlindev perl scriptkevlindev perl script PDF to SVG - FreeSVGFreeSVG PPT / Visio / Word to SVG – svgMakersvgMaker SVG to PNG or JPEG - XML_svg2imageXML_svg2image SVG Slide Toolkit - Sun SVG Slide Toolkit Graphical user interface to XML data Via declarative transformations such as XSLT Via scripting (loading XML data into the SVG User Agent and transforming using the DOM)

50 Recursos Main W3C SVG page; Robin Cover's page; ZVON SVG ReferenceW3C SVG pageCover's pageZVON SVG Reference Introduction to Scalable Vector Graphics – XML.com (March 2001); complete intro; more SVG articles at XML.com Introduction to Scalable Vector Graphics SVG articles Jasc WebDraw Adobe SVG Zone – get free SVG Viewer, tutorial, demos Adobe SVG Zone OverviewOverview – high level; Developer Tutorial – detailed; not Adobe Illustrator-specificDeveloper Tutorial Corel Smart Graphics Studio Apache Batik – download, demos (requires Java Web Start) Apache BatikJava Web Start Batik samples Batik samples (online access to bare directory)