Como usar imagens SVG no CSS e no HTML – um tutorial para iniciantes

Daniel Rosa — Wed, 03 Nov 2021 18:14:00 +0000

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

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 ao seu documento HTML e faça referência a ele no atributo src, assim:

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 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 , 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 . 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 . 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 .

Para fazer isso, abra a imagem SVG no VS Code ou em sua IDE favorita, copie o código e cole-o no elemento de seu documento HTML.


 // Cole o código da imagem SVG aqui.

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 ou com background-image.

4. Como usar uma SVG como um

Você também pode usar um elemento do HTML para adicionar imagens SVG a uma página da web usando a sintaxe de código abaixo:

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 tem suporte em todos os navegadores que também deem suporte às imagens SVG.

5. Como usar a imagem SVG como um

Mesmo que isso não seja recomendável, você também pode adicionar uma imagem SVG usando um , como vemos na demonstração abaixo.

Considere, no entanto, que os s podem ser difíceis de manter. Além disso, a Search Engine Optimization (SEO) de seu site será prejudicada.

Usar o 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

O elemento do HTML é outra forma de usar uma imagem SVG no HTML e no CSS usando esta sintaxe: .

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 , 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 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.

SVG - freeCodeCamp.org