IR PARA MENU

Introdução à SVG

Objetivo: Nessa matéria faremos um breve relato histórico e apresentaremos a SVG estabelecendo as diferenças, vantagens e desvantagens do uso de gráficos vetoriais em relação a imagens do tipo mapa de bits.

Breve histórico

Em 1998 o Consórcio W3C criou o Grupo de Trabalho para a SVG1.0 e no dia 11 de fevereiro de 1999 foi lançado o primeiro Rascunho de Trabalho das especificações. Nesse mesmo ano foram lançadas mais nove versões de atualização do Rascunho de Trabalho e em 02 de agosto de 2000 a especificação alcançou o status de Candidata à Recomendação.

Houve uma versão de atualização da Candidata à Recomendação e em 19 de julho de 2001 a especificação alcançou o status de Proposta de Recomendação. Em 03 de agosto de 2001 o W3C criou um rascunho para a especificação SVG1.1/2.0 e um Rascunho de Trabalho para criar os requisitos da SVG para dispositivos móveis.

Em 05 de setembro de 2001 a especificação para SVG1.0 tornou-se uma Recomendação do W3C atingindo assim o seu status final e tornando-se uma tecnologia oficialmente em conformidade com os Padrões Web. Nesse mesmo dia a tecnologia SMIL^{[ ? ]} tornou-se também uma Recomendação do W3C.

Em 30 de outubro de 2001 foi lançado o primeiro Rascunho de Trabalho para a SVG1.1 e dois perfis para SVG Móvel.

Em 30 de abril de 2002 a especificação para SVG1.1 alcançou o status de Candidata Recomendação, em 15 de novembro do mesmo ano alcançou o status de Proposta de Recomendação e em 14 de janeiro de 2003 tornou-se uma Recomendação do W3C atingindo assim o seu status final e tornando-se uma tecnologia oficialmente em conformidade com os Padrões Web.

A Recomendação do W3C para a SVG1.1 foi editada em 30 de abril de 2009 e em 22 de junho de 2010 foi lançado o primeiro Rascunho de Trabalho para a SVG1.1 (2^a. Edição).

Assim a Recomendação do W3C para a SVG1.1 editada em 30 de abril de 2009 é a versão que está em vigor no dia em que esta matéria foi escrita (janeiro de 2011).

Gráficos vetoriais

Na Home Page deste site foi explicada as diferenças entre imagens do tipo mapa de bits ou rasterizadas e imagens vetoriais. Se você não está seguro que sabe tais diferenças, antes de prosseguir, consulte o título "Tipos de gráficos" na Home Page.

Todos nós que já passamos pela experiência de criação ou simplesmente de edição de imagens sabemos que uma imagem do tipo rasterizada, por exemplo um arquivo .jpg, apresenta maior ou menor qualidade dependendo da resolução. Mesmo sem ter experiência com edição de imagens todos sabemos que câmeras fotográficas de 20MP tiram fotos de qualidade superior às de 5MP e, além disso também sabemos que quanto mais alta a qualidade mais espaço em memória a imagem ocupa.

Em interfaces gráficas para a Web é importante que se faça o tratamento adequado de imagens para não estender o tempo de carregamento da página. Contudo, mesmo com a otimização da imagem, se o usuário der um zoom na página aumentado a imagem, haverá uma degradação ou perda de qualidade devido a que a imagem ali colocada foi otimizada para uma determinada resolução.

As imagens a seguir são exatamente iguais exceto pelo fato de que uma é do tipo rasterizada e outra vetorial.
Para comprovar a perda de qualidade dê zoom, clicando os botões, e observe o que acontece com as duas imagens.

Como você deve ter notado, após ter dado zoom a imagem da direita por ser vetorial não degrada quando dimensionada. (esse exemplo foi retirado do site do W3C)

Vetores x Bitmap

O uso de imagens do tipo vetorial apresenta as seguintes vantagens sobre o uso de imagens do tipo mapa de bits

• Não degradam quando escalados para menor ou maior, ou seja, um gráfico vetorial de 10 x 10px apresenta a mesma nitidez e legibilidade quando ocupa uma resolução de 1000 x 1000px.
• Os arquivos são menores resultando em redução do tempo de carregamento.
• Oferecem facilidade de implementar interação com o usuário sem necessidade de complexos mecanismos de comunicação no lado do cliente.
• Suportam nativamente a linguagem SMIL destinada a animações sem necessidade de uso da JavaScript.
• Possibilitam o uso de JavaScript para percorrer o DOM XML e interagir com o gráfico.