Antonio Marcos Almeida Ferreira FERRAMENTA SIG E SVGMAPPER: DESENVOLVIMENTO DE UM MAPA SVG PARA WEB.

Transcrição

1 Antonio Marcos Almeida Ferreira FERRAMENTA SIG E SVGMAPPER: DESENVOLVIMENTO DE UM MAPA SVG PARA WEB. Palmas 2006

2 ii Antonio Marcos Almeida Ferreira FERRAMENTA SIG E SVGMAPPER: DESENVOLVIMENTO DE UM MAPA SVG PARA WEB. "Trabalho de Estágio apresentado como requisito parcial da disciplina Estágio Supervisionado em Sistemas de Informação do curso de Sistemas de Informação, sob orientação do Prof. Jackson Gomes de Souza. Palmas 2006

3 iii ANTONIO MARCOS ALMEIDA FERREIRA FERRAMENTA SIG E SVGMAPPER: DESENVOLVIMENTO DE UM MAPA SVG PARA WEB. "Trabalho de Estágio apresentado como requisito parcial da disciplina Estágio Supervisionado em Sistemas de Informação do curso de Sistemas de Informação, sob orientação do Prof. Jackson Gomes de Souza. Aprovada em Julho de 2006 BANCA EXAMINADORA Prof. Jackson Gomes de Souza Centro Universitário Luterano de Palmas Prof. Cristina D`ornellas Filipakis Centro Universitário Luterano de Palmas Prof. M. Sc Ricardo Marx Costa Soares de Jesus Centro Universitário Luterano de Palmas Palmas 2006

4 iv SUMÁRIO 1 INTRODUÇÃO REVISÃO DE LITERATURA Cartografia Digital SIG (Sistemas de Informação Geográfica) Bancos de Dados Geográficos Base de Dados Alfanumérica Base de Dados Espacial Sensoriamento Remoto Representações Computacionais Representações Matriciais Representações Vetoriais GPS Sistemas SIG mais comumente utilizados ArcMap Quantum GIS SPRING extensible Markup Language Sintaxe Elementos Atributos Validação Namespaces "Parsing" de XML (DOM e SAX) Scalable Vector Graphics Sistemas de Coordenadas Imagens Vetoriais Imagens Rasterizadas...36

5 v Agrupamento pelo elemento <g> Elemento <defs> Elemento <symbol> Path Formas Filtros Gradientes Browsers e Visualizadores ECMAScript MATERIAL E MÉTODOS Local e Período Materiais Softwares Hardware Fontes Bibliográficas Metodologia RESULTADOS E DISCUSSÃO Ferramentas SIG e Base de Dados Geográfica Ferramenta SVGMapper Documento SVG e apresentação em browser Outras ferramentas para conversão de dados geográficos em SVG Map2SVG SVG Builder MapView SVG CONCLUSÕES REFERÊNCIAS BIBLIOGRÁFICAS... 69

6 vi LISTA DE FIGURAS Figura 1 Arquitetura de um SIG (Fonte: adaptada do MEDEIROS & CÂMARA, 1996)...14 Figura 2 Base de Dados Alfanumérica (Fonte: adaptada do SOTO & SILVA, 2006) Figura 3 Base de Dados Espacial (Fonte: adaptada do SOTO & SILVA, 2006)...18 Figura 4 Componente de um Sistema Sensor (Fonte: adaptada do MOREIRA, 2001) Figura 5 Pontos em uma representação vetorial...22 Figura 6 Linha em uma representação vetorial Figura 7 Área em uma representação vetorial...23 Figura 8 - Feição do estado do Tocantins sendo Editada no ArcMap...25 Figura 9 Feição do estado do Tocantins sendo Editada no Quantum GIS Figura 10 Feição da cidade de Porto Nacional sendo Editada no Spring Figura 11 Elementos em um documento XML...30 Figura 12 Atributos em um documento XML...31 Figura 13 Exemplo de DTD para um documento XML...31 Figura 14 Namespace em um documento XML Figura 15 Modelo hierárquico utilizado pelo DOM...33 Figura 16 Sintaxe básica de um Documento SVG...34 Figura 17 Sistema de Coordenas (Fonte: adaptada HOPGOOD et al, 2002)...35 Figura 18 Imagem sendo redimensionada sem perda de qualidade Figura 19 Imagem em diferentes resoluções gráficas Figura 20 Ampliação de um ponto em uma imagem bit mapped Figura 21 Agrupamento pelo elemento <g>...39 Figura 22 Elemento <defs> Figura 23 Elemento <symbol> Figura 24 Elemento <Path>...42 Figura 25 Formas em SVG....42

7 vii Figura 26 Codificação do elemento linha...43 Figura 27 Codificação do elemento retângulo...44 Figura 28 Codificação do elemento ellipse Figura 29 Aplicação de Filtro...45 Figura 30 Aplicação do filtro <femerge> em SVG Figura 31 Aplicação Gradiente Linear...46 Figura 32 Aplicação Gradiente Radial...47 Figura 33 Imagens SVG apresentadas em diferentes browsers...47 Figura 34 Ferramenta SIG ArcMap...52 Figura 35 Edição de dados alfanuméricos em uma ferramenta SIG Figura 36 Arquivos base e shapefile Figura 37 Visualização no Banco de Dados Access Figura 38 Conversão dos dados geográficos em um documento SVG...56 Figura 39 Código Fonte do Mapa SVG Figura 40 Código Fonte JavaScript...60 Figura 41 Apresentação em browser do Mapa do Tocantins...61 Figura 42 Demonstração de um mapa em SVG (Fonte: MAP2SVG, 2006) Figura 43 Imagem do Software SVG Builder (Fonte: SVGBUILDER, 2006)...64 Figura 44 Imagem do estado do Tocantins convertida pelo MapViewSVG....66

8 viii LISTA DE TABELAS Tabela 1 Tipos de Análises espaciais (Fonte: adaptada da DPI, 2006a) Tabela 2 Modelos existentes em uma representação Matricial (Fonte: DPI, 2006a)....20

9 ix LISTA DE ABREVIATURAS E SIGLAS API Application Programming Interface DOM Document Object Model ECMA European Computer Manufacture s Association GML Geometric Markup Language GPL General Public License GPS Global Positioning System HTML Hypertext MarkupLanguage INPE Instituto Nacional de Pesquisas Espaciais PNG - Portable Network Graphics SAX Simple API para XML SVG Scalable Vector Graphics SIG Sistema de Informação Geográfica TIN Triangulated Irregular Netwirk W3C World Wide Web Consortium XML extensible Markup Language

