Crie um logotipo animado com o uso seletivo de animações bem projetadas mostrou-se para melhorar a experiência do usuário. E embora a web esteja passando lentamente para o HTML5 para animações na web, seu uso também causa algumas complicações.Os gráficos vetoriais escaláveis (ou SVGs) fornecem uma alternativa acessível, com uma ótima API, juntamente com muitos outros benefícios. E podem ser animados com um pouco de uso criativo de folhas de estilo em cascata.No decorrer deste artigo, vamos aprofundar todos os outros benefícios do uso de SVGs. E ensinar-lhe exatamente como usá-los em combinação com o CSS para criar logotipos animados.
Continue lendo
Por que os gráficos vetoriais escaláveis são tão legais
Apesar do que o nome indica, Scalable Vector Graphics não é um tipo de formato de arquivo de imagem. É uma linguagem de marcação XML (bem como XHTML ou XOXO ). Esta linguagem de marcação específica é usada para criar imagens bidimensionais baseadas em vetores. Que podem ser ampliadas ou baixas sem perda de resolução.Para colocar isso em perspectiva, vamos dar uma olhada no código por trás de um arquivo SVG simples. Antes de passar para falar sobre mais das propriedades desse formato.O exemplo abaixo reproduz uma cópia do logotipo da Adobe rastreando um caminho vetorial e usando o atributo de preenchimento para colori-lo. Sinta-se à vontade para copiá-lo usando seu editor de texto preferido (salvando-o como um arquivo .svg) E depois abra-o no seu navegador para ver o resultado final (observe como o logotipo escala perfeitamente como discutimos anteriormente).
Como você pode imaginar, isso pode ser bastante útil ao construir um site responsivo. No entanto, uma vez que os gráficos são renderizados usando vetores, eles tendem a ocupar mais dados do que o necessário. Quando se trata de imagens complexas. Devido a este fato, os SVGs não são usados frequentemente fora de gráficos, como logotipos, infografia ou gráficos regulares (embora isso aconteça).Além de ser receptivo, os gráficos vetoriais escaláveis também possuem alguns efeitos gráficos incorporados (como filtros ou modos de mistura). E possuem uma API de DOM muito acessível. Na verdade, se você já está familiarizado com CSS e JavaScript (o que, claro, você é, você rockstar). Você deve ser capaz de manipular arquivos SVG sem muita dificuldade. Esta flexibilidade permite, por exemplo, criar arquivos SVG no lado do servidor. E modificá-los facilmente sem ter que recorrer ao uso de ferramentas dedicadas (que abordaremos mais tarde).Por fim, os SVGs podem ser facilmente animados usando CSS. O que você pode ter suposto com o título deste artigo (ou as referências repetidas que fizemos nesse fato). E chegaremos a isso um pouco. Mas primeiro, vamos passar pelo processo real de manipulação de SVGs usando ferramentas dedicadas.
Como trabalhar com SVGs
Como mencionamos anteriormente, você pode mergulhar em SVGs com suas próprias mãos, se isso é do seu agrado. Embora seja um método completamente válido, existem excelentes ferramentas disponíveis para criar e manipular diretamente SVGs. O que torna ineficiente lutar com o código para qualquer coisa que não seja simples estilo CSS ou animações.Adobe Illustrator , Inkscape e Sketch para Mac são as opções mais populares. No caso do Illustrator, o processo de criação é tão simples como preparar sua imagem. E depois exportá-la usando a opção ‘ Salvar como ‘ SVG. Ao fazer isso, você pode notar uma opção chamada Perfis SVG com várias opções listadas em um menu suspenso. Como SVG Tiny (mais adequado para smartphones) e SVG Basic (um perfil desatualizado destinado a ser usado para PDAs). Mas estamos indo para ficar com SVG 1.1.Um subproduto infeliz de usar ferramentas como estas para criar arquivos SVGs. É que eles podem adicionar muitos metadados ao código subjacente, o que resulta em arquivos maiores do que eles precisam. Naturalmente, este é um problema na web design. Uma vez que você não quer que os tempos de carregamento aumentem devido à má otimização do seu fim. Gráficos vetoriais escaláveis devem ser otimizados (na maioria dos casos) antes de poder incorporá-los no seu site.Vamos dar uma olhada em um exemplo de um arquivo SVG que descreve o logotipo do Android, antes e depois da otimização para ilustrar este ponto:
Agora, vamos trabalhar magia de otimização, removendo espaços, atributos padrão, estilos e outros dados não essenciais e nós obtemos:
Embora o arquivo SVG original tenha sido bastante compacto para começar (0.5kB), o processo de otimização foi capaz de reduzir seu tamanho de arquivo em 12.5% (para 0.4kB). Em imagens mais complexas, você notará reduções ainda mais extremas no tamanho de arquivos e melhorias nos tempos de carregamento quando os SVGs forem implementados em seu site.
Por motivos de simplicidade, recomendamos o uso de ferramentas como o Otimizador SVG on-line criado por Peter Collingridge ou SVGO, um aplicativo aberto de código baseado em Node.js.Agora que aprendemos o que torna os SVG tão úteis e como trabalhar com eles, vejamos como você pode usar CSS para animar gráficos criados usando esta linguagem de marcação.
Criando um logotipo animado com SVG e CSS
Como mencionamos ao falar sobre o que torna os SVGs tão legal, eles vêm com alguns efeitos gráficos incorporados que incluem recursos de animação. Na verdade, o SVG possui uma sintaxe nativa exclusivamente para animações, denominada SMIL (Synchronized Multimedia Integration Language), que permite animar os atributos de seus gráficos diretamente na marcação XML.No entanto, o Internet Explorer nunca apresentou suporte para SMIL e os desenvolvedores do Chrome falaram sobre remover suporte para essa sintaxe em favor de CSS e animações web. O uso de CSS para animar SVGs também tem a vantagem de ser bastante simples em comparação com SMIL ou JavaScript (embora existam algumas bibliotecas por aí, como Snap ou Velocity, que visam simplificar esse processo).Agora, enquanto os gráficos vetoriais escaláveis podem ser integrados em sites como imagens embutidas, fundos CSS ou gráficos inline, você só pode usar animações CSS para a última opção. Isso significa que só podemos animar a marcação SVG que está diretamente dentro do nosso código HTML.Vejamos alguns exemplos. Lembre-se do logotipo da Adobe SVG, nós fomos mais cedo? Nós vamos usar uma animação de hover simples e efeito de transição para mudar sua cor. Começamos especificando uma classe para o caminho vetorial (o qual nomearemos adobe-logo), depois adicionando os efeitos a essa classe em nosso arquivo de estilo. Veja o que o HTML pareceria:
Agora, nos mudamos para o nosso arquivo styles.css:
O que seria assim:
Se, ao invés de uma animação hover, você deseja adicionar um efeito de preenchimento e traçado ao mesmo gráfico SVG, o código seria algo como:
Quando tudo estiver definido, aqui está o que parece ser:
Conclusão
Se usado corretamente, as animações podem elevar a experiência do usuário e o design geral de um site. Embora os SVGs em combinação com o CSS ofereçam uma maneira elegante de implementá-los, há muitos outros métodos que você também pode tentar até encontrar o que melhor satisfaça as suas necessidades.Se você escolher ir com animações CSS para SVGs, lembre-se de seguir os conselhos acima:- Escolha uma ferramenta de editor gráfico compatível.
- Lembre-se de sempre otimizar seu código SVG.
- Tenha em mente que você só pode implementar animações “simples” usando esta técnica.
Nós temos a solução
Tenha uma equipe profissional pronta para te ajudar rapidamente
