Como inserir ícones SVG em qualquer tipo de site
E aí pessoal, vamos lá pra mais um tutorial e hoje o assunto é ícones, recurso gráfico muito utilizado na web pra deixar os sites com uma aparência mais bacana e facilitar o entendimento do usuário sobre itens escolhidos e partes específicas.
O tutorial é bem rápido e prático, onde vou falar um pouco sobre SVG e depois vou mostrar como montar uma página web simples com ícones SVG. O conteúdo também está disponível em vídeo lá no meu canal do YouTube, então não deixe de assinar ;)
Qualquer dúvida sobre o post, vai lá no final da página e deixe seu comentário. Não se esqueça também de assinar a news do site e me seguir nas redes sociais pra ficar por dentro das novidades.
Na prática, trazendo para websites, você pode utilizar gráficos SVG pra fazer muitas coisas, entre elas o logo da sua empresa ou os ícones do site, e tudo baseado em linguagem XML, isso mesmo, os gráficos SVG são baseados em texto que o navegador interpreta, calcula e renderiza.
Sobre compatibilidade e desempenho, os browsers mais modernos contam com suporte nativo pra SVG, realizando renderização otimizada e permitindo também, se necessário, a manipulação através de Javascript.
Hoje existem versões gratuitas e pagas do Kit, e o nosso foco aqui no post é a gratuita, que já conta com muitos ícones pra você utilizar no seu site.
Gostando do conteúdo? Acesse o conteúdo completo de como inserir ícones SVG no seu site.
O tutorial é bem rápido e prático, onde vou falar um pouco sobre SVG e depois vou mostrar como montar uma página web simples com ícones SVG. O conteúdo também está disponível em vídeo lá no meu canal do YouTube, então não deixe de assinar ;)
Qualquer dúvida sobre o post, vai lá no final da página e deixe seu comentário. Não se esqueça também de assinar a news do site e me seguir nas redes sociais pra ficar por dentro das novidades.
O que é SVG?
SVG é a abreviatura de Scalable Vector Graphics e traduzindo para o português, podemos dizer que são gráficos vetoriais escaláveis, ou seja, são dinâmicos e que podem ser editados sem perder a qualidade, além disso é um formato aberto e mantido pela W3C.Na prática, trazendo para websites, você pode utilizar gráficos SVG pra fazer muitas coisas, entre elas o logo da sua empresa ou os ícones do site, e tudo baseado em linguagem XML, isso mesmo, os gráficos SVG são baseados em texto que o navegador interpreta, calcula e renderiza.
Sobre compatibilidade e desempenho, os browsers mais modernos contam com suporte nativo pra SVG, realizando renderização otimizada e permitindo também, se necessário, a manipulação através de Javascript.
O Kit Font Awesome
O Kit Font Awesome é um dos mais populares na web e facilita e muita vida do desenvolvedor na hora de inserir ícones no site, possibilitando que o trabalho seja realizado em segundos.Hoje existem versões gratuitas e pagas do Kit, e o nosso foco aqui no post é a gratuita, que já conta com muitos ícones pra você utilizar no seu site.
Criando a página web
Se preferir, tem o vídeo completo sobre como inserir ícones SVG no seu site aqui! Ah, prefere em texto? Então segue comigo na leitura!Gostando do conteúdo? Acesse o conteúdo completo de como inserir ícones SVG no seu site.
Comentários
Postar um comentário