10 x RESUMO Este trabalho tem como objetivo a criação de uma base de dados geográfica, a utilização de uma ferramenta SIG para criação de mapas geográficos e a utilização da ferramenta SVGMapper para converter os dados desenvolvidos em uma ferramenta SIG em um documento SVG. Serão descritos os tipos de ferramentas computacionais utilizadas em Geoprocessamento (sistemas como: Cartografia Digital, Sensoriamento Remoto por Satélites, Sistema de Posicionamento Global), visto que essas tecnologias são empregadas para a coleta e análise dos dados geográficos. A estrutura desse trabalho conterá exemplos da aplicação de ferramentas SIG para o desenvolvimento de sistemas geográficos e da utilização da ferramenta SVGMapper para a conversão destes dados, bem como da utilização de ECMAScript para criação de documentos SVG interativos e dinâmicos. Palavras Chaves: SIG, SVGMapper, SVG, XML.

11 11 1 INTRODUÇÃO Com a evolução da tecnologia de software e hardware para gerenciamento de informações e processamento de dados de imagens geográficas, surge a área conhecida como Geoprocessamento, que abrange um conjunto de tecnologias para coleta, processamento e análise de informações geográficas. Os sistemas em Geoprocessamento são compostos por soluções em hardware, software e peopleware, que juntos se constituem em poderosas ferramentas para análise de dados e tomada de decisão. Dentre as ferramentas utilizadas em sistemas de Geoprocessamento, destacam-se os sistemas SIG (Sistemas de Informação Geográfica), Sensoriamento Remoto e GPS (Sistema de Posicionamento Global). Estas ferramentas são utilizadas para a coleta, armazenamento de dados alfanuméricos e imagens espaciais, análise dos dados arquivados e disponibilização das informações coletadas. Ao decorrer deste trabalho será apresentada a definição e a característica dessas ferramentas geográficas. Dentre as principais aplicações encontram-se: Gestão Municipal; Meio Ambiente; Planejamento Estratégico de Negócios e Agronegócios. Para compreender de forma cada vez mais detalhada os processos ambientais que ocorrem no mundo e, devido à necessidade em compartilhar dados geográficos entre diferentes centros de pesquisa e instituições em geral, surgiram os centros de dados geográficos, ou seja, bancos de dados geográficos espaciais que estão compartilhados em diferentes regiões. A criação de soluções que permitem o acesso remoto a esses dados são diversas, dentre essas tecnologias que auxiliam na consulta e análise dessas informações de forma remota está o SVG. O SVG (Scalable Vector Graphics) é uma linguagem para descrição de gráficos bidimensionais através de documentos XML. O SVG permite três tipos de objetos gráficos: formas gráficas vetoriais, imagens e texto. Além disso, gráficos SVG podem ser interativos e

12 12 dinâmicos, permitindo, por exemplo, que o usuário movimente ou crie objetos e também que a imagem possa ser modificada através de um programa em linguagem de script (como ECMAScript). Pelas suas características, o SVG se apresenta como uma tecnologia bastante atrativa para a visualização de informações geográficas na Internet, uma vez que as imagens geográficas serão disponibilizadas por meio de representações computacionais vetoriais. O trabalho está estruturado da seguinte forma: na seção Revisão de Literatura são apresentadas ferramentas SIG, bem como seus conceitos e aplicações. Em seguida é apresentado o conceito sobre a linguagem XML, assim como sua estrutura e aplicação. Finalizando esta seção será apresentada a linguagem SVG cujas formas, filtros, gradientes, estrutura, atributos, entre outras funcionalidades estão incorporadas na linguagem XML. Na seção Resultados e Discussão serão apresentados os resultados obtidos no processo de desenvolvimento de um mapa SVG, visto que foi necessário todo o estudo apresentado na seção Revisão de Literatura para a compreensão e conclusão deste trabalho.

13 13 2 REVISÃO DE LITERATURA Ao decorrer do trabalho serão apresentadas algumas das tecnologias utilizadas no processo de desenvolvimento de mapas geográficos. Para desenvolver um mapa geográfico seja geo-referenciado 1 ou cartográfico 2, é necessária a compreensão de como esses mapas são desenvolvidos em ferramentas computacionais e quais os tipos de tecnologias existentes são empregadas neste processo. Dentre essas ferramentas computacionais, será utilizada a ferramenta SIG: ArcGIS; uma vez que esta ferramenta dispõe de todos os recursos necessários para o desenvolvimento de um mapa e integração com a ferramenta SVGMapper. 2.1 Cartografia Digital A Cartografia Digital está relacionada com diversas tecnologias utilizadas em sistemas de geoprocessamento. O geoprocessamento pode ser definido como um conjunto de tecnologias voltadas à coleta e ao tratamento de informações espaciais para um objetivo específico (DPI, 2006a). Assim, as atividades que envolvem o geoprocessamento são executadas por sistemas específicos para cada aplicação. Em Geoprocessamento as tomadas de decisões são mais precisas devido aos dados que estão contidos em sua base de dados espacial, cuja característica essencial deste sistema é o cruzamento de dados que estejam em tabelas, gráficos ou textos. A manipulação, coleta e armazenamento de dados e imagens espaciais são realizados através de ferramentas computacionais, que utilizam tecnologias de Sistemas de Informação Geográfica, Sensoriamento Remoto e Sistema de Posicionamento Global. Ao decorrer deste trabalho será apresentada a definição e característica de cada uma destas ferramentas. 1 Procedimento para georeferenciar uma imagem relativamente a um sistema de coordenadas conhecido, por exemplo, latitude/longitude Universal Mercator Transverse ou sistema de coordenadas militares (GASA, 2006). 2 Mapas que não apresentam um sistema de coordenadas geo-referenciado.

