Utilizando SVG no CSS e HTML, sem arquivos separados

SVG, ou Scalable Vectorial Graphics, é um formato de imagem baseado em XML que vem sendo desenvolvido e mantido pela W3C desde 1999. Visto quem foi seu criador, já é de esperar que ele um dia fosse invadir a web.

O SVG se difere das imagens comuns por não “estourar” quando sua resolução original é alterada.

Veja no exemplo a seguir:

Bitmap vs. SVG
Fonte: SitePoint

Logo, sua vantagem é nítida em relação aos outros formatos de imagem, principalmente quando falamos de websites responsivos, onde muitas imaginas precisam se adaptar ao formato e tamanho de tela do usuário.

SVG e o CSS

Graças ao formato, é possível que se manipule imagens em diferentes momentos sem a necessidade de criar N arquivos diferentes para N resoluções diferentes, uma vez que um mesmo arquivo (com um tamanho consideravelmente menor) irá se adaptar perfeitamente em vários tamanhos diferentes que forem aplicados a ele.

Neste post, irei falar especificamente sobre como utilizar o SVG diretamente no CSS ou HTML, sem a necessidade de arquivos distintos para estas imagens.

SVG, Base 64 e a Data URI

Para incluir um SVG diretamente no CSS, iremos precisar converter o arquivo .svg para Base64: um formato de texto utilizado para representação de outros com apenas 64 caracteres. É possível encontrar websites que convertem arquivos para este formato, então não temos muito trabalho neste ponto.

Junto ao arquivo convertido para um texto em Base64, vem a possibilidade de se utilizar a Data URI, que nada mais é do que um formato de URI para indicar conteúdo inserido diretamente. Uma data uri tem o seguinte formato:

data:[<type>][;charset=<character set>][;base64],<data>

Então, após converter uma imagem SVG para o Base64, podemos montar a sua data URI como no exemplo a seguir. Tenha em mente que esta URI pode ser muito maior, uma vez que usei reticências para representá-la abaixo.

data:image/svg+xml;base64,PD94bWwgdmVyc2lvb...OjEiIC8+PC9zdmc+

Você pode ver um exemplo real aqui.

Conclusão

Sendo assim, iremos utilizar esta URI como usamos o caminho de imagens, tanto no HTML quanto no CSS, como nos exemplos a seguir:

HTML renderizado: SVG carregado via data uri

Tenha em mente que quanto maior for a sua imagem, mais extensa será sua representação com Base64. Logo, use com sabedoria! Comparativos diretos apontam que a string Base64 costuma ser maior que o arquivo que deu origem a ela. A vantagem de utilizar desta prática, é que para cada ícone/imagem inserido desta forma, seu website precisará realizar uma requisição a menos quando for acessado, o que pode ajudá-lo a carregar mais rapidamente.

Autor: João Otávio

Desenvolvedor Web / Mobile - PHP, Python, Android. Atualmente, desenvolvedor backend no Diários Associados.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *