Artigo original: How to Use SVG Images in CSS and HTML – A Tutorial for Beginners, escrito por Edidiong Asikpo

Traduzido e adaptado por: Daniel Rosa

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.
ncSY7Rn
  • Clique na imagem chamada Happy news.
  • Na janela de pop-up, clique no botão Download SVG to your projects.
qGrT73n

Se você seguiu as etapas acima corretamente, a imagem SVG deve estar em seu computador agora.

3uCGy6B

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.