Como criar animações SVG com CSS

A animação da Web está na moda hoje em dia e não há limite para o que você pode criar com SVGs. Se você estiver pronto para experimentá-lo em seu próprio site, conhecer os conceitos básicos de animação o ajudará a criar designs mais complexos. Os SVGs são ótimos para animação na Web porque são escaláveis ​​e independentes da resolução (o que significa que podem ser dimensionados sem perder qualidade), ao contrário dos arquivos JPEG e PNG. Eles também são fáceis de estilizar porque você pode usar CSS, filtros e interatividade para aprimorar os SVGs.

Antes de mergulharmos no tutorial, você deve estar familiarizado com transições e transformações CSS. Alguns dos mesmos conceitos serão usados ​​com SVGs.

Noções básicas de SVG

SVG, ou Scalable Vector Graphics, usa um formato de texto baseado em XML para descrever como a imagem deve aparecer. SVGs são arquivos de texto com um monte de XML dentro. Se você abrir um com um editor de código, verá o que queremos dizer. A razão pela qual os SVGs podem ser dimensionados para tamanhos diferentes sem perder a qualidade é porque o texto é usado para descrever o gráfico.

As informações visuais em um arquivo SVG são calculadas e renderizadas pelo navegador ou por qualquer software gráfico que você esteja usando para modificá-lo. Eles não são tão complexos quanto um JPG ou outros formatos de arquivo de imagem, o que permite que sejam desenhados e editados manualmente em um editor de texto, se você optar por fazê-lo. Eles podem ser alterados e estilizados com CSS, tornando-os incríveis para projetar na web.

O suporte do navegador para gráficos SVG é bastante universal; O IE8 pode apresentar alguns problemas, mas os navegadores modernos lidam com SVGs maravilhosamente. Pode haver pequenos bugs aqui ou ali, mas normalmente é uma navegação tranquila.

Como criar um gráfico SVG

Adobe Illustrator é um programa de escolha ao criar SVGs. Na realidade, eles podem ser criados do zero, já que é tudo XML, mas provavelmente é mais fácil usar um programa de design, especialmente para SVGs mais complexos.

Dicas ao projetar no Adobe Illustrator

Como em qualquer outro projeto do Adobe Illustrator, a caixa delimitadora é onde a ilustração é criada, por isso é importante garantir que tudo esteja contido. A melhor maneira de fazer isso é selecionar a arte que deseja ter em seu SVG e, em seguida, ir para Object > Artboards > Fit to Artwork Bounds.

Este é um passo muito importante. Houve algumas ocasiões em que não fizemos isso e a imagem parecia muito pequena no site por causa do espaço em branco extra. Fazer tudo se encaixar perfeitamente nos limites resolveu o problema.

Pode não ser a coisa mais divertida de se fazer quando você está no modo de design, mas ser cuidadoso e consistente com a nomenclatura das camadas o ajudará quando estiver fazendo futuros trabalhos de animação com o gráfico. “Layer One, Layer Two” tornará difícil lembrar quais camadas continham qual parte do gráfico. A razão para isso é que o Illustrator usará esses nomes para gerar os IDs no código SVG.

Os grupos de camadas são impressionantes, especialmente para gráficos mais complexos. Eles também são usados ​​para criar grupos em arquivos SVG. Ao trabalhar com eles, é altamente recomendável certificar-se de que os grupos de camadas contenham apenas formas relacionadas, para manter seu arquivo limpo e fácil de editar posteriormente.

Neste arquivo, você verá que a parte externa da roda é chamada de “roda externa” e a parte interna tem o nome de “roda interna”. É básico, mas funciona.

Isso é opcional, mas executá-lo por meio de um otimizador de CSS é útil. Há uma boa chance de reduzir o tamanho do arquivo fazendo isso. Uma ótima opção é o SVG Optimizer de Peter Collingridge. O SVG OMG também é uma opção que vale a pena examinar.

Exportando um gráfico SVG no Adobe Illustrator

Agora que você tem sua imagem SVG final, ela precisa ser exportada para que possa ser usada na web. Vá para Arquivo > Salvar como > SVG. Você também pode ir em Arquivo, Exportar, .SVG, dependendo da versão do Illustrator que estiver usando. Isso será salvo como flyweel_wheel.

Depois de fazer isso, haverá uma caixa de diálogo com algumas opções (se você não vir todas as opções a seguir, vá para “Mais opções”):

Perfil: SVG 1.1

Tipo: controla como você deseja lidar com as fontes em seu design e incorpora fontes como SVG. Não temos nenhum, então deixaremos este conjunto como SVG.

Subconfiguração: Esta opção incorpora detalhes do personagem no arquivo SVG quando necessário. Isso permite que o arquivo exiba fontes que podem não estar presentes no sistema do usuário. É possível incluir apenas o(s) glifo(s) usado(s) no SVG (o que reduz o tamanho do arquivo) quando “Apenas glifos usados” (se você usar uma fonte especial para sua arte) estiver selecionado.

Localização da imagem: controla as informações que podem ser armazenadas para os dados da imagem rasterizada dentro do arquivo SVG como um URI de dados com a opção “Incorporado”. (Não é muito relevante neste caso, mas permite um link ou imagens incorporadas, o que aumentaria o tamanho do arquivo.)

Propriedades CSS: Os atributos de apresentação permitem que os estilos CSS sejam colocados diretamente no SVG, se necessário. Dependendo do seu caso de uso, isso pode ou não ser ideal. Atributos de apresentação especifica coisas como fill: blue; em vez do que é visto tradicionalmente com estilos inline: . Os atributos de apresentação são normalmente mais fáceis de substituir em CSS.

Opções mais avançadas: esse grupo de caixas de seleção permite que você altere várias configurações, incluindo quantas casas decimais você acessa nos vários números. Um deve ser suficiente aqui. As opções avançadas são necessárias principalmente se houver muito texto envolvido em seu arquivo. A opção de produzir menos elementos <tspan> pode reduzir drasticamente o tamanho do seu SVG exportado.

Em alguns casos, o texto pode ser desenhado ao longo de um caminho personalizado. Com a opção “Use <textPath> element for Text on path” é exportado como texto em um caminho. A opção “Responsivo” também é importante. Se não estiver marcada, o arquivo SVG terá largura e altura codificadas.

Como animar SVGs com CSS

Agora que existe um SVG real para trabalhar, podemos criar uma animação simples para ver como tudo isso funciona. A propriedade CSS transform e o método translate ajudarão a roda a se mover. A animação com CSS é incrível porque não há plug-ins ou bibliotecas que precisem ser instaladas; tudo que você precisa é HTML e CSS para começar.

Os SVGs podem ser animados da mesma forma que os elementos HTML, usando quadros-chave CSS e propriedades de animação ou usando transições CSS. Animações mais complexas geralmente têm algum tipo de transformação aplicada — translação, rotação, dimensionamento ou inclinação.

Animação básica

A seguir, uma animação simples que faz a roda crescer ao passar o mouse:

 svg {
   altura: 20%;
   largura: 20%;
   preenchimento: #50c6db;
}
svg:hover {
   transformar: scale(1.25);
   duração da transição: 1,5s;
} 

Animação da roda giratória

Aqui é onde o trabalho duro no Adobe Illustrator compensa. O esforço de nomear efetivamente as camadas será bem aproveitado. Com os grupos de camadas externa e interna, a animação pode ser controlada e personalizada, o que é uma grande vantagem sobre a animação de gráficos raster.

A roda SVG funcionará como um gráfico giratório de carregamento. A roda externa girará e a interna crescerá ligeiramente à medida que a cor se move do claro para o escuro.

Os elementos SVG são bastante previsíveis, na maioria das vezes, mas há algumas coisas de posicionamento que podem ser um pouco mais complicadas. Se você está acostumado com outros elementos HTML, eles respondem a transform e transform-origin da mesma forma. Uma coisa a notar é que eles não seguem o modelo de caixa, ou seja, margem, borda, preenchimento, etc. Isso torna o posicionamento e a transformação desses elementos um pouco mais desafiadores.

Noções básicas de origem de transformação

A propriedade transform-origin é usada para mudar a posição da origem de transformação de um elemento. A origem da transformação de um elemento HTML está em (50%, 50%), que é o centro do elemento.

A origem da transformação de um elemento SVG é posicionada no ponto (0, 0), que é o canto superior esquerdo da tela.

Como o elemento SVG gira em torno de seu próprio centro? Um ajuste é necessário com a propriedade transform-origin. Isso pode ser definido usando um valor percentual ou um valor absoluto (pixels, ems ou rems). Esse valor será definido em relação à caixa delimitadora do elemento.

Se fôssemos definir a origem da transformação do <rect> para o centro usando valores percentuais, seria feito assim:

 rect {
  origem transformada: 50% 50%;
}

Fazendo a roda

Primeiro, configurar os quadros-chave de rotação é fundamental. Este será um gráfico giratório, então a rotação completa é necessária. Também haverá um efeito fade-in aplicado. Este exemplo pode ser encontrado no Codepen.

 @keyframes girar {
    de {transform:rotate(0deg);}
    para {transformar:rotate(360deg);}
}
@keyframes fadeIn {
    0% {
        opacidade: 0,35;
    }
    50% {
        opacidade: 0,5;
    }
    75% {
        opacidade: 0,75;
    }
    100% {
        opacidade: 0,25;
    }
}

Em seguida, é importante criar um wrapper SVG.

 .svg-container {
  altura: 100%;
  largura: 100%;
  altura máxima: 15cm;
  largura máxima: 15cm;
  margem: 0 automático;
}

Estilos SVG gerais foram criados e é aqui que a origem da transformação é especificada.

 svg {
  superior: 50%;
  esquerda: 50%;
  posição: absoluta;
  altura máxima: 15cm;
  largura máxima: 15cm;
  largura: 20%;
  altura: 20%;
  preenchimento: #50c6db;
  transformar: traduzir(50%, 50%);
} 

É aqui que a nomenclatura da camada se torna muito útil. A animação giratória é aplicada a todo o gráfico SVG porque foi especificada em #outer-wheel , mas a roda interna tem um efeito de esmaecimento que foi feito apenas para a parte interna do gráfico. Ao direcionar apenas a #inner-wheel , a animação fade in foi aplicada.

 #roda externa {
  animação: gire 4s linear infinito;
}
#roda interna {
  animação: fadeIn 2s linear infinito;
} 

Espero que isso lhe dê uma boa introdução aos SVGs e às técnicas básicas de animação. À medida que você os usa mais, essas ideias básicas o ajudarão a criar animações mais complexas.