14 SIG (Sistemas de Informação Geográfica) As ferramentas computacionais para geoprocessamento são criadas com o objetivo de facilitar a análise, gestão e representação dos fenômenos que possam vir a ocorrer no espaço, visto que a partir destas análises é possível o desenvolvimento de banco de dados georeferenciados. Um fator importante em sistemas de informações geográficas é sua capacidade de realizar análises geográficas a partir da sua base de dados, cuja estrutura é composta por componentes de entrada e integração de dados, funções de consulta e análise espacial, visualização e plotagem 3, e banco de dados geográficos (Figura 1) (MEDEIROS & CÂMARA, 1996). Os softwares utilizados em sistemas de informação geográfica vão desde sistemas copyright a sistemas open source, entre esses sistemas estão: ArcGIS (ArcEditor, ArcView, ArcInfo), Spring, TerraView, GRASS, JUMP e Quantum GIS. Figura 1 Arquitetura de um SIG (Fonte: adaptada do MEDEIROS & CÂMARA, 1996). Como pode ser observado na Figura 1, têm-se: 1. Interface Conjunto de funções que possibilitam a interação com o usuário, serve como suporte à entrada e integração com os dados. 3 Desenhar em uma forma gráfica (circulo, elipse, etc) um mapa, por meio de equações matemáticas com as suas respectivas coordenadas geográficas.

15 15 2. Entrada e Integração de Dados Refere-se à obtenção dos dados de diferentes meios como sensoriamento remoto ou dados de campo, e como esses dados serão integrados em uma mesma base de dados geográfica. 3. Consulta e análise espacial Refere-se à manipulação do conjunto de dados coletados por meio de softwares computacionais, cujo o objetivo é gerar novas informações, ou seja, nesta etapa ocorrem as operações de pré-processamento, de classificação e de pós-processamento; 4. Visualização e Plotagem Refere-se à visualização e plotagem dos dados espaciais ou alfanuméricos. 5. Banco de Dados Geográfico Conjunto de dados coletados e arquivados em uma mesma base, onde é possível armazenar informações espaciais e não-espaciais. Por meio dos dados que foram coletados e arquivados em uma base de dados geográfica (Figura 1), é possível realizar análises espaciais como as descritas na ilustração da Tabela 1: Tabela 1 Tipos de Análises espaciais (Fonte: adaptada da DPI, 2006a). Análise Exemplo Localização Quais as áreas com maior produtividade? Condição Qual o número de pessoas que residem em Palmas? Padrões Qual a distribuição de casos de hepatite em Palmas? Tendência O que ocorreu, uma vez que esta terra era produtiva a 2 anos atrás? Roteamento Qual o caminho mais rápido? Modelos Qual será o impacto no ambiente de Palmas, se continuar ocorrendo queimadas? Um exemplo de análise espacial seria a verificação em mapa cartográfico para descoberta dos principais focos onde ocorreram casos de pessoas com dengue na cidade de Palmas, desta forma seria possível identificar em qual área da cidade concentra-se o mosquito transmissor, possibilitando realizar um combate mais eficiente ao mosquito nas áreas principais. Desta forma torna-se possível conter o alastramento para outras localidades com mais eficiência e tratar as pessoas nas áreas afetadas.

16 16 Um sistema SIG deve fornecer informações e dispor de ferramentas para o desenvolvimento de mapas, suporte a um banco de dados e suporte a análises de fenômenos espaciais. Desta forma as duas principais características que um Sistema de Informação Geográfica deve dispor são (MOREIRA, 2001): Suporte à aquisição de dados que estão contidos em diferentes fontes de informações espaciais e a integração dessas informações em uma única base de dados (imagens cartográficas, imagem de satélites, dados censitários, dados de cadastro rural, entre outros) para que estes dados sejam analisados e manipulados em um sistema computacional. Permitir, através de um sistema computacional, que as informações coletadas sejam cruzadas, e que seja possível realizar tarefas como consultas, recuperação, plotagem e visualização dos dados que foram obtidos a partir da combinação das informações que foram adicionadas ao banco de dados geográfico Bancos de Dados Geográficos Base de Dados Alfanumérica O ponto inicial para formação de uma base de dados alfanumérica são os dados coletados em campo, ou seja, dados sensitivos. A quantidade de dados arquivados sobre uma região ou localidade pode ser enorme, o que torna a forma de arquivamento em papéis inviável para uma posterior pesquisa. A utilização de bancos de dados de grande porte é essencial devido à sua capacidade de armazenamento. A integração das bases de dados e a disponibilização das informações obtidas pelo cruzamento dos dados coletados são fatores que tornam uma base de dados alfanumérica um sistema indispensável para qualquer instituição (ROCHA, 2000). Em seguida observa-se a arquitetura de uma base de dados alfanumérica.

17 17 Figura 2 Base de Dados Alfanumérica (Fonte: adaptada do SOTO & SILVA, 2006). Acompanhando a Figura 2 observa-se: uma base de dados digital onde é possível realizar consultas e cruzar dados com a finalidade de obter informações que auxiliem na tomada de decisão frente a situações de análise; uma base de dados análoga onde serão arquivados os documentos e dados de pesquisa. Em seguida, a base de dados análoga será integrada com a base de dados digital e a união desses dados coletados irá formar uma base de dados alfanumérica. Para manipulação do conteúdo formado pela integração das bases digitais e análogas pode-se utilizar, em uma mesma base de dados alfanumérica, um ou mais bancos de dados interligados, dentre esses bancos de dados destacam-se Oracle, SQL Server e PostgreSQL Base de Dados Espacial Uma base de dados espacial é formada pela aquisição de dados em meio digital, como por exemplo, o mapeamento de informações que já dispõe de uma base cartográfica digital geo-referenciada. A arquitetura que é apresentada a seguir exibe como é formada uma base de dados espacial.

18 18 Figura 3 Base de Dados Espacial (Fonte: adaptada do SOTO & SILVA, 2006). Acompanhando a Figura 3 observa-se: uma base de dados espacial que é composta por dois tipos de dados digitalizados. No processo de Cartografia Digital os sistemas já estão em forma digital, visto que tanto no Sistema CAD como no Sistema SIG seus dados já estão digitalizados sendo apenas inseridos na base de dado espacial. No processo de Cartografia Análoga ocorre a transferência dos dados em papel (mapas ou fotos) para a forma digital, ou seja, há uma conversão dos mapas em papel através de uma mesa digitalizadora que está conectada em um computador, o computador recebe os dados enviados pela mesa digitalizadora em forma de ponto, linha, redes e polígonos. Em seguida esses dados são inseridos na base de dados espacial, que pode ser composta por um ou mais bancos de dados (ROCHA, 2000) Sensoriamento Remoto Sensoriamento Remoto pode ser descrito como uma forma para obtenção de imagens e dados sobre um ambiente físico. A coleta e o armazenamento dos dados obtidos de uma determinada área por meio de sistemas fotográficos que são integrados com sistemas SIG, permitem a existência de uma inter-relação entre os dados coletados. Os dados arquivados em forma de dados espaciais servem para que possam existir acompanhamento e análise nas alterações do solo, clima e vegetação (MOREIRA, 2001). Sensoriamento Remoto é a utilização conjunta de modernos sensores, equipamentos para processamento de dados, equipamentos de transmissão de dados, aeronaves, espaçonaves, etc., com o objetivo de estudar o ambiente terrestre através do registro e da análise das interações entre a radiação eletromagnética e as substâncias componentes do planeta terra em suas mais diversas manifestações (NOVO, 1992).

19 19 O Sensoriamento Remoto pode ser subdivido em coleta e análise de dados. Na coleta dos dados ocorre a detecção da radiação proveniente da superfície terrestre para o sistema sensor (Figura 4) onde o produto (imagem) será arquivado em forma de dados espaciais. Na análise ocorre o pré-processamento, correções e modelagem das informações adquiridas. Figura 4 Componente de um Sistema Sensor (Fonte: adaptada do MOREIRA, 2001). Acompanhando a Figura 4, observa-se: a apresentação dos componentes de um sistema sensor, no qual o coletor é responsável por receber a energia por meio de uma lente; o detector captura a energia coletada por uma faixa do espectro; o processador submete o sinal recebido a um processamento ou ampliação por meio do qual se obtém o produto; o produto (imagem) é a informação obtida pelo processo do sistema sensor. O nível de aquisição de dados pode ser descrito pela altitude do sensor em relação ao alvo, existem três níveis de aquisição de dados por sensoriamento remoto (MOREIRA, 2001): 1. Nível terrestre utilizado para obter dados de radiação emitidos ou refletidos por um elemento na superfície terrestre, muito utilizado na área de radiometria; 2. Nível sub-orbital utilizam-se aeronaves para a coleta de dados, onde os principais equipamentos sensores utilizados são câmeras fotográficas, scanners e radares; 3. Nível orbital onde um satélite ou estação orbital em volta da Terra obtém dados por meio de ondas eletromagnéticas a partir da radiação emitida ou refletida da superfície terrestre, que posteriormente são transmitidas, processadas e transformadas em imagens. A técnica de Sensoriamento Remoto é um dos principais recursos responsáveis pelo levantamento de dados espaciais em ambientes naturais. Por meio do Sensoriamento Remoto

20 20 há uma obtenção de dados que estão integrados em imagens que são obtidas de uma certa área sem que haja contato entre o objeto e o sistema sensor. Estas imagens estão geo-referenciadas e possibilita uma análise e interpretação sobre o que ocorre em uma determinada região, diminuindo o tempo de levantamento e análise em áreas ambientais, agrícolas, regionais, entre outras (MOREIRA, 2001) Representações Computacionais Para que uma pesquisa possa ser efetuada em um SIG, é essencial o entendimento de como os objetos geográficos estão interligados internamente, uma vez que as imagens adquiridas são representações matriciais ou vetoriais e por meio dessas representações é que são efetuadas consultas como localização, dimensionamento, forma, escala, entre outras formas de pesquisa. Por exemplo, para saber a localização, ou seja, a posição de um objeto, através de suas coordenadas geográficas, é necessário que as representações matriciais ou vetoriais estejam contidas em uma imagem espacial. A seguir será apresentada uma descrição de cada uma dessas representações computacionais Representações Matriciais Nas representações matriciais há uma representação da malha quadricular em forma de uma matriz M(x,y) que é composta pelo número de colunas (x) e o número de linhas (y), ou seja, uma imagem é obtida pela relação entre o tamanho de uma célula (obtida pelas suas coordenadas) no mapa e a área coberta (MEDEIROS & CÂMARA, 1996). Os diferentes modelos de dados matriciais são descritos a seguir na Tabela 2. Tabela 2 Modelos existentes em uma representação Matricial (Fonte: DPI, 2006a). Categoria/Modelo Temático Representação Varredura Imagem temática Um pixel um ponto Pixels alinhados uma linha Pixels agrupados - polígonos Exemplo

21 21 Numérico Grades retangulares Valores reais associados a cada ponto da matriz Imagem Imagem monocromática Pixels com níveis de cinza Imagem sintética (codificada) Pixels associados à tabela de cores Imagem classificada Grupo de pixels com mesma cor As imagens obtidas em uma representação matricial possuem valores que estão associados às posições de uma matriz de grande dimensão. Por meio de uma superfície plana quadricular onde cada célula está inter-relacionada, ou seja, uma célula ou ponto referencial é determinado pela sua posição em cada linha e coluna existente na matriz. É possível, por exemplo, aumentar ou diminuir a resolução de uma imagem, determinar uma localização ou determinar um trajeto (MEDEIROS & CÂMARA, 1996) Representações Vetoriais Neste formato de representação, há uma definição precisa das posições, comprimentos e dimensões das representações geográficas, cuja representação vetorial é a união de vários pontos, linhas, polígonos, ou outras representações vetoriais em uma mesma área. Segundo Medeiros (1996) a representação de um elemento ou objeto é uma tentativa de reproduzi-lo o mais exatamente possível. Alguns dos diferentes modelos de representação vetorial são descritos a seguir.

22 22 Ponto Um ponto é uma representação vetorial determinada por um par de coodernadas (x,y) em um vetor. O ponto é utilizado, por exemplo, para determinar em mapas geográficos: a localidade de uma região, a praça pública existente em uma cidade, a entrada em uma cidade. A figura 5 apresenta a utilização de pontos em uma representação vetorial em um mapa. Neste mapa os pontos determinam a localidade de algumas das cidades do estado do tocantins. Figura 5 Pontos em uma representação vetorial. Linha A linha é uma representação vetorial deteminada por dois pares de coordenadas (x,y) em um vetor, em outras palavras, é a interligação entre dois pontos definidos. Uma linha é utilizada em mapas geográficos para determinar a distância entre duas cidades, regiões, municípios, entre outros. A figura 6 apresenta a utilização de uma linha em uma representação vetorial de um mapa, para determinar a distância entre duas cidades. Figura 6 Linha em uma representação vetorial.

