1 / 50

Sistemas de Informação Geográficas

Sistemas de Informação Geográficas. Unidade 9. SVG Professor Cláudio Baptista 2004.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)

gage
Download Presentation

Sistemas de Informação Geográficas

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 <img> • 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 - 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. http://www.macromedia.com/software/flash

  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 <svg> </svg> • Todas as tags devem começar com tag de abertura e fechamento,ou uma tag vazil (ex. <rect/>) • Tags devem estar aninhadas propriamente. nested properly. Por exemplo, <g><text>Hello there!</text></g> • O documento deve começar com a declaração XML <?xml version="1.0"?>. • O documento deve conter uma declaração DOCTYPE que contém os elementos permitidos

  19. SVG exemplo(2) • Documento SVG bem formado : • <?xml version="1.0 ”standalone="no"?> <svg width=”300px" height=”200px” xmlns = 'http://www.w3.org/2000/svg ’> <desc><!-- put a description here --> </desc> <g><!-- your graphic here --> </g> </svg>

  20. SVG exemplo(1) • Documento SVG válido: • <?xml version="1.0 ”standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg width=”300px" height=”200px"> <desc><!-- put a description here --> </desc> <g><!-- your graphic here --> </g> </svg>

  21. Exemplo • <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg width="5cm" height="4cm"> <desc>Four separate rectangles </desc> <rect x="0.5cm" y="0.5cm" width="2cm" height="1cm"/> <rect x="0.5cm" y="2cm" width="1cm" height="1.5cm"/> <rect x="3cm" y="0.5cm" width="1.5cm" height="2cm"/> <rect x="3.5cm" y="3cm" width="1cm" height="0.5cm"/> </svg>

  22. Grouping Element(1) • A tag <g> é 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 <desc> para prover descrição semântica do grupo.

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

  24. Outro Example • <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg width="5cm" height="5cm"> <desc>Two groups, each of two rectangles </desc> <g id="group1" style="fill:red"> <rect x="1cm" y="1cm" width="1cm" height="1cm" /> <rect x="3cm" y="1cm" width="1cm" height="1cm" /> </g><g id="group2" style="fill:blue"> <rect x="1cm" y="3cm" width="1cm" height="1cm" /> <rect x="3cm" y="3cm" width="1cm" height="1cm" /> </g> </svg>

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

  26. A tag defs(2) • <svg width="8cm" height="3cm"> <desc>Local URI references within ancestor's ‘defs’ element </desc> <defs> <linearGradient id="Gradient01"> <stop offset="20%" style="stop-color:#39F"/> <stop offset="90%" style="stop-color:#F3F"/> </linearGradient> </defs> <rect x="1cm" y="1cm" width="6cm" height="1cm" style="fill:url(#Gradient01)" /> </svg>

  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) • <image> indica que o conteúdo do arquivo será exibido num dado retângulo. • <image> 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) • <image> não pode referenciar elementos dentro do documento SVG. • Podemos aplicar transformações e estilos ao elemento <image>

  30. O elemento text • <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. <text> exemplo <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg width="10cm" height="3cm"> <desc>Example text01 - 'Hello, out there' in blue</desc> <text x="2.5cm" y="1.5cm" style="font-family:Verdana; font-size:16pt; fill:blue"> Hello, out there </text> </svg>

  32. Formas Básicas Suportadas • Todas as formas básicas em SVG são representadas como elementos, com atributos associados. • <rect> , <circle>, <ellipse>, <line>. • <polyline> - define um conjunto de linhas retas conectadas. • <polygon> - 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 <svg>

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

  37. Transformações • Usa-se o elemento <transform> • 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 <path>

  41. Paths(2) • <svg width="4cm" height="4cm" viewBox="0 0 400 400"> <title>Example triangle01- simple example of a 'path'</title> <desc>A path that draws a rectangle</desc> <rect x="1" y="1" width="398" height="398" style="fill:none; stroke:blue"/> <path d="M 100 100 L 300 100 L 200 300 z" style="fill:red; stroke:blue; stroke-width:3"/> </svg>

  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 <svg>’s onload event was triggered, when <svg>’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 : 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)

More Related