Post on 07-Apr-2016
1
Sistemas de Informação Geográficas
Unidade 9. SVG
Professor Cláudio Baptista2004.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)
SVGPNG
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
DemosMap 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)