23 23 Área A área é uma representação vetorial determinada por um conjunto em seqüência de coordenadas (x,y), formando um segmento de linhas interligadas entre si cuja união entre esses pontos determina uma área. Uma área é utilizada em mapas geográficos para determinar uma área de uma determinada fazenda, cidade, estado, entre outras localidades. A figura 7 apresenta a utilização da representação vetorial área, no mapa apresentado temse em destaque diferentes áreas em um único mapa geográfico. Figura 7 Área em uma representação vetorial. O conjunto de pontos, linhas e áreas possibilitam a representação de diferentes elementos ou objetos, onde um par ou mais de coordenadas (x,y) são cruzadas e interligadas para determinar uma representação vetorial GPS Por meio do sistema GPS é possível determinar a medição de longitude, latitude e altura de qualquer ponto existente na superficie terrestre. Por exemplo, para determinar a localização de um sinal que está sendo transmitido em um ponto na superfície terrestre, é necessário que haja uma triangulação entre as coordenadas enviadas pelos satélites, para que o sinal transmitido possa ser determinado. Segundo Rocha (2003), com três satélites tem-se apenas o posicionamento bidimensional (x,y) pois a incógnita Δt (diferença de tempo entre os

24 24 relógios do receptor e do satélite) tem que ser resolvida, apenas com quatro ou mais satélites consegue-se o posicionamento tridimensional (x, y, z). O GPS consiste, atualmente, de 24 satélites, os quais estão distribuídos em 6 órbitas planas. Cada plano possui uma inclinação de 55 em relação ao plano do Equador. Todos os satélites estão a cerca de km acima da Terra e completam uma revolução inteira em torno da Terra a aproximadamente cada 11 horas e 58 minutos (ROCHA, 2003). Devido à sua precisão e ao baixo custo frente a outras tecnologias utilizadas em cartografia, o sistema GPS vem sendo amplamente utilizado como instrumento de trabalho na coleta de dados em áreas rurais e urbanas. A combinação entre essa ferramenta com os sistemas CAD/SIG simplifica e diminui o tempo para o tratamento desses dados alfanuméricos que estão associados a pontos, polígonos e linhas. O processamento desses dados será efetuado por softwares cuja função é a filtragem dessas feições e informações adquiridas para formatos suportados por sistemas SIG. Posteriormente à filtragem ocorrerá a exportação desses dados, agora em formatos espaciais. Caso não seja possível realizar a exportação utilizam-se softwares para a sua edição e desenvolvimento, ou seja, por meio de sistema CAD é realizada a edição dos seus dados (atributos) antes de exportá-los para softwares SIG; ao final desse processo um software SIG importa esse arquivo tornando possível realizar análises, tratamento e conexão desses dados a uma base de dados espacial (ROCHA, 2000) Sistemas SIG mais comumente utilizados Algumas das tecnologias empregadas no desenvolvimento de mapas geográficos foram descritas anteriormente, a seguir serão descritas algumas das ferramentas utilizadas no desenvolvimento de mapas geográficos que empregam essas tecnologias. As informações gerais e técnicas descritas nos tópicos a seguir foram obtidas com os seus respectivos fabricantes, para maiores detalhes consultar suas respectivas Referências Bibliográficas.

25 ArcMap Informações Gerais (ESRI, 2006): Software: ArcMap Empresa: ESRI Principais Funcionalidades: Coleta, edição, manipulação, análise e visualização de dados geo-referenciados; Produção cartográfica incluindo relatórios e gráficos. Informações Técnicas (ESRI, 2006): Plataforma: Windows. Banco de Dados: Relacional, Oracle. Estrutura de Dados: Vetorial-Topológica Têm-se um exemplo a seguir de edição e catalogação de dados geo-referenciados por meio do software ArcMap: a b Figura 8 - Feição do estado do Tocantins sendo Editada no ArcMap.

26 26 Acompanhando a Figura 8, observa-se: a apresentação de uma imagem do mapa do Estado do Tocantins desenvolvida em estrutura tipo polígono em extensão shapefile 4, com suas divisões políticas em edição de imagem. Cada município (a) do Estado do Tocantins é apresentado nesta aba e todos os dados do município de Palmas (b) selecionado é apresentado nesta outra aba. O ArcMap é uma ferramenta de edição, para quem deseja desenvolver sistemas georeferenciados ou cartográficos, possui extensa documentação e o número de recursos disponíveis em suas ferramentas seja para edição ou desenvolvimento são amplos Quantum GIS Informações Gerais (QGIS, 2006): Software: Quantum GIS Empresa: QGIS Principais Funcionalidades: Ferramenta de geração de histograma para camada matricial; Gerenciamento de visões e tabelas com dados espaciais no PostgreSQL; Compositor de Mapas para criar o mapa final; Ferramenta de exportação para Mapserver. Informações Técnicas (QGIS, 2006): Plataforma: Linux/Unix e Windows. Banco de Dados: PostgreSQL. Estrutura de Dados: Vetorial-Topológica. O custo de softwares como o ArcMap para a integração de dados e criação de banco de dados geo-referenciados pode ser um obstáculo para muitas instituições, que procuram iniciar na área de geoprocessamento. Já existem softwares livres e que possuem funcionalidades similares ao ArcMap, um deles é o Quantum GIS, cuja apresentação é ilustrada pela Figura 6. 4 Arquivo vetorial padrão, que utiliza o padrão de extensão *.SHP.

27 27 a b Figura 9 Feição do estado do Tocantins sendo Editada no Quantum GIS. Acompanhando a Figura 9, observa-se a apresentação da mesma imagem do mapa do Estado do Tocantins desenvolvida anteriormente no ArcMap, agora sendo desenvolvida pelo software Quantum GIS. Tem-se a identificação de cada município do Estado (a) e também todos os dados do município de Palmas (b). O Quantum GIS, mesmo sendo um software sob licença GPL, continuam melhorando suas aplicações e serviços, torna-se uma ótima escolha para o desenvolvimento de sistemas geo-referenciados SPRING Informações Gerais (DPI, 2006b): Software: SPRING Empresa: INPE Principais Funcionalidades: Suporte a banco de dados geográficos de grande porte; Integração de dados geográficos com a introdução explícita do conceito de objetos geográficos (entidades individuais), de mapas cadastrais e mapas de redes;

