Criar animações com SVG´s

COMO CRIAR ANIMAÇÕES COM SVG'S?

O SVG é a abreviatura de Scalable Vector Graphics e permite a utilização de gráficos vetoriais escaláveis principalmente utilizados para a web. É representado por etiquetas XML que apresentam formas que podem conter interação e animação através de CSS ou JavaScript.

VANTAGENS:

Os SVGs são flexíveis, não dependem da resolução e são bem apresentados em ecrãs e impressão.

São leves por serem compostos de etiquetas de texto e ainda podem ser comprimidas (gzip).

Podem ser estilizados com CSS e animados com CSS3.

Tem efeitos como corte, máscaras, fundos e filtros que equivalem à edição de Photoshop no navegador.

1 - DESENHAR:

O código é exportado pelo Illustrator, Inkscape ou Sketch. Vamos utilizar o Illustrator em que o método de trabalho é o seguinte:

1.    Criar um elemento de texto.

2.    Converter o texto para caminho (Ctrl+Shift+O).

3.    Fundir esses caminhos através da criação de caminho composto (Ctrl+8).

2 - PREPARAR O CÓDIGO SVG PARA EDIÇÃO:

Salvamos o ficheiro em formato.SVG para depois simplificar e formatar o código para o tornar mais legível.

As opções seguintes são as melhores para exportar para a web:

É gerado um ficheiro SVG e pode ser aberto num editor de texto:

O código exportado contém informação redundante que pode ser otimizada através de programas como o SVGO ou deste editor online:

 http://petercollingridge.appspot.com/svg-editor

Vamos utilizar o editor online e fazer o upload do ficheiro para depois otimizarmos:

Podemos verificar o tamanho do código antes e depois da otimização:

3 - Propriedades dos traços

Para obter esta animação utilizei as propriedades dos traços:

·         Stroke-width : a espessura do traço relativo ao tamanho do SVG.

·         Stroke :  a cor do traço utilizando hue/saturation/lightness.

·         Stroke-dasharray : define o tamanho do traço e o espaço entre eles.

·         Stroke-dashoffset : define o começo do traço em relação ao comprimento do caminho.

4 - animar svg’s através de css

Os SVG’s podem ser animados da mesma forma que os elementos HTML através das etiquetas de transição e animação CSS.

Vamos ver o código onde foi definido a propriedade do stroke-dasharray para ser o comprimento total do caminho. Depois o stroke-dashoffset para ser o comprimento total do caminho para aparecer o traço. A animação keyframe irá aparecer no stroke-dashoffset. No final a propriedade fill-opacity é utilizada para preencher o texto.

html, body, svg { height: 100%; width: 100%; margin: 0; }

.st0 {

  stroke-width: 1;

  stroke: hsl(6, 63%, 36%);

  stroke-dasharray: 1800px 1800px;

  stroke-dashoffset:  1800px ;

  fill-opacity: 0;

  fill: hsl(6, 73%, 36%);

 

  animation-name: stroke, fill; 

  animation-duration: 10s;

  animation-iteration-count: infinite;

  animation-timing-function: ease-in-out;

  animation-fill-mode: forwards;

}

@keyframes stroke {

  0% { stroke-dashoffset:  1800px; }

  100% { stroke-dashoffset: 0 }

}

@keyframes fill {

  0% { fill-opacity: 0; }

  100% { fill-opacity: 1; }

}

 CONCLUSÃO: 

Esta é apenas uma das formas simples de animação de SVG’s utilizando CSS onde se pretende que sejam compreendidos os métodos de utilização do código.