quarta-feira, 20 de março de 2013

O elemento <svg> do HTML5

O HTML 5 trouxe novas possibilidades em relação a suas versões anteriores. Entre essas novidades está a tag <svg>.

SVG é o acrônimo de "Scalable Vector Graphics" (ou "gráficos vetoriais escaláveis"). É um formato aberto (uma recomendação da W3C) para definir, através da linguagem XML, gráficos bidimensionais baseados em vetores. Esses gráficos podem ser estáticos, dinâmicos e, até mesmo, animados.

DICA: O site svgwow possui diversos exemplos de animações feitas com svg (clique em um dos exemplos e depois no botão "start svg demo").

Uma das grandes vantagens desse tipo de gráfico, em relação a outros formatos de imagem (como JPEG, PNG, GIF, etc), é que ele não perde qualidade quando é redimensionado ou quando é ampliado (zoom), sendo totalmente escalável. Além disso, ele pode ser impresso com alta qualidade, em qualquer resolução.

Por ter uma representação em XML, as imagens SVG podem ser criadas e editadas em qualquer editor de texto (apesar de ser mais simples criá-las em editores, como o Inkscape), além de poderem ser indexadas, buscadas, navegadas (pelo seu DOM) e comprimidas.

No HTML5, podemos criar um gráfico SVG inserindo a tag <svg> dentro de um container HTML tradicional e incluindo dentro dela os elementos relativos à representação gráfica desejada.

DICA: Nessa página, pode-se encontrar uma referência completa de todos os elementos SVG presentes na recomendação do W3C (versão 1.1). E nessa página, pode-se encontrar exemplos de representações do SVG desenhando diferentes formas geométricas e mostrando algumas de suas potencialidades.


A seguir, é apresentado um exemplo de utilização da tag <svg> com a representação da bandeira do Brasil (simplificada), sendo equivalente ao exemplo apresentado no post da tag <canvas> do HTML5.

Visualização:
Ordem e Progresso
*Observação: esse exemplo é suportado pelos navegadores Firefox, Google Chrome, Safari e Internet Explorer a partir da versão 9.

Código fonte:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="150" width="250">
   
<rect fill="green" height="150" width="250" style="stroke-width: 1; stroke: rgb(0,0,0);" />

<polygon points="125,0 250,75 125,150 0,75 125,0" style="fill: #FCFF00; stroke-width: 1; stroke: purple;"/>

<circle cx="125" cy="75" fill="#00027F" r="50" stroke-width="1" stroke="black"/>

<rect fill="white" height="15" rx="2" width="100" x="75" y="65"/>

<text fill="black" font-family="Arial" font-size="10" x="80" y="75">Ordem e Progresso</text>

</svg>

DICA: Existem dois tipos de especificações especiais do SVG 1.1 para dispositivos móveis, o "SVG Tiny" (SVGT) e o "SVG Basic" (SVGB). O primeiro é destinado a rodar em máquinas com maior limitação de hardware (como aparelhos celulares) e o segundo a aparelhos com maior capacidade.


<svg> x <canvas>

Conforme pode ser visto no exemplo acima e no exemplo apresentado no post da tag <canvas> do HTML5, muitas vezes pode-se fazer uma imagem SVG equivalente a uma imagem feita em um Canvas. Mas qual a diferença de utilizar uma abordagem ou a outra?

Bom, pra começar, o SVG é baseado em XML - o que implica que todos os seus elementos ficam disponíveis no seu DOM, sendo possível navegar e manipular esses elementos. Também pode-se vincular tratamento de eventos (Javascript) para esses elementos. Além disso, cada forma geométrica é tratada como um objeto e se os atributos desse objeto são alterados, o navegador pode automaticamente renderizar a forma geométrica equivalente. Uma desvantagem dessa abordagem é que, em representações complexas, ele tende a ter uma renderização lenta.

Já na abordagem que utiliza o Canvas, o gráfico é renderizado pixel por pixel e, uma vez que estiver totalmente desenhado, ele é "esquecido" pelo navegador. Assim, qualquer alteração faz com que todo o gráfico tenha que ser desenhado novamente. Além disso, a qualidade do gráfico varia conforme a resolução utilizada. Uma vantagem desse tipo de gráfico é que ele pode ser salvo pelo usuário como uma imagem ".png" ou ".jpg".


O exemplo abaixo, adaptado desse post, deixa bem clara a diferença entre uma imagem tradicional (png) e uma imagem vetorial (svg), ao ser clicado no botão de zoom.


PNG
SVG


Referências


Nenhum comentário: