Criação de banners animados em SVG

Leio o blog de David Walsh há anos. As dicas e os tutoriais que ele compartilha me ajudaram a resolver muitos problemas. Adoro o fato de poder apoiá-lo agora com publicidade TrackJS em seu site. Além disso, tive a chance de criar algumas animações SVG legais!

Não sou designer ou profissional de marketing por profissão. Sou desenvolvedor de software, mas, como empresário, acabo fazendo um pouco de tudo. Passei muito tempo fazendo esboços e pesquisando no Google para descobrir como isso funciona. Gostaria de compartilhar o que aprendi sobre como projetar e criar anúncios SVG animados, como este aqui:

Vantagens do SVG

SVGO SVG, ou Scalable Vector Graphic (Gráfico vetorial escalável), é uma estrutura baseada em XML que define as formas, as linhas e as cores de uma imagem de modo que ela possa ser visualizada em qualquer tamanho e ainda manter uma aparência nítida. O SVG não é adequado para exibir imagens fotográficas, mas é excelente para desenhos, textos e formas.

É também uma plataforma fantástica para animações, pois as mesmas tecnologias CSS que geram animação na Web também podem animar a marcação para SVGs.

As imagens SVG são bem suportadas pelos navegadores da Web atualmente, embora o Internet Explorer 9 e versões anteriores possam ter alguns problemas (grande surpresa).

O Spec

David nos deu um espaço de banner padrão na parte superior do conteúdo. O anúncio deve ser responsivo de tamanhos de celular a desktop, até as dimensões padrão do banner de 728px por 90px.

Nosso anúncio precisa descrever rapidamente o TrackJS e como podemos ajudar. Monitoramos seu JavaScript em busca de bugs e fornecemos ao senhor relatórios de erros incríveis quando eles ocorrem. Precisamos encontrar uma maneira de dizer isso de forma concisa e com um pouco de humor.

Também precisamos ser um anunciante responsável:

1. 
   Diferencie-se claramente da página
2. 
   Não bloqueie nem diminua a velocidade de carregamento do conteúdo…
3. 
   Não distraia o visitante do conteúdo…

Meu primeiro anúncio animado

Eu queria criar algo que se baseasse em “bugs”. Tínhamos alguns recursos do Adobe Illustrator de um inseto sendo esmagado para um adesivo anterior que provavelmente podemos reutilizar. Talvez os insetos possam voar sobre o anúncio e serem esmagados pelo botão “free trial”.

Comecei a pesquisar na Internet para descobrir como fazer isso acontecer. Defini um SVG em um arquivo HTML e comecei a aprender. Defini a altura e a largura do banner. O dobro disso para o viewBoxque é como a janela para o desenho, para que tudo fique nítido em telas de alta densidade.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="720px" height="90px" viewBox="0 0 1456 180" style="background-color:#2c3237"></svg>

E agora eu tinha uma bela caixa cinza! Pequenas realizações.

A maior parte do anúncio seria estática: nosso logotipo, descrição e slogan. Eu os desenhei no Photoshop com as fontes e cores que queria e os exportei como SVG. Copiei as definições de forma que saíram desse arquivo e as colei em meu elemento SVG como um novo caminho.

Também criei um botão, mas o exportei como um SVG separado para que pudesse manipulá-lo separadamente mais tarde. Eu tinha algo assim:

<svg xmlns="http://www.w3.org/2000/svg">
 <path class="tjs-logo" d="..."/>
 <path class="tjs-button" d="..."/>
</svg>

Animação de SVG com CSS

Agora vamos fazer algumas animações. Exportei a animação de insetos do Adobe Illustrator como SVG e peguei os dados do caminho. Eu queria ter alguns bugs, mas não queria ter várias cópias dos dados do caminho, pois eles eram muito grandes. Felizmente, encontrei o Símbolo SVG que nos permite definir formas que podem ser instanciadas várias vezes. Era exatamente o que eu precisava.

<defs>
 <symbol id="tjs-bug">
   <g class="tjs-bug">
     <path d="..." />
     <path d="..." />
     <path d="..." />
   </g>
 </symbol>
</defs>

Os símbolos são instanciados com o <use> do qual criei três. Adicionei uma transformação a cada um deles para reduzi-los ao tamanho de 0%, de modo que não ficassem visíveis na página imediatamente.

