Artigo original: How to Use SVG Images in CSS and HTML – A Tutorial for Beginners
SVG é a abreviação para Scalable Vector Graphics. É um formato de tipo de imagem exclusivo para gráficos com base vetorial escritos em linguagem de marcação extensível (XML).
Neste tutorial, explicarei o motivo para você querer usar as imagens SVG e como você pode utilizá-las em CSS e em HTML.
Por que você deve usar imagens SVG?
Há várias razões para usar imagens SVG. Aqui vemos algumas delas:
- Imagens SVG não perdem a qualidade em zoom ou quando redimensionadas.
- Elas podem ser criadas e editadas com uma IDE ou um editor de texto.
- São acessíveis e animáveis.
- São arquivos de tamanho pequeno e altamente escaláveis.
- Elas podem ser pesquisadas, indexadas, criadas por script e compactadas.
Vejamos agora como você pode trabalhar de fato com imagens SVG.
Como fazer o download da imagem SVG usada neste tutorial
Se quiser trabalhar com a imagem SVG que eu usei neste tutorial, siga as etapas (e o diagrama abaixo) para fazer o download da imagem.
- Vá para unDraw.
- Mude a cor do segundo plano para amarela.
- Na caixa de pesquisa, procure pela palavra happy.
- Clique na imagem chamada Happy news.
- Na janela de pop-up, clique no botão Download SVG to your projects.
Se você seguiu as etapas acima corretamente, a imagem SVG deve estar em seu computador agora.
Agora, abra a imagem SVG em sua IDE ou editor de texto favorito. Renomeie a imagem para happy.svg ou o nome que você preferir.
Como usar imagens SVG em CSS e em HTML
Há vários modos diferentes de se usar imagens SVG em CSS e em HTML. Veremos seis métodos diferentes neste tutorial.
1. Como usar uma imagem SVG como uma <img>
Este método é a forma mais simples de se adicionar imagens SVG a uma página da web. Para usar este método, adicione o elemento <img> ao seu documento HTML e faça referência a ele no atributo src, assim:
<img src = "happy.svg" alt="My Happy SVG"/>
Levando em consideração que você baixou a imagem SVG do unDraw e que a renomeou para happy.svg, adicione o trecho de código acima em seu documento HTML.
Se você fez tudo corretamente, sua página da web deve ter a aparência da demonstração abaixo. 👀
Ao adicionar uma imagem SVG usando a tag <img> sem especificar o tamanho, ela assume o tamanho do arquivo SVG original.
Por exemplo, na demonstração acima, eu não modifiquei o tamanho da imagem SVG. Por isso, ela assumiu o tamanho original (uma largura de 600.53015px e uma altura de 915.11162px).
Observação: para alterar o tamanho original, você têm de especificar width e height com CSS, como você pode ver na demonstração abaixo. Você também pode atualizar os parâmetros width e height originais diretamente.
Mesmo que possamos alterar o tamanho das imagens SVG adicionadas pela tag <img>, ainda há algumas restrições se você quiser fazer alterações de estilo maiores à imagem SVG.
2. Como usar a SVG como uma background-image do CSS
Esse modo é semelhante a adicionar SVG a um documento HTML usando a tag <img>. Dessa vez, contudo, faremos isso com o CSS em vez do HTML, como você pode ver no trecho de código abaixo.
body {
background-image: url(happy.svg);
}
Ao usar uma imagem SVG como segundo plano no CSS, ela tem limitações semelhantes àquelas da utilização da tag <img>. Ainda assim, ela permite um pouco mais de personalização.
Confira a demonstração abaixo e fique à vontade para fazer modificações usando o CSS.
3. Como usar imagens SVG em linha
As imagens SVG podem ser escritas diretamente no documento HTML usando a tag <svg> </svg>.
Para fazer isso, abra a imagem SVG no VS Code ou em sua IDE favorita, copie o código e cole-o no elemento <body> de seu documento HTML.
<body>
// Cole o código da imagem SVG aqui.
</body>
Se você fez tudo corretamente, sua página da web se parecerá com a demonstração abaixo.
Ao usar SVG em linha no documento HTML, o tempo de carregamento é reduzido, pois a imagem é servida como uma solicitação de HTTP.
Usar este método permite maior personalização, diferente do uso dos métodos com <img> ou com background-image.
4. Como usar uma SVG como um <object>
Você também pode usar um elemento <object> do HTML para adicionar imagens SVG a uma página da web usando a sintaxe de código abaixo:
<object data="happy.svg" width="300" height="300"> </object>
Use o atributo data para especificar o URL do recurso que você usará para o objeto, que, no nosso caso, é a imagem SVG.
Use width e height para especificar o tamanho da imagem SVG.
Novamente, abaixo vemos uma demonstração para que você possa entender melhor. 😃
O uso de <object> tem suporte em todos os navegadores que também deem suporte às imagens SVG.
5. Como usar a imagem SVG como um <iframe>
Mesmo que isso não seja recomendável, você também pode adicionar uma imagem SVG usando um <iframe> , como vemos na demonstração abaixo.
Considere, no entanto, que os <iframe>s podem ser difíceis de manter. Além disso, a Search Engine Optimization (SEO) de seu site será prejudicada.
Usar o <iframe> também faz cair por terra a finalidade de Scalable no nome Scalable Vector Graphics, já que as imagens SVG adicionadas neste formato não são escaláveis.
6. Como usar a imagem SVG como um <embed>
O elemento <embed> do HTML é outra forma de usar uma imagem SVG no HTML e no CSS usando esta sintaxe: <embed src="happy.svg" />.
Lembre-se, no entanto, de que este método também tem limitações. De acordo com a MDN, a maioria dos navegadores modernos deixou de usar e removeu o suporte a plug-ins de navegador. Isso significa que confiar em um <embed>, em geral, não é uma alternativa sábia quando queremos que nosso site possa ser corretamente visualizado nos navegadores dos usuários comuns.
Abaixo vemos uma demonstração do uso do elemento <embed> do HTML para adicionar uma imagem SVG.
Conclusão
Espero que você tenha aprendido a respeito das diferentes formas de usar imagens SVG no CSS e no HTML. Espero, também, que este artigo oriente você no sentido de escolher o método certo ao adicionar imagens SVG a um site da web.
Se tiver perguntas, envie uma mensagem no Twitter para a autora. Ela ficará feliz em respondê-las.