Como Manipular e Animar SVG usando Snap.svg

Portuguese (Português) translation by Andre Rocha (you can also view the original English article)

Neste tutorial iremos introduzir Snap.svg, uma biblioteca de JavaScript que auxilia na animação e manipulação de conteudo SVG. Para demonstrar algumas das funcionalidades disponíveis, iremos animar um olho em SVG.

O que é Snap.svg?

Snap.svg é uma biblioteca de JavaScript que facilita a criação e manipulação de gráficos SVG para browsers modernos. É o sucessor para o Raphaël de Dmitry Baranovskiy; a biblioteca mais popular para trabalhos em SVG.

Raphäel

Raphäel.js é uma ótima biblioteca. Lançado em 2008, sua melhor característica era seu suporte para browsers do IE 5.5 em diante. Porém, o suporte para tantos browsers o limitava e significava que não podia implementar as últimas atualizações; ao invés disso, contava com funcionalidades comuns de SVG

Depois de algum tempo, a comunidade do Raphäel.js se dividiu em dois: um grupo que contava com sua compatibilidade entre os browsers, e o outro que o usava para criar SVGs. Este último grupo exigia mudanças para ter suporte a mais funcionalidades que o Raphäel.js não aguentava.

Então o Snap.svg foi criado, escrito do zero por Dmitry Baranovskiy (da equipe da Adobe Web Platform); para poder trabalhar mais facilmente com SVG e usar as mais novas funcionalidades oferecidas pelo SVG; funcionalidades como mascaras, gradientes, padrões, grupos, animações e mais.

O que pode ser feito com Snap.svg?

Dê uma olhada na documentação API dele, e verá funcionalidades como máscaras, grupos, gradientes, filtros, animar e padrões, todos quais podem ser aplicados à SVGs.

Snap.svg irá ajudá-lo a gerar gráficos, mas também pode ser usado em arquivos SVGs existentes. Isso significa que o conteúdo SVG não precisa necessariamente ser criado com Snap.svg, você também tem a liberdade de manipular gráficos com ferramentas como Adobe Illustrator, Inkscape, ou Sketch.

Começando com o Snap.svg

Download

Primeiro, baixe o Snap.svg. Uma vez baixado, você encontrará os seguintes arquivos:

demos - aqui estão alguns exemplos, que também podem ser achados na seção Demo do site.
dist - aqui estão a versão minificada e descompressada (para desenvolvimento) do script snap.svg
doc - aqui você encontrará a documentação API que também está disponível no site snapsvg.io
src - estes são os componentes, ferramentas e plugins que compõem o Snap.svg, como animate, paper, executando uma tarefa Grunt etc.
test - este diretório contêm os testes de unidade do Snap.svg

Começando um projeto

Tendo baixado os recursos do Snap.svg, comece um novo projeto web, que precisa incluir:

index.html - a página principal de HTML
js/snap.svg.js - o plugin snap.svg
js/main.js - o arquivo principal de desenvolvimento

Crie um template HTML e chame "scripts/snap.svg.js" e "scripts/main.js" em algum lugar na sua página.

Após isso, coloque um contêiner <svg> dentro de <body> e lhe dê um id. Você deverá ter algo parecido com isto:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Introducing Snap.svg</title>
    <script src="js/snap.svg.js"></script>
    <script src="js/main.js"></script>
</head>
<body>
    <svg id="svg"></svg>
</body>
</html>

Trabalhando com SVG

Agora vamos diretamente para a codificação. Para conseguir acompanhar, você precisará de um conhecimento básico de JavaScript, mas não importa muito porque não iremos muito a fundo neste tutorial.

Primeiro, iniciamos Snap, apontando para o <svg> que criamos, e o adicionamos a uma variável. No nosso caso, chamamos a variável de s

1	var s = Snap("#svg");

De agora em diante, teremos acesso aos métodos do Snap.svg pela variável s. Por exemplo, digamos que queremos criar um círculo, ou um retângulo.

Circle pode levar três argumentos: x, y e radius (veja Circle API)
Rectangle pode levar seis argumentos: x, y, width, height, horizontal radius e vertical radius (veja Rect API)
Ellipse pode levar quatro argumentos: x, y, horizontal radius e vertical radius (veja ellipse API)

// Circle with 80px radius
var circle = s.circle(90,120,80);
// Square with 160px side width
var square = s.rect(210,40,160,160);
// Ellipse with 80px vertical radius and 50px horizontal radius
var ellipse = s.ellipse(460,120,50,80);

O código acima gerará o seguinte resultado:

Como pode ver na imagem acima, as formas automaticamente recebem um preenchimento #000 (preto) e não recebem nenhum outro estilo. Vamos interagir com eles e adicionar mais atributos de estilos como preenchimento, opacidade de preenchimento, cor da borda, largura da borda, opacidade da borda. Você pode dar uma olhada em SVG Attributes para mais detalhes.

circle.attr({
  fill: 'coral',
  stroke: 'coral',
  strokeOpacity: .3,
  strokeWidth: 10
});

square.attr({
  fill: 'lightblue',
  stroke: 'lightblue',
  strokeOpacity: .3,
  strokeWidth: 10
});

ellipse.attr({
  fill: 'mediumturquoise',
  stroke: 'mediumturquoise',
  strokeOpacity: .2,
  strokeWidth: 10
});

Estes attributos fizeram nossas formas svg muito mais bonitas!

Mais manipulação SVG

Vamos levar nosso exemplo para além do básico.

Juntando Formas

Snap.svg usa uma arma poderosa chamada group, que, como o nome sugere, cria um grupo de vetores, criando uma só forma. Você pode agrupar quantas formas você quiser addicionando- os à lista.

Vamos criar dois círculos, agrupa-los e diminuir o preenchimento de cada círculo para visualizar mais claramente o que está acontecendo.

var circle_1 = s.circle(200, 200, 140);
var circle_2 = s.circle(150, 200, 140);

var circles = s.group(circle_1, circle_2);

circles.attr({
  fill: 'coral',
  fillOpacity: .6
});

Criando Máscaras com Outras Formas

Agora digamos que queremos criar um olho imaginário usando o grupo de elementos que já criamos. Podemos fazer isso usando mask. Primeiro, precisamos criar uma elipse extra e posicioná-lo no meio do grupo.

var circle_1 = s.circle(300, 200, 140);
var circle_2 = s.circle(250, 200, 140);

var circles = s.group(circle_1, circle_2);

var ellipse = s.ellipse(275, 220, 170, 90);

circles.attr({
  fill: 'coral',
  fillOpacity: .6,
});

ellipse.attr({
  opacity: .4
});

Agora precisamos mascarar nossos círculos com nossa elipse, mudando a cor da elipse:

circles.attr({
  fill: 'coral',
  fillOpacity: .6,
  mask: ellipse
});

ellipse.attr({
  fill: '#fff',
  opacity: .8
});

Animando as Formas

Continuando nosso exemplo, podemos fazer este olho piscar, adicionando um método animate. Para animar a elipse que acabamos de criar, iremos modificar o raio vertical de 1 para 90 (que é o valor no momento) e voltar o processo.

Crie a animação dentro de uma função e a chame de blink.

function blink(){
  ellipse.animate({ry:1}, 220, function(){
    ellipse.animate({ry: 90}, 300);
  });
};

Isso diz que iremos animar de ry: 90 para ry: 1 e de ry: 90 para ry: 1 com tempos diferentes.

Agora crie um setInterval para chamar o método blink uma vez a cada três segundos, para criar o efeito de piscar.

1	setInterval(blink, 3000);

O código final deverá ser assim:

var circle_1 = s.circle(300, 200, 140);
var circle_2 = s.circle(250, 200, 140);

// Group circles together

var circles = s.group(circle_1, circle_2);

var ellipse = s.ellipse(275, 220, 170, 90);

// Add fill color and opacity to circle and apply
// the mask
circles.attr({
  fill: 'coral',
  fillOpacity: .6,
  mask: ellipse
});

ellipse.attr({
  fill: '#fff',
  opacity: .8
});

// Create a blink effect by modifying the rx value
// for ellipse from 90px to 1px and backwards

function blink(){
  ellipse.animate({ry:1}, 220, function(){
    ellipse.animate({ry: 90}, 300);
  });
};

// Recall blink method once every 3 seconds

setInterval(blink, 3000);




Suporte ao Browser

Como mencionado anteriormente, estes efeitos tem suporte em browsers modernos: IE9+, Safari, Chrome, Firefox e Opera.

Open-Source e Grátis

Snap.svg está disponível sob a licença Apache 2, que significa que é open-source e completamente grátis.

Conclusão

Snap.svg diminui a barreira para manipulações incríveis de SVG. Espero que você tenha gostado de acompanhar e que tenha te inspirado a ir mais fundo em SVG!

Links Úteis

@snapvg no Twitter
https://github.com/adobe-webplatform/Snap.svg
Snapsvg forum

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!