O que é um arquivo SVG? Como usá-lo no web design?

Seu site está sofrendo com logotipos desfocados e imagens pixeladas em diferentes telas? O SVG (um formato de arquivo favorável para a web) tem a solução. Diferente de imagens baseadas em pixels, os SVGs usam fórmulas matemáticas para permanecerem nítidos e claros em qualquer tamanho.

Esteja você construindo uma loja virtual ou renovando sua identidade de marca, entender os arquivos SVG pode transformar a forma como seus gráficos aparecem para os clientes. Neste artigo, confira tudo o que você precisa saber sobre arquivos SVG, os principais recursos e por que eles são essenciais para logotipos, gráficos, ícones e outros elementos visuais da web que precisam parecer profissionais em todos os dispositivos.

O que é um arquivo SVG?

SVG significa “Scalable Vector Graphics” (ou Gráficos Vetoriais Escalonáveis), um formato de imagem que usa vetores, um método de representar gráficos usando fórmulas matemáticas que definem formas, linhas e cores sólidas. Diferente de imagens raster (ou bitmap), que são compostas por uma grade fixa de pixels coloridos, você pode dimensionar imagens SVG para qualquer tamanho sem que elas fiquem desfocadas ou pixeladas.

As imagens SVG permanecem nítidas em qualquer resolução porque o computador as redesenha com base em instruções matemáticas exatas, como seguir uma receita que se ajusta ao tamanho do seu jantar. Os usos comuns para arquivos vetoriais como SVG incluem logotipos, ilustrações, fontes e ícones (qualquer elemento visual da web que deve permanecer nítido e consistente em qualquer tamanho). Arquivos no formato SVG são menores que formatos raster como PNG e JPEG, então eles carregam mais rápido e melhoram a experiência do cliente.

Como funcionam os arquivos SVG?

Os SVGs usam codificação em formato XML, semelhante ao texto marcado encontrado em um arquivo HTML, tornando-os editáveis em qualquer editor de texto. Em vez de uma grade de pixels, um arquivo SVG armazena formas, linhas e cores como código XML (ou seja, a receita). A codificação XML tem algumas vantagens.

• Útil para SEO: os mecanismos de busca podem escanear XML em busca de palavras-chave, como as palavras no logotipo da sua empresa, dando ao SVG uma vantagem de SEO sobre imagens raster, onde o texto dentro da imagem fica invisível para os mecanismos de busca, a menos que seja explicitamente descrito no texto alternativo.
• Mais acessível: os leitores de tela podem escanear SVGs, melhorando a acessibilidade do site. Como um elemento SVG pode ser marcado semanticamente (usando elementos <title> e <desc>), os leitores de tela podem ler e vocalizar o que a imagem representa (uma vantagem para usuários com deficiência visual).
• Ideal para e-commerce: a escalonabilidade do SVG, tamanho pequeno de arquivo, aparência limpa e compatibilidade com linguagens web como CSS e JavaScript o tornam uma escolha inteligente para o desenvolvimento de lojas virtuais. A Shopify tem compatibilidade nativa com SVG (dentro da pasta de assets usada para desenvolvimento de temas, logotipos e ícones).

No entanto, saiba que conteúdo SVG malicioso contendo JavaScript pode ser executado no navegador de um usuário, roubando cookies, sequestrando sessões ou desfigurando o site. A Shopify sanitiza automaticamente os arquivos SVG no upload para evitar conteúdo malicioso no código XML e eliminar riscos de segurança como “cross-site scripting”.

Uma breve história do formato de arquivo SVG

O formato de arquivo SVG foi proposto pela primeira vez em 1994 pelo engenheiro de software holandês Martijn Koster. No final dos anos 1990, o World Wide Web Consortium (W3C) solicitou propostas para um novo formato de gráfico vetorial favorável para a web. O W3C estabeleceu os arquivos SVG em 1999 como um formato gráfico vetorial de padrão aberto para a web, e ele se tornou um padrão aprovado pela Organização Internacional de Normalização (ISO) em 2003. A adesão da SVG foi lenta no início, ganhando bastante força apenas depois que os principais navegadores (incluindo Chrome, Firefox, Safari e Opera) apresentaram uma compatibilidade nativa no final dos anos 2000 e início dos anos 2010.

[CTA box]

Diferenças entre arquivos SVG, PNG e JPEG

• Vetores matemáticos vs. grades de pixels
• Escalonabilidade
• Tamanho do arquivo
• Casos de uso
• SEO e acessibilidade
• Edição e interatividade

Diferente de arquivos raster baseados em pixels como JPEGs e PNGs, o SVG usa algoritmos para desenhar uma imagem. Isso é útil e eficiente para a maioria dos tipos de imagem, com uma exceção: imagens fotográficas ou altamente detalhadas.

A seguir, estão as principais diferenças entre SVG e tipos de arquivo raster.

Vetores matemáticos vs. grades de pixels

O SVG armazena imagens como fórmulas que definem pontos, linhas e cores sólidas. Os formatos raster usam bitmaps, que consistem em um número fixo de pixels individuais mapeados em uma grade.

Escalonabilidade

O navegador recalcula a receita matemática conforme você dimensiona uma imagem SVG, então você pode redimensioná-la sem perda de qualidade. PNG e JPEG são baseados em pixels com resoluções fixas; aumentar o tamanho reduz a qualidade, introduzindo desfoque ou pixelização.

Tamanho do arquivo

Os arquivos SVG tendem a ser menores que imagens raster, o que os torna úteis para otimização de imagens. Converter uma imagem fotográfica complexa para SVG pode resultar em um arquivo grande e inutilizável. Arquivos PNG e JPEG são mais eficientes para imagens detalhadas com gradações finas de cor. Por exemplo, é melhor salvar como JPEG ou PNG um bitmap criado no Adobe Photoshop com texturas complexas, pincéis ou elementos fotográficos, já que esses detalhes não se traduzem bem em linhas limpas.

Casos de uso

O SVG é ideal para gráficos bidimensionais como gráficos, ilustrações, logotipos, ícones e diagramas, pois dimensiona de forma limpa em diferentes resoluções de tela. Para outros formatos de imagem, o JPEG é melhor para fotos digitais de alta definição enquanto o PNG é melhor para gráficos web e logotipos, graças à compressão sem perdas e compatibilidade com transparência. Observe que, diferente do SVG, o PNG não é independente de resolução, dando ao SVG uma grande vantagem quando se trata de escalonabilidade.

SEO e acessibilidade

Os gráficos SVG permitem que mecanismos de busca como o Google leiam o texto dentro deles, podendo melhorar a classificação do seu site nos resultados de pesquisa. Os arquivos SVG também podem ser lidos por leitores de tela, tornando-os mais acessíveis para pessoas com deficiência. PNG e JPEG tratam o texto como parte da imagem, dificultando a leitura ou indexação por mecanismos de busca e leitores de tela.

Edição e interatividade

Você pode editar arquivos SVG em um editor de texto modificando a marcação XML e facilmente estilizá-los ou manipulá-los com linguagens web como JavaScript e CSS. PNG e JPEG precisam de software especial de edição de imagens para fazer alterações, limitando o nível de controle sobre eles, mas também reduzindo o risco de código malicioso.

Por que usar um arquivo SVG?

• Escalonabilidade infinita
• Tamanho de arquivo gerenciável
• Benefícios de SEO
• Acessibilidade
• Editabilidade
• Suporte do navegador

Os gráficos SVG fazem sentido para e-commerce porque permanecem nítidos em qualquer dispositivo, carregam rapidamente, melhoram o SEO e a acessibilidade, e funcionam em todos os navegadores web modernos. A seguir, confira mais detalhes sobre essas vantagens.

Escalonabilidade infinita

Você pode redimensionar SVGs para cima ou para baixo sem sacrificar a qualidade da imagem porque o navegador recalcula as fórmulas matemáticas da imagem para linhas e pontos em qualquer escala.

Tamanho de arquivo gerenciável

Os arquivos SVG geralmente são menores que imagens raster como PNGs e JPEGs. Esse tamanho de dados menor resulta em tempos de carregamento mais rápidos, melhorando a experiência do usuário.

Benefícios de SEO

Mecanismos de busca como o Google podem facilmente indexar texto em arquivos SVG, podendo beneficiar suas classificações nos mecanismos de busca (pensando no SEO). Por exemplo, um logotipo de empresa dentro do gráfico SVG pode conter o texto com o nome da empresa e outras palavras-chave.

Acessibilidade

Os SVGs armazenam texto como elementos de texto reais, então os leitores de tela podem ler arquivos SVG em voz alta, ajudando pessoas que precisam de assistência para ler páginas web.

Editabilidade

Você pode alterar o código XML em arquivos SVG usando um editor de texto para inserir tags de marcação, tornando os SVGs bastante personalizáveis e fáceis de manipular sem usar um software gráfico especializado.

Os SVGs também podem interagir com outras tecnologias web, como JavaScript e CSS, permitindo gráficos dinâmicos e envolventes com animações, interações do usuário e mudanças de estilo em tempo real. Isso torna os SVGs versáteis para design web responsivo e interativo.

Compatibilidade do navegador

A falta de compatibilidade do navegador já foi um obstáculo do SVG, mas não mais. Os navegadores web modernos (incluindo Chrome, Edge, Safari e Firefox) suportam nativamente arquivos SVG. Navegadores mais antigos (como o Internet Explorer) podem não ser compatíveis com imagens SVG.

Usos comuns para arquivos SVG

O SVG é ideal para qualquer imagem bidimensional com linhas e formas suaves. Confira os usos comuns para arquivos SVG em web design.

• Logotipos: como os logotipos de empresas geralmente são reutilizados em diferentes plataformas e devem aparecer nítidos em tamanhos diferentes, os SVGs resolvem os problemas de escalonabilidade comuns com formatos raster como JPEG e PNG.
• Ícones: são muito adequados para a conversão em imagens vetoriais escalonáveis (devido às bordas claras e designs simples).
• Ilustrações: visuais não fotográficos, como desenhos de linha, dimensionam bem como arquivos SVG e ajudam a conservar espaço de arquivo.
• Gráficos e tabelas: os SVGs podem criar visualizações de dados escalonáveis, e seu texto é totalmente pesquisável e indexável.
• Elementos animados: você pode usar CSS e JavaScript para animar SVGs, tornando-os úteis para microinterações e exibições dinâmicas.

[CTA box]

Como criar e editar um arquivo SVG

• Crie um arquivo SVG do zero
• Converta um arquivo para SVG
• Edite um arquivo SVG

Teoricamente, você pode codificar um arquivo SVG em XML ou convertê-lo de outros tipos de arquivo, mas usar software de ilustração profissional é a abordagem mais popular e menos propensa a erros. Veja como criar e editar um arquivo SVG.

Crie um arquivo SVG do zero

Para criar um arquivo SVG do zero, use um programa de design gráfico e desenhe sua imagem dentro de um aplicativo como Adobe Illustrator (o editor de gráficos vetoriais padrão da indústria), Inkscape (gratuito), Microsoft Visio, Editor SVG do Canva, CorelDRAW ou Google Drawings (gratuito). Quando seu design estiver completo, navegue até o menu “Arquivo”, selecione “Exportar” ou “Salvar Como” e escolha “SVG” como formato.

Converta um arquivo para SVG

Se você preferir não baixar um software, sua melhor opção para converter de outro formato para SVG é usar ferramentas online. Alguns conversores online incluem uma visualização do seu SVG convertido antes do download e um editor integrado para fazer ajustes menores.

Antes de usar essas ferramentas, certifique-se de selecionar imagens com formas e contornos simples. Tentar converter imagens fotográficas com muitos detalhes provavelmente resultará em arquivos SVG muito ineficientes.

A seguir, estão quatro opções de ferramentas.

• Conversor SVG Gratuito do Adobe Express: é bom se você tem familiaridade com o ecossistema Adobe. É conhecido pela interface polida, integração com outras ferramentas Adobe e resultados de qualidade.
• CloudConvert: um conversor versátil e compatível com uma enorme variedade de formatos de arquivo, incluindo vários tipos de imagem para SVG.
• Convertio: semelhante ao CloudConvert, é fácil de usar e é compatível com muitos formatos.
• FreeConvert: outro conversor robusto que usa criptografia SSL de 256 bits ao transferir arquivos e os exclui automaticamente após algumas horas.

Edite um arquivo SVG

Para editar um arquivo SVG existente, a abordagem mais prática é usar um editor de gráficos vetoriais como o Adobe Illustrator. Esses programas são projetados para manipular uma imagem vetorial.

Abra arquivos SVG no aplicativo editor e use suas ferramentas gráficas para modificar elementos individuais como caminhos, formas ou grupos. Você pode redimensionar, remodelar, transformar, adicionar cor ou aplicar efeitos a esses elementos.

Tecnicamente falando, você pode editar arquivos SVG em um editor de texto simples, já que eles são escritos em código XML, mas esse método não é recomendado para edições extensas porque o risco de danificar o arquivo é alto. As edições XML são adequadas para ajustes menores, como alterar um atributo de cor.