Como criar um logotipo animado com SVG, CSS e DIVI

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.

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.

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…

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 extrem…

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 …