28 28 Sistema capaz de operar com funcionalidade plena tanto em computadores com sistema operacional Windows, como em estações de trabalho UNIX de alto desempenho. Informações Técnicas (DPI, 2006b): Plataforma: Unix (Linux/Solaris) e Windows. Banco de Dados: Dbase, Oracle, Access e MySQL. Estrutura de Dados: Raster e Vetorial Um sistema SIG deve dispor de ferramentas para pesquisa, consulta, visualização e edição. Por exemplo, através do software SPRING (Figura 7) é possível visualizar dados geográficos, realizar pesquisas e consultas, gerenciar e tratar os dados contidos em um banco de dados, entre outras atividades de análise e desenvolvimento. a d b c Figura 10 Feição da cidade de Porto Nacional sendo Editada no Spring O Spring apresenta características de editoração de imagens geo-referenciadas conforme se observa na Figura 10, onde se apresenta a estrutura poligonal de representação

29 29 cadastral da cidade Porto Nacional no Estado do Tocantins contendo a estrutura dos lotes (a), vias de acesso (b), drenagem (c) e uma ferramenta para acesso ao banco de dados (d). Os conceitos sobre as tecnologias empregadas no processo de desenvolvimento de mapas geográficos e a apresentação de algumas das ferramentas utilizadas neste processo foram descritas acima para que haja uma melhor compreensão sobre como esses dados são coletados e armazenados em uma base de dados, e como as imagens geográficas são geradas. Uma vez compreendido isto, é necessário entender como as linguagens XML e SVG serão utilizadas para representação desses dados na web. 2.2 extensible Markup Language A linguagem XML é uma linguagem de marcação para estruturação de documentos e armazenamento de conteúdos que possibilita a transferência e manipulação de informações independente do sistema operacional ou plataforma utilizada, em outras palavras, é uma linguagem de marcação usada na representação de dados em um documento e armazenamento desses dados (FILHO, 2004) Sintaxe Um documento XML é composto de um elemento pai (raiz) que é envolvido por um par de "<" e ">" (conhecidos como tags) e elementos filhos (folhas), sendo que cada elemento pode possuir atributos próprios que são definidos ao decorrer de sua estrutura e posteriormente serão armazenados em uma base de dados XML (GRAVES, 2003). A seguir são apresentados exemplos onde o XML pode ser aplicado. Interligação entre informações e usuários na internet; Apresentação gráfica; Registro de Dados; Registro Estruturado; Transferência de dados em aplicações web; Documentos simples, entre outras aplicações Elementos Os elementos são utilizados na estrutura de um documento XML para descrever e armazenar atributos descritos dentro de um documento. Na Figura 11 podem ser visualizados

30 30 elementos existentes em um documento XML. Figura 11 Elementos em um documento XML. Acompanhando a Figura 11 observa-se que o elemento deve estar entre < > para que possa ser representado. O elemento <VEICULOS> </VEICULOS> que está em cor azul é o responsável por guardar ou descrever todo o conteúdo contido em um documento XML, em outras palavras, é o elemento pai (ou raiz), os demais elementos representados pela cor verde como <CARRO> e <CATEGORIA> são chamados de sub-elementos, são as folhas (filhos) contidas nessa estrutura Atributos Os atributos podem ser descritos como informações referentes a um determinado elemento, sendo que os atributos estão interligados com os elementos, para que as informações transmitidas dentro de um documento XML sejam mais facilmente compreendidas, ou seja, os atributos podem ser definidos como um conjunto de características existentes em um documento (PITTS-MOULTIS & KIRK, 2000). Na Figura 12 há um exemplo de um documento em XML com os atributos "ano", "combustível" e "cor" representados em cor azul.

31 31 Figura 12 Atributos em um documento XML Validação Um documento XML é composto por diferentes elementos e atributos. Para que a estrutura de um documento XML seja ordenada de forma que os elementos sejam determinados em seus devidos lugares, utilizam-se DTD (Document Type Definition) e Schemas (Esquemas). As DTDs e os Schemas oferecem uma forma de controle sobre os elementos e atributos dentro de um documento XML, uma vez que influi na forma em que o documento é apresentado como também afeta a forma em que uma aplicação (programa) lê esse documento. Em outras palavras, as DTDs e os Schemas descrevem o modelo a ser seguido em um documento XML (MARCHAL, 2000). A Figura 13 ilustra um exemplo de DTD para um documento XML que descreve informações sobre veículos automotivos (carros). Nesta figura são destacados os atributos cor, ano, cep, cidade e país pela cor verde referentes ao elemento carro em azul. Figura 13 Exemplo de DTD para um documento XML Namespaces Um documento XML emprega atributos e elementos que são utilizados por diferentes

32 32 aplicativos, o que pode acarretar em conflito de nomes de elementos nesse documento, ou seja, quando dois documentos que usam a mesma referência (atributos e elementos) com significados diferentes, podem acarretar em um conflito ou em problemas de reconhecimento de documento. Para solucionar os problemas de conflitos e reconhecimento é utilizada Namespace. Dentro de um documento XML um atributo xmlns é associado a um elemento x, desta forma é possível diferenciar elementos em um mesmo documento. Na Figura 14 o elemento entrada destacado pela cor verde está associado a Namespace destacada em cor azul que é o seu identificador em um documento XML (GRAVES, 2003). Figura 14 Namespace em um documento XML "Parsing" de XML (DOM e SAX) Um parser é uma ferramenta para processamento de documentos XML que reside entre aplicativos e arquivos em XML, cuja função é ocultar os detalhes da sintaxe XML existente em um documento. A manipulação de documentos por meio do DOM e SAX ocorrerá com o auxílio dos parsers, uma vez que o parser lê o documento e após essa leitura cria uma árvore de objetos correspondentes (MARCHAL, 2000). Segundo Graves (2003), DOM é uma interface de programação de aplicativos que facilita o projeto de páginas Web dinâmicas e fornece uma interface-padrão para outros softwares manipularem documentos XML e HTML. Um objeto DOM em um documento XML fornece métodos para criar, modificar e apagar o conteúdo de um documento XML por meio da programação. A estrutura do DOM é baseada em árvores, na Figura 15 há um exemplo dessa hierarquia de acesso.

33 33 Figura 15 Modelo hierárquico utilizado pelo DOM. Observa-se na Figura 15, que o DOM cria uma estrutura em forma de árvore. Por meio dessa estrutura é possível do nó raiz descrito em cor azul acessa os nós folhas, e este acesso ocorrerá sempre de forma hierárquica. SAX é uma API 5 padrão baseada em eventos, que possibilita maior controle sobre a análise em um documento. Como a SAX é uma API baseada em eventos, sua interface é de nível mais baixo que o DOM, cuja API é baseada em objetos. A eficiência da SAX pode ser descrita devido à otimização frente à sua aplicação, por consumir menos memória do que uma interface baseada em objetos, e principalmente porque uma aplicação em SAX pode processar o documento enquanto o parser o lê (MARCHAL, 2000). A linguagem XML foi descrita acima com algumas das suas respectivas funcionalidades. Toda a estruturação citada em XML é herdada em SVG, desta forma é possível o tratamento de erros e a interação com o usuário. O SVG será descrito a seguir para que haja um melhor entendimento de como essas imagens são desenvolvidas. 2.3 Scalable Vector Graphics Scalable Vectorial Graphics (Gráficos Vectoriais Escaláveis) é uma aplicação XML para apresentar, por meio de cálculos vetoriais, imagens, linhas, curvas, polígonos, gráficos, entre outras formas de representações bidimensionais. As imagens em SVG são geradas a partir das coordenadas dos pontos tracejados em um vetor, em outras palavras, utiliza-se um método vetorial para gerar as imagens em SVG. Esse método vetorial possibilita que as 5 Conjunto de rotinas e padrões estabelecidos por um software (WIKIPEDIA, 2006a).

34 34 imagens sejam ampliadas ou reduzidas sem perda de qualidade (DEITEL et al, 2003). O SVG nada mais é do que uma aplicação XML, desta forma é possível criar documentos SVG que estarão contidos dentro da estrutura XML, onde haverá um elemento de abertura do documento SVG <SVG> e um de fechamento </SVG>, visto que toda a estrutura (elementos, sub-elementos, atributos, entre outras informações) SVG será inserida entre esses elementos. A seguir na Figura 16 há um exemplo da estrutura básica de um documento SVG. Figura 16 Sintaxe básica de um Documento SVG. Observa-se na Figura 16 nas linhas 4 e 6 que as tags de inicio e fim da linguagem SVG estão descritas na cor azul, bem como os atributos largura e altura do documento criado. Seu conteúdo poderá ser descrito contento atributos, elementos, namespaces, coordenadas, imagens vetoriais, filtros, entre outras atribuições Sistemas de Coordenadas O sistema de coordenadas adotado em SVG é descrito a seguir na Figura 17, onde há um exemplo de como é a representação vetorial de um retângulo em um sistema de coordenadas SVG e ao lado em um sistema de coordenadas Cartesiano. Neste trabalho caso seja necessário utilizar um dos sistemas de coordenadas, será adotado o sistema de Coordenadas SVG.

35 35 Figura 17 Sistema de Coordenas (Fonte: adaptada HOPGOOD et al, 2002). Na Figura 17 observa-se que o sistema de coordenadas SVG tem o eixo horizontal superior corresponde ao eixo das abscissas e o eixo vertical esquerdo corresponde ao eixo das ordenadas, cujos pares entre os pontos de origem (cruzamento) são determinados de cima para baixo. No sistema de Coordenada Cartesiano o eixo horizontal inferior corresponde ao eixo das abcissas e o eixo vertical esquerdo corresponde ao eixo da ordenadas, cujos pares entre os pontos de origem (cruzamento) são determinados de baixo para cima. É possível também converter o plano de coordenadas SVG em um plano Cartesiano por meio da sintaxe descrita na Figura Imagens Vetoriais Como foi descrito anteriormente, uma imagem gráfica pode ser gerada através de um plano de coordenada cartesiano ou SVG, este tópico apresenta alguns dos fatores que tornam as imagens vetoriais um padrão para apresentação de imagens gráficas mais adequadas do que as imagens rasterizadas (tópico que será abordado neste trabalho mais adiante). As imagens vetoriais são geradas a partir de um sistema de coordenadas, onde por meio de cálculos matemáticos são determinados seus pontos de origem (cruzamento), possibilitando ampliação e redução de imagens sem perda de qualidade gráfica, uma vez que seus pontos podem ser redimensionados através de vetores. Uma imagem vetorial pode ser composta por diferentes formas gráficas como linhas, retângulos e elipses (WIKIPEDIA,

36 d). Um ponto bastante questionado é o porquê da utilização do SVG para a disponibilização de imagens geográficas se já existem outras aplicações que permitem disponibilizar essas imagens, muitas delas utilizando imagens em formato Bitmap. A resposta a essa pergunta é: pelo fato da linguagem SVG utilizar imagens vetoriais é possível o redimensionamento de uma imagem sem perda de sua qualidade gráfica. Figura 18 Imagem sendo redimensionada sem perda de qualidade. Observa-se na Figura 18 que após a ampliação da imagem original (a), as imagens (b) e (c), não apresentaram perda de qualidade. E o redimensionamento da imagem ocorre sem perda de qualidade. Outro ponto a ser apresentando é que o tamanho do arquivo da imagem gerado é relativamente pequeno, visto que, são gravados em ASCII 6. As imagens rasterizadas possuem características que as tornam menos adequadas para apresentação de imagens gráficas na web, algumas destas características que as diferem das imagens vetoriais serão abordadas a seguir Imagens Rasterizadas Imagens gráficas rasterizadas são imagens representadas por uma grade geralmente retangular preenchida de pixels (Um pixel é o menor ponto gráfico para formar uma imagem digital), sendo que a cor que compõe cada pixel é determinada de forma individual aos outros pixels em conjunto. A qualidade de uma imagem apresentada em tela é correspondente ao 6 Conjunto de códigos que possibilita a comunicação e troca de dados entre diferentes máquinas.

37 37 número total de pixels em tela. Por exemplo, uma imagem com resolução gráfica em 640 x 480 pixels possui qualidade gráfica inferior a uma imagem em 1280 x 1024, uma vez que a quantidade de pixels nesta resolução é muito maior que a anterior (WIKIPEDIA, 2006c). Na Figura 19 há um exemplo de diferentes tipos de resolução gráfica em imagens. Figura 19 Imagem em diferentes resoluções gráficas. Observa-se na Figura 19 que a imagem com resolução gráfica em 46 x 40 pixels possui uma visibilidade e nitidez inferior às imagens com resolução gráfica em 80 X 80 e 103 x 100 pixels. Verifica-se que quanto maior for a resolução gráfica de uma imagem melhor será a sua qualidade gráfica, maior será o seu tamanho de arquivo e maior será a visibilidade referente a esta imagem. Alguns dos formatos existentes em imagens gráficas rasterizadas são: JPEG TIFF RAW PNG GIF BMP Dos formatos apresentados será descrito brevemente o formato bit mapped (BMP). Imagens bit mapped são definidas bit a bit, de forma correspondente à imagem apresentada em tela, onde o número de bits por pixel é que determina o número correspondente de cores a serem apresentadas em tela. As imagens em formato bitmap, também chamadas de imagens por rastreio ou de pintura, são constituídas de pontos individuais chamados de pixels (elementos de figura) que são dispostos e coloridos de maneiras diferentes para formar um padrão (TERRA, 2006). Um dos fatores que torna a utilização de imagens bit mapped inadequada para aplicações geográficas web, é o fato de que cada vez que a imagem é redimensionada ela perde a sua qualidade gráfica original. Na Figura 20 é apresentado à ampliação de um ponto

38 38 na imagem onde ocorre perda em sua qualidade gráfica. Figura 20 Ampliação de um ponto em uma imagem bit mapped. Observa-se na Figura 20 que após a ampliação gráfica da imagem, houve perda de qualidade visual e é possível visualizar o conjunto de pixels que compõem a referente imagem. Um ponto a ser levantado é que após uma imagem ser gerada seu tamanho não pode ser alterado sem perda de qualidade. Este fator pode ser apontado como o ponto diferencial entre imagens vetoriais e rasterizadas, uma vez que na alteração do tamanho das imagens gráficas vetoriais não ocorre perda de qualidade. Os tópicos seguintes irão abordar sobre os diferentes elementos utilizados em um documento SVG para apresentação de imagens geográficas Agrupamento pelo elemento <g> A utilização de um elemento de agrupamento em SVG é realizada pelo elemento <g>, este elemento possibilita agrupar diferentes elementos em um único elemento. Isto facilita para o programador o desenvolvimento do seu sistema. Por exemplo, as declarações de cores aplicadas em grupo, ao agrupamento de diferentes grupos, ao agrupamento de diferentes elementos, entre outras aplicações (PEARLMAN & HOUSE, 2003). Na figura 21 é apresentado um exemplo da utilização do elemento <g> em um agrupamento de ellipses, o elemento <g> é descrito na cor azul e a forma gráfica <ellipse> é descrita na cor verde. O elemento <desc> é utilizado para descrever o conteúdo contido no elemento de agrupamento <g>, já o elemento <title> descreve o título do documento e o atributo id pertencente ao elemento <g> possibilita identificar diferentes grupos dentro de um documento para posteriormente serem reutilizados caso seja necessário. A imagem que exemplifica esta codificação é exibida ao lado esquerdo do código.

39 39 Figura 21 Agrupamento pelo elemento <g> Elemento <defs> O elemento defs permite a reutilização de códigos (grupos, símbolos, filtros, gradientes, entre outros) inseridos dentro das tags de início <defs> e fim </defs>. O W3C recomenda a reutilização de códigos dentro do elemento <defs> por questões de acessibilidade, já que a utilização deste elemento facilita na reutilização de códigos inseridos anteriormente. Os elementos que são inseridos dentro do elemento de agrupamento <g> visto anteriormente serão herdados automaticamente pelo elemento <defs>. Este elemento irá conter dentro da sua estrutura o elemento de agrupamento <g>, em outras palavras, os elementos são estruturados de maneira hierárquica (PEARLMAN & HOUSE, 2003). Na Figura 22 tem-se a codificação descrita anteriormente na Figura 21 pela forma gráfica do elemento <ellipse> inserida dentro do elemento de agrupamento <g>, e que está inserida dentro do elemento <defs>.

40 40 Figura 22 Elemento <defs>. O elemento <use> utiliza o atributo xlink:href para indicar qual o elemento local deve ser renderizado no documento e visualizado em browser. È necessário adicionar o elemento <use> após o elemento <defs>, devido ao fato de que o elemento <defs> é somado ao elemento <use> para exibir a imagem em browser; se o código acima for adicionado em um bloco de texto e for salvo como documento SVG, quando o arquivo SVG for aberto a imagem não será exibida em browser. A codificação do elemento <use> é descrita a seguir, onde o x é referente à distância entre a imagem e a margem esquerda do browser e o y é referente entre a imagem e a margem superior. Este código deve ser inserido após a tag de fechamento do elemento defs da Figura 22 para permitir a exibição a referente imagem. <use xlink:href= #elementolocal x= y= > Elemento <symbol> O elemento <symbol> é utilizado para criar um objeto ou grupos de objetos, assim como o elemento <g>, e também pode conter os mesmos elementos gráficos que são inseridos dentro do elemento <svg> e do elemento <g>. O que difere o elemento <symbol> do elemento <g>, é o fato de que o elemento <symbol> utiliza o atributo viewbox 7 para fixar relação com as informações descritas dentro de suas tags. Este elemento também pode ser incluído dentro do elemento <defs> (PEARLMAN & HOUSE, 2003). Na Figura 23 há um exemplo de um código utilizando o elemento <symbol>. 7 Este atributo possibilita escalonar uma imagem para um tamanho desejado.

41 41 Figura 23 Elemento <symbol>. Observa-se na Figura 23 que o elemento <symbol> descrito pela cor azul, contém entre suas tags de início e fim, o estilo, a característica e a posição da imagem a ser visualizada em browser da forma gráfica <ellipse>. O elemento <symbol> precisa está associado ao elemento <use> para exibir a imagem gráfica em browser, assim como o elemento <defs> Path O elemento <path> é um dos elementos em SVG mais importantes, devido ao fato de que este elemento possibilita descrever diferentes formas gráficas através de sua sintaxe. As formas gráficas são delimitadas através dos atributos referentes ao elemento <path>, onde o inicio e fim de cada segmento em um trajeto é determinado pelo conjunto de pontos (valores que determinam o posicionamento de um ponto em um trajeto) atribuídos a cada atributo de um elemento (HOPGOOD et al, 2002). Por exemplo, na Figura 24 é descrito um trajeto que vai da posição de origem (M 50,140) a posição de destino (C 75, 20, 140, 20, 260, 140). Caso fosse inserido um novo ponto após a posição do atributo C (curveto), este novo atributo seria o ponto de destino nesta seqüência, onde a união destes atributos com o elemento <path> descrevem uma forma gráfica. A seguir são apresentados alguns dos atributos utilizados com o elemento <path>. M = moveto V = vertical lineto L = lineto C = curveto H = horizontal lineto S = smooth curveto