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.