Apesar da efervescente comunidade em torno do desenvolvimento web existem elementos e funcionalidades dos navegadores que permanecem dormentes até um programador resolver usar a imaginação.
Foi assim com o Ajax e esta sendo assim com dois elementos que ganharam proeminência juntamente com o advento do HTML 5. Apesar de estarem disponíveis há anos, foi nos últimos meses que obtiveram o suporte necessário, tanto por parte dos navegadores, quanto dos desenvolvedores.
O SVG e o Canvas são direcionados para a renderização de gráficos diretamente no navegador. Neste tutorial teremos uma introdução ao SVG e no próximo tutorial veremos o Canvas.
Gráficos Vetoriais Escaláveis
No título temos a tradução de SVG (Scalable Vetor Graphics). Nas recomendações da W3C desde 2001, é semelhante aqueles artistas talentosos que permanecem no underground e poucos conhecem toda a sua potencialidade.
Os gráficos criados com SVG são vetoriais, o que significa que não importa quanto zoom você aplicar sobre o gráfico, a definição do gráfico será perfeita. É como desenhar com o Illustrator diretamente no navegador.
Outro ponto positivo do SVG é que a estilização é feita com CSS. Todo elemento criado pode ser estilizado separadamente. E também pode ser animado. Isso porque o SVG tem o Document Object Model (DOM), o mesmo modelo de representação utilizado pelo HTML.
Para começar os rabiscos você precisa entender XML. Uma linguagem muito versátil que eu já expliquei em outro tutorial publicado aqui no Webmater.pt: Introdução Ao XML. O mais fantástico do estruturar os gráficos com o XML é que desta forma você poderá manipular todos os atributos do elemento.
Todos os navegadores atuais suportam o SVG, mas o Internet Explorer não suporta animações. Para as versões anteriores do IE é utilizada a biblioteca SVG Web (ficheiro zip do subdomínio code.google.com) que utiliza Flash para gerar os gráficos.
Para inserir o SVG na página, você pode usar o elemento img, iframe, embed, object ou diretamente na página. As marcações são as seguintes