1 sistemas de informação geográficas unidade 9. svg professor cláudio baptista 2004.2
TRANSCRIPT
![Page 1: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/1.jpg)
1
Sistemas de Informação Geográficas
Unidade 9. SVG
Professor Cláudio Baptista2004.2
![Page 2: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/2.jpg)
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.
![Page 3: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/3.jpg)
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.
![Page 4: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/4.jpg)
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.
![Page 5: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/5.jpg)
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
![Page 6: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/6.jpg)
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.
![Page 7: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/7.jpg)
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).
![Page 8: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/8.jpg)
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.
![Page 9: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/9.jpg)
9
Vectors vs Bitmaps(4)
SVGPNG
![Page 10: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/10.jpg)
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
![Page 11: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/11.jpg)
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
![Page 12: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/12.jpg)
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.
![Page 13: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/13.jpg)
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.
![Page 14: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/14.jpg)
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.
![Page 15: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/15.jpg)
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
![Page 16: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/16.jpg)
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.
![Page 17: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/17.jpg)
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.
![Page 18: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/18.jpg)
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
![Page 19: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/19.jpg)
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>
![Page 20: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/20.jpg)
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>
![Page 21: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/21.jpg)
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>
![Page 22: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/22.jpg)
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.
![Page 23: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/23.jpg)
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.
![Page 24: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/24.jpg)
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>
![Page 25: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/25.jpg)
25
A tag defs (1)
O elemento <defs> é um elemento container para ser referenciado por outros elementos.
![Page 26: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/26.jpg)
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>
![Page 27: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/27.jpg)
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.
![Page 28: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/28.jpg)
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”
![Page 29: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/29.jpg)
29
O elemento image (2)
<image> não pode referenciar elementos dentro do documento SVG.
Podemos aplicar transformações e estilos ao elemento <image>
![Page 30: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/30.jpg)
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.
![Page 31: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/31.jpg)
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>
![Page 32: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/32.jpg)
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.
![Page 33: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/33.jpg)
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>
![Page 34: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/34.jpg)
34
Rendering Model(2)
Examples de viewports: 300x200 view port: 150x200 viewport:
![Page 35: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/35.jpg)
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.
![Page 36: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/36.jpg)
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>
![Page 37: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/37.jpg)
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
![Page 38: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/38.jpg)
38
Transformações
Translation Matrix:
Rotation Matrix:
Scaling Matrix:
![Page 39: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/39.jpg)
39
Transformações
![Page 40: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/40.jpg)
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>
![Page 41: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/41.jpg)
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>
![Page 42: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/42.jpg)
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.
![Page 43: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/43.jpg)
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).
![Page 44: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/44.jpg)
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).
![Page 45: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/45.jpg)
45
Exemplos(1)
Linear Gradient:
Radial Gradient:
![Page 46: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/46.jpg)
46
Exemplos(2)
Filter effects:
![Page 47: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/47.jpg)
47
DemosMap Example
Moscow Map Example
Animated Filter Effect
![Page 48: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/48.jpg)
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.
![Page 49: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/49.jpg)
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)
![Page 50: 1 Sistemas de Informação Geográficas Unidade 9. SVG Professor Cláudio Baptista 2004.2](https://reader036.vdocuments.net/reader036/viewer/2022062522/5706384c1a28abb8238f633c/html5/thumbnails/50.jpg)
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)