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 [4]. 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 [5] (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
<object type="image/svg+xml" data="arquivo.svg">
<embed type="image/svg+xml" src="arquivo.svg" />
<iframe width="l100 height="100" src="arquivo.svg">
<img width="100" height="100" src="arquivo.svg" alt="alternativo" />
Vamos aproveitar o suporte dos navegadores atuais e usar o SVG diretamente na página. A estrutura básica e obrigatória para criar o espaço necessário para a criação das formas é a seguinte:
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="" height="">
<!—conteúdo -->
</svg>
A largura e altura definidas nesta linha delimitam as fronteiras para o gráfico.
No SVG temos disponíveis seis formas básicas: rect (retângulo), circle (círculo), elipse, line (linha), polyline (polilinha) e polygon (polígono). Cada uma com seus atributos específicos. A cor padrão é preta e sem linha ao redor do gráfico. No decorrer do tutorial criaremos exemplos e com isso veremos os atributos de cada forma.
Círculo E Retângulo
Começamos pelo círculo e retângulo:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
<circle cx="125" cy="75" r="50" fill="green" />
<rect x="80" y="150" width="100" height="100" fill="#f0f"/>
</svg>
Lembra-se das inesquecíveis aulas de matemática e o Plano Cartesiano? Pois utilizaremos finalmente. Com o diferencial que o 0,0 são o canto superior esquerdo do navegador ou elemento no qual o gráfico esta sendo criado. Alguns elementos usam o “x, y” e outras o “cx, cy” para representar a distância.
O tamanho do retângulo é definido com os atributos “width” e ”height” e para conseguir cantos arredondados pasta usar “rx” e “ry”. Já no caso do círculo o tamanho é definido pelo atributo “r” de radius. Na elipse é o “rx” e “ry”.
Preenchimento
O atributo “fill” é o responsável pelo preenchimento da forma. Aceita o nome da cor, código hexadecimal ou identificador no caso de gradientes. Vamos aplicar gradiente para exemplificar:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
<defs>
<linearGradient id=" gradiente1" x1="0%" y1="100%" x2="50%" y2="0%">
<stop offset="0%" style="stop-color:black; stop-opacity:1" />
<stop offset="50%" style="stop-color:#333; stop-opacity:1" />
<stop offset="100%" style="stop-color:#ccc; stop-opacity:1" />
</linearGradient>
</defs>
<circle cx="125" cy="75" r="50" fill="url(#gradiente1)" />
</svg>
Vamos a explicação do código: começamos com a estrutura obrigatória onde são definidos os limites para o gráfico.
Em seguida conhecemos as tags
Utilizamos um gradiente linear, existe também a opção de criar um radial o que mudaria também os atributos utilizados.
Identificamos este gradiente como “gradiente1” e ao analisar o código você verá que este nome foi usado para o atributo “fill “do círculo criado.
Os atributos “x1”,” x2”, “y1”, “y2 “ definem a posição do gradiente e aceitam inclusive valores negativos.
Se x1 e y1 forem 100% a última cor declarada ficará no canto superior esquerdo, se o x2 e y2 forem 100% então a última cor fica na canto inferior direito.
Cada tag
O atributo “offset “informa o início e fim da cor, o “stop-color“ informa a cor e o “stop-opacity “ a opacidade.
Existe um amplo espaço para experimentações na criação dos gradientes sendo que ainda existe o gradiente radial.
Como dito anteriormente é possível estilizar os elementos com o css através da modalidade inline.
<circle cx="225" cy="150" r="50" style="stroke:#006600;" />
Polígono
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<polygon points="200,10 280,190 110,210">
</svg>
O atributo exclusivo para a criação dos polígonos é o “point”, uma array de pares “x”, ”y“ onde o primeiro par começa no topo do polígono e segue a leitura em sentido horário. Todos os outros atributos de estilização funcionam para este elemento também.
Linha
Considerado o gráfico mais básico, criar linhas com SVG é muito simples e usa os atributos explicados anteriormente.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="200">
<line x1="0" y1="20" x2="0" y2="300" stroke="#006600" />
</svg>
Polilinha
A polilinha tem muita utilidade na criação de gráficos tabulares, estilo “desempenho trimestral das vendas”. Apesar de não se limitar a isso.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="200">
<polyline points="0,220 40,180 120,40 130,120 140,140 200,80 230,130 250,80" fill="none" stroke="#0CF" stroke-width=3 />
</svg>
[6]
O atributo “point” aceita uma array de pares “x”, “y“ bem no estilo cartesiano começando no canto superior esquerdo. Então para fazer a linha subir o valor é menor e para descer é maior. Pela liberdade na definição dos pontos é possível criar qualquer desenho e preencher com uma cor sólida ou gradiente como as outras formas.
Texto
Pegando o exemplo da criação do gráfico com a polilinha é comum além dos traços, a necessidade de identificar os pontos com texto. É muito parecido com HTML e utiliza atributos que já conhecemos:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
<text x="10" y="20" fill="#f0f" style="font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif">TEXTO</text>
</svg>
Elemento g
Ao compor gráficos mais elaborados, com várias formas, é comum a necessidade de aplicar um mesmo atributo ou animação para todos. Para este fim existe o elemento “g” que tem o propósito de agrupar as formas. Para exemplificar vamos fazer todos os elementos ficarem com uma borda cinza:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="200">
<g stroke="#333">
<polyline points="0,220 40,180 120,40 130,120 140,140 200,80 230,130 250,80" fill="none"
stroke-width=3 />
<text x="10" y="20" fill="#f0f" style="font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif">TEXTO</text>
<line x1="0" y1="20" x2="0" y2="300" />
</g>
</svg>
Animações
O principal diferencial do SVG em relação ao Canvas é o suporte a animações. Você pode criar as animações utilizando o javascript aproveitando a estrutura DOM, o suporte nativo dos navegadores ao SMIL ou uma mistura das duas técnicas. As formas e possibilidade das animações são infinitas e aqui veremos a base para que você entenda o funcionamento.
A má notícia é que o IE somente suporta animações criadas com o javascript.
Primeiro vamos ver como criar uma animação simples diretamente com o SVG/SMIL onde será criado um círculo que fica mudando de cor:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<ellipse cx="100" cy="100" rx="80" ry="80">
<animate attributeName="fill" dur="5s" values="#ff8; #f88; #f8f; #88f; #8ff; #8f8" repeatCount="indefinite"/>
</ellipse>
</svg>
Com um nome bastante sugestivo o elemento animate é inserido dentro do elemento a ser animado. Os atributos básicos requeridos são: o nome do atributo a ser animado (attributeName); a duração em segundos (dur); os valores (values), que podem ser desmembrados em from e to; e a quantidade de vezes que a animação será repetida (repeatCount).
Para animações que alteram mais do que um atributo ao mesmo tempo é preciso usar o animateTranform:
<svg width="300px" height="100px">
<rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
<rect x="0" y="50" width="15" height="34" fill="red" >
<animateTransform
attributeName="transform"
begin="0s"
dur="20s"
type="rotate"
from="0 60 60"
to="360 100 60"
repeatCount="indefinite" />
</rect>
</svg>
O primeiro valor no from/top é relativo ao ângulo enquanto os outros dois são o x e o y.
Visite este link sobre SVG animation with JavaScript and SMIL [7] e veja as incríveis possibilidades de animação do SVG.
São tantas as possibilidades do SVG que já foram escritos livros especificamente tratando do assunto. É possível aplicar filtros, máscaras, responder a eventos do mouse e uma gigantesca gama de combinações que simplesmente não cabem em um tutorial introdutório. Aproveite a base aprendida neste tutorial e pesquise mais sobre o assunto, pois com a crescente interatividade dos gráficos e a necessidade de portabilidade, o SVG pode levar a qualidade dos seus aplicativos a outro nível.
