Introdução Ao SVG – Scalable Vetor Graphics

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

<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 , abreviação para definições. Entre elas definimos os parâmetros para o gradiente.

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 inclui uma cor. A primeira e última cor partem das extremidades em direção ao centro enquanto as intermediárias disputam o espaço intermediário.

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>

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 e veja as incríveis possibilidades de animação do SVG.

Conclusão

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.