<use class="tjs-bug-1" xlink:href="#tjs-bug" transform="scale(0)" />
<use class="tjs-bug-2" xlink:href="#tjs-bug" transform="scale(0)" />
<use class="tjs-bug-3" xlink:href="#tjs-bug" transform="scale(0)" />

Eu já tinha feito algumas coisas com animações CSS, então foi ótimo saber que o senhor pode incorporar CSS diretamente na marcação SVG. O senhor só precisa cercar as regras com a sintaxe CDATA para que continue a ser um XML válido (embora a maioria dos navegadores não se importe com isso).

Eu defini um CSS keyframe para cada um dos três bugs que faziam o bug “voar” pelo anúncio. Usando um ponto de parada no meio do quadro-chave e o ease para dar a impressão de que o inseto parou e aterrissou antes de continuar. Por fim, anexei o keyframe ao nome da classe em cada elemento de uso.

<svg …>
 <style type="text/css"><![CDATA[
   @keyframes flight-1 {
     0% {
       transform: translate(-100px, -40px) scale(2.5) rotate(105deg)
     }
     66% {
       transform: translate(500px, 0) scale(2.5) rotate(85deg)
     }
     100% {
       transform: translate(1800px, -60px) scale(2.5) rotate(85deg)
     }
   }
   .tjs-bug-1 {
     animation: 1.8s flight-1 1s forwards ease;
     transform: scale(0)
   }
  ]]></style>
 <...>
</svg>

Usei o mesmo fluxo para exportar um desenho de esmagamento de insetos do Adobe Illustrator e adicioná-lo ao SVG. Cronometrei outra animação de quadro-chave para que ele aparecesse e crescesse no momento em que o botão deslizasse para baixo a partir do topo. Tudo acontece rápido o suficiente para parecer que o botão esmaga um dos insetos.

Aqui está o resultado final. Esta versão abaixo não está minificada nem ofuscada, portanto, o senhor pode abrir suas ferramentas de desenvolvimento e ver todos os detalhes da implementação final.

A próxima geração

Construir o primeiro foi muito divertido, e aprendi muito sobre SVGs ao longo do processo. Esse anúncio está sendo veiculado há vários meses, mas agora é hora de uma atualização. Desta vez, eu queria contar uma história que reconhecesse que o JavaScript se infiltra em nossos aplicativos de todas as formas inesperadas e, quando falha, pode ter consequências desagradáveis. O JavaScript acontece.

<object data="animated-happens.svg" type="image/svg+xml" style="width:100%;pointer-events:none;"></object>

Para esse anúncio, trabalhei com um ilustrador talentoso para dar vida a ele. Ao vasculhar seu código, vi dois padrões importantes que eu não havia percebido.

1. Usando elementos <animate> em vez de CSS

Em vez de usar um conjunto grande e incorporado de regras CSS para lidar com a animação de todos os diferentes elementos, ele incluiu <animate> e <animateTransform> elementos aninhados dentro dos desenhos a serem animados. Posso ver imediatamente a utilidade de fazer isso, pois passei muito tempo rolando para frente e para trás durante meu desenvolvimento original, ajustando o tempo.

Manter as regras de animação próximas aos objetos a serem animados é uma grande vantagem para a produtividade durante o desenvolvimento e para qualquer manutenção futura que possa ser necessária.

2. Referenciar o SVG como um <objeto>

Em vez de incluir a marcação SVG diretamente no documento HTML, como eu fiz, ele fez referência a um arquivo SVG externo usando a tag <object> . Isso permite que a marcação SVG seja incluída externamente e referenciada no DOM.

<object data="animated-happens.svg" type="image/svg+xml"></object>

Se tivéssemos feito referência ao arquivo SVG usando um <img> isso criaria um limite estrito entre o SVG e o DOM. A implicação disso é que o evento “load” não será acionado depois que o SVG for carregado no cache, e a animação será reproduzida apenas uma vez.

Conclusão

As animações SVG são legais. Elas carregam rapidamente, têm muitas opções poderosas e são amplamente compatíveis. Quando usadas com responsabilidade, podemos usá-las para contar histórias curtas e impactantes e, em seguida, sair do caminho do usuário.

A Web fica melhor a cada dia. Quando ela quebra, tenho muito orgulho de fazer parte da melhoria e da correção de seus erros. Gostaria muito de ajudar o senhor também, e é totalmente gratuito, sem cartão de crédito nem nada, do TrackJS hoje mesmo.