Sistemas de Informa

1
Sistemas de Informação Geográficas

• Unidade 9. SVG
• Professor Cláudio Baptista
• 2004.2

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 ltimggt
• 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 -1996. Encerrou em 1997. Limitado, sem
  animação. http//www.softsource.com/svf
• DWF - Drawing Web Format. Plug-in pode ser usado
  com Javascript mas sem animação.
  http//www.autodesk.com/whip/
• Flash - Macromedias 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.
  
  http//www.macromedia.com/software/f
  lash

11
Vector Graphics Formats(2)

• VML - Vector Markup Language baseado em formato
  2D vector da Microsoft encerrado em 1998.
  Limitado à plataforma Microsoft.
  http//www.w3.org/TR/NOTE-VML
• WebCGM meta-arquivo de computação gráfica para
  Web formato binário. Voltado para visualização
  de desenhos técnicos e científicos.
  http//www.w3.org/Graphics/WebCGM
• VRML - Virtual Reality Modeling Language
  voltado para 3D, suporta 2D também complicado
  para apresentações simples.
  http//www.web3d.org

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
  http//www.w3.org/TR/2000/CR-SVG-20001102/
• 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 ltsvggt lt/svggt
• Todas as tags devem começar com tag de abertura
  e fechamento,ou uma tag vazil (ex. ltrect/gt)
• Tags devem estar aninhadas propriamente. nested
  properly. Por exemplo, ltggtlttextgtHello
  there!lt/textgtlt/ggt
• O documento deve começar com a declaração XML
  lt?xml version"1.0"?gt.
• O documento deve conter uma declaração DOCTYPE
  que contém os elementos permitidos

19
SVG exemplo(2)

• Documento SVG bem formado
  
  
• lt?xml version"1.0 standalone"no"?gt
  
  ltsvg width300px" height200px xmlns
  'http//www.w3.org/2000/svg gt
  
  ltdescgtlt!-- put a
  description here --gt
  lt/descgt
  ltggtlt!-- your graphic here --gt
  lt/ggt lt/svggt

20
SVG exemplo(1)

• Documento SVG válido
  
  
• lt?xml version"1.0 standalone"no"?gt
  lt!DOCTYPE svg PUBLIC "-//W3C//DTD SVG
  20001102//EN" "http//www.w3.org/TR/2000/CR-SVG-2
  0001102/DTD/svg-20001102.dtd"gt
  ltsvg width300px"
  height200px"gt
  
  ltdescgtlt!-- put a description
  here --gt lt/descgt
  
  ltggtlt!-- your graphic here --gt
  lt/ggt lt/svggt

21
Exemplo

• lt?xml version"1.0" standalone"no"?gt
  lt!DOCTYPE svg PUBLIC "-//W3C//DTD SVG
  20001102//EN" "http//www.w3.org/TR/2000/CR-SVG-
  20001102/DTD/svg-20001102.dtd"gt
  ltsvg width"5cm"
  height"4cm"gt
  ltdescgtFour separate
  rectangles lt/descgt
  ltrect
  x"0.5cm" y"0.5cm" width"2cm" height"1cm"/gt
  ltrect x"0.5cm" y"2cm" width"1cm"
  height"1.5cm"/gt ltrect x"3cm" y"0.5cm"
  width"1.5cm" height"2cm"/gt ltrect x"3.5cm"
  y"3cm" width"1cm" height"0.5cm"/gt lt/svggt

22
Grouping Element(1)

• A tag ltggt é 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 ltdescgt para prover
  descrição semântica do grupo.

23
Grouping Element(2)

• Cada grupo pode ser dado um id attribute para
  reusabilidade.
• Elementos ltggt podem estar aninhados.
• Desenhar um elemento que não está contido em
  nenhum elemento ltggt pode ser considerado um grupo
  unitário.

24
Outro Example

• lt?xml version"1.0" standalone"no"?gt
  lt!DOCTYPE svg PUBLIC "-//W3C//DTD SVG
  20001102//EN" "http//www.w3.org/TR/2000/CR-SVG-
  20001102/DTD/svg-20001102.dtd"gt
  ltsvg width"5cm"
  height"5cm"gt
  ltdescgtTwo groups, each of two rectangles
  lt/descgt ltg id"group1" style"fillred"gt
  ltrect x"1cm" y"1cm"
  width"1cm" height"1cm" /gt ltrect
  x"3cm" y"1cm" width"1cm" height"1cm" /gt
  lt/ggt ltg id"group2"
  style"fillblue"gt
  ltrect x"1cm" y"3cm" width"1cm" height"1cm" /gt
  ltrect x"3cm" y"3cm" width"1cm"
  height"1cm" /gt lt/ggt
  lt/svggt

25
A tag defs (1)

• O elemento ltdefsgt é um elemento container para
  ser referenciado por outros elementos.

26
A tag defs(2)

• ltsvg width"8cm" height"3cm"gt
  
  ltdescgtLocal URI references within ancestor's
  defs element lt/descgt
  
  ltdefsgt
  
  ltlinearGradient id"Gradient01"gt
  ltstop offset"20"
  style"stop-color39F"/gt
  ltstop offset"90" style"stop-colorF3F
  "/gt lt/linearGradientgt
  
  lt/defsgt
  
  ltrect x"1cm" y"1cm" width"6cm" height"1cm"
  style"fillurl(Gradient01)" /gt
  lt/svggt

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)

• ltimagegt indica que o conteúdo do arquivo será
  exibido num dado retângulo.
• ltimagegt 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 xlinkhref

29
O elemento image (2)

• ltimagegt não pode referenciar elementos dentro do
  documento SVG.
• Podemos aplicar transformações e estilos ao
  elemento ltimagegt

30
O elemento text

• lttextgt é 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
lttextgt exemplo

• lt?xml version"1.0" standalone"no"?gt
• lt!DOCTYPE svg PUBLIC "-//W3C//DTD SVG
  20001102//EN" "http//www.w3.org/TR/2000/CR-SVG-20
  001102/DTD/svg-20001102.dtd"gt
• ltsvg width"10cm" height"3cm"gt
• ltdescgtExample text01 - 'Hello, out
  there' in bluelt/descgt
• lttext x"2.5cm" y"1.5cm"
  style"font-familyVerdana font-size16pt
  fillblue"gt Hello, out there lt/textgt
• lt/svggt

32
Formas Básicas Suportadas

• Todas as formas básicas em SVG são representadas
  como elementos, com atributos associados.
• ltrectgt , ltcirclegt, ltellipsegt, ltlinegt.
• ltpolylinegt - define um conjunto de linhas retas
  conectadas.
• ltpolygongt - 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 ltsvggt

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 ltsvggt

37
Transformações

• Usa-se o elemento lttransformgt
• 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 ltpathgt

41
Paths(2)

• ltsvg width"4cm" height"4cm" viewBox"0 0 400
  400"gt lttitlegtExample
  triangle01- simple example of a 'path'lt/titlegt
  ltdescgtA path that draws a rectanglelt/descgt
  
  ltrect x"1" y"1" width"398" height"398"
  style"fillnone strokeblue"/gt
  
  ltpath d"M 100
  100 L 300 100 L 200 300 z" style"fillred
  strokeblue stroke-width3"/gt
  
  lt/svggt

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 ltsvggts onload event was triggered,
  when ltsvggts 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
• http//sis.cmis.csiro.au/svg/index.html
• Corel Draw 10
• http//www.corel.com/
• PhotoShop
• http//www.adobe.com/
• Vários Conversores de outros formatos gráficos
  para SVG.

49
Conversores

• SVG to HTML and Text extracts text from SVG
• SVG to PDF Apache Batik, FOP, FOP Developer
  Issues
• SVG inside PDF kevlindev perl script
• PDF to SVG - FreeSVG
• PPT / Visio / Word to SVG svgMaker
• SVG to PNG or JPEG - XML_svg2image
• SVG Slide Toolkit - Sun
• 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
  Reference
• Introduction to Scalable Vector Graphics
  XML.com (March 2001) complete intro more SVG
  articles at XML.com
• Jasc WebDraw
• Adobe SVG Zone get free SVG Viewer, tutorial,
  demos
• Overview high level Developer Tutorial
  detailed not Adobe Illustrator-specific
• Corel Smart Graphics Studio
• Apache Batik download, demos (requires Java Web
  Start)
• Batik samples (online access to bare directory)