6 vantagens do SVG: por que todo designer usa

Vantagem um: ampliação sem limites e sem distorção

O SVG descreve as formas com caminhos matemáticos, e ao ampliar o navegador apenas redesenha no novo tamanho. Um ícone fica nítido em telas Retina, e um logotipo continua claro mesmo no tamanho de um outdoor, sem a necessidade de preparar várias resoluções como acontece com bitmaps. Essa é a vantagem central da imagem vetorial e a razão fundamental de logotipos e ícones precisarem ser vetorizados. Em páginas responsivas, um único ícone SVG cobre do celular à tela 4K, sem precisar recortar imagens diferentes para cada aparelho.

Vantagem dois: arquivo leve e página rápida

O SVG de um ícone simples costuma ter apenas alguns KB, bem menos que várias resoluções em PNG. E como o SVG é texto, a compressão gzip/Brotli funciona muito bem, reduzindo ainda mais 60 a 80% o volume transmitido. Em páginas cheias de ícones, trocar por SVG reduz de forma perceptível o consumo de banda. Naturalmente, ilustrações complexas exigem controlar o número de caminhos, e as técnicas para isso estão em dicas de otimização de SVG. Depois que o sistema de ícones passa a usar SVG, o total de bytes das imagens da primeira tela costuma cair pela metade ou mais, o que faz diferença especial em redes lentas.

Vantagem três: programável, interativo e animável

O SVG faz parte do DOM: dá para mudar a cor de preenchimento de um ícone com CSS, acionar animações de traço com JavaScript e responder a cliques e ao passar do mouse. Trocar a cor dos ícones no modo escuro, destacar um gráfico ao passar o mouse e animações de carregamento são resolvidos direto em SVG, sem trocar de imagem nem usar animações quadro a quadro. É algo que formatos bitmap não conseguem fazer. A visualização de dados é a maior beneficiária: cada barra e cada trecho de linha do gráfico é um caminho independente, com destaque ao passar o mouse e detalhamento por clique ligados diretamente a eventos.

Vantagem quatro: texto editável, amigável ao SEO e à acessibilidade

O texto dentro de um SVG é texto de verdade: pode ser selecionado, pesquisado e traduzido. Descrever o gráfico com <title> e <desc> faz com que os leitores de tela anunciem o conteúdo e com que os motores de busca entendam o significado da imagem. Em bitmaps, o texto é apenas pixels, invisível para buscadores e para pessoas com deficiência visual. Sites multilíngues ainda traduzem o texto dentro do SVG sem precisar recortar tudo de novo.

Vantagem cinco: um único arquivo, várias plataformas

O mesmo SVG serve para a web, para ser exportado como PNG de alta resolução em documentos e para ser entregue a impressoras e gravadoras a laser. Quando a cor da marca muda, altera-se um único arquivo-fonte e todos os pontos de uso são atualizados juntos, sem refazer cada tamanho. Para equipes, isso significa uma queda forte no custo de manutenção de materiais. Times de e-commerce e de marca se beneficiam especialmente: uma única vetorização serve para página de produto, embalagem e material de feira, e a troca de cor exige manter só um fonte.

Vantagem seis: padrão aberto e ecossistema maduro

O SVG é um padrão aberto do W3C, suportado nativamente por todos os navegadores modernos e lido e gravado por ferramentas como Illustrator, Figma e Inkscape, sem dependência de um único fornecedor. Com honestidade, o SVG também tem limites: não serve para imagens de nível fotográfico, o desempenho de renderização cai quando os caminhos ficam muito complexos, e para fotos continue usando JPG/WEBP. A comunidade de código aberto também formou uma cadeia de ferramentas madura em torno do SVG: a compactação com SVGO, bibliotecas de ícones e de animação prontas para uso.

Quer começar a usar SVG? Use a ferramenta imagem para SVG para transformar os bitmaps que você tem em vetores, ou navegue na galeria PolySVG e baixe materiais vetoriais grátis. Para começar, leia O que é SVG e A diferença entre PNG e SVG.