O que é um arquivo SVG?

SVG é um formato de texto puro que abre em qualquer editor. Ele guarda formas e coordenadas em vez de pixels, então continua nítido em qualquer tamanho — uma logomarca levada ao tamanho de um outdoor não perde nada. Ele é usado para a web, logotipos e desenho de linha e a edição.

A extensão é .svg e o nome por extenso é Scalable Vector Graphics. Os dois importam menos do que aquilo que o arquivo consegue carregar, e é disso que trata o resto desta página.

A W3C publicou o formato em 2001. A especificação é SVG 1.1.

A idade interessa por um motivo prático: quanto mais antigo o formato, mais programas tiveram tempo de aprendê-lo.

Ela está publicada por inteiro, então dá para implementá-la a partir do documento em vez de por observação — é por isso que o formato aparece em tantos programas e por isso que arquivos escritos há vinte anos ainda abrem. Especificação publicada não é o mesmo que livre de royalties: quando o formato embrulha um codec, o licenciamento das patentes é uma questão à parte, que a norma não resolve.

SVG guarda o conteúdo exatamente. Salvar de novo não muda nada, então dá para abrir, editar e salvar quantas vezes você quiser sem acumular estrago — e é isso que faz dele um formato de trabalho e não de entrega.

SVG carrega um canal alfa, então uma logomarca mantém as bordas suaves por cima do que estiver atrás em vez de chegar dentro de uma caixa branca.

SVG consegue guardar uma animação em vez de uma imagem parada. Vale saber disso antes de converter: um destino que só comporta um quadro fica com o primeiro e larga o resto, quase sempre sem avisar.

Ele consegue trabalhar em RGB.

Oito bits por canal é o que uma tela mostra e o que praticamente todo formato de entrega carrega.

SVG guarda as partes de uma imagem separadas em vez de achatadas, e é isso que faz dele um arquivo de trabalho. Quase todo formato para o qual ele converte achata as camadas, e o achatamento não tem volta: guarde o original com camadas.

Inkscape, Adobe Illustrator e Figma leem esse formato, e a maioria dos programas do mesmo tipo também.

Quando um arquivo não abre, o formato raramente é o problema — mais comum é o programa ser mais antigo que ele. Converter para algo mais antigo é o caminho confiável, e é para isso que serve o resto deste site.

Qualquer navegador atual lê o formato.

Dá para colocá-lo numa página ou anexá-lo a uma mensagem sem se perguntar o que o outro lado tem instalado.

SVG foi feito para ser aberto e alterado. Mantenha o arquivo nesse formato enquanto o trabalho estiver em andamento e exporte a partir dele sempre que precisar de uma cópia pronta.

Um SVG é um documento XML. Abra um num editor de texto e você encontra instruções legíveis: desenhe um círculo nesta coordenada com este raio, preencha este caminho com esta cor, coloque este texto nesta posição. Não há pixel nenhum no arquivo.

Essa propriedade sozinha o torna diferente de todo outro formato de imagem. Pode ser comparado em controle de versão, editado à mão, gerado por um script, comprimido pelo mesmo gzip que comprime HTML, e buscado. Também significa que um SVG quebrado geralmente pode ser diagnosticado lendo-o, o que não vale para um PNG corrompido.

O arquivo descreve formas em vez de uma grade de valores de cor, então o renderizador as desenha do zero no tamanho que for pedido. Uma logo exibida a 24 pixels e impressa com um metro de largura vem do mesmo arquivo e é exata nos dois casos.

É por isso que SVG é a resposta certa para logos, ícones, diagramas e gráficos, e a resposta errada para fotografias. Uma fotografia não tem formas para descrever — converter uma para SVG produz um arquivo enorme de retângulos coloridos ou uma aproximação posterizada, e nenhum dos dois é o que alguém queria.

Dois atributos decidem como um SVG se comporta num layout. `width` e `height` dão um tamanho intrínseco; `viewBox` define o sistema de coordenadas em que as formas são desenhadas. Com um viewBox presente, o desenho escala para qualquer caixa que a página der.

Quase toda reclamação sobre um SVG aparecer no tamanho errado remonta a isso. Um arquivo com dimensões fixas e sem viewBox ignora dimensionamento CSS e fica no que a ferramenta de design escreveu. Adicionar um viewBox que combina com a arte costuma ser uma correção de uma linha e é o que transforma um arquivo exportado num ativo utilizável.

Um SVG que contém texto referencia suas fontes por nome, exatamente como uma página web faz. Numa máquina sem a tipografia, o renderizador substitui por outra coisa, as larguras das letras mudam, e uma marca nominativa posicionada com cuidado desliza ou transborda suas formas.

A defesa padrão é converter texto em caminhos, transformando cada letra num contorno. Isso garante a aparência em qualquer lugar e torna o texto permanentemente não editável e não pesquisável. Para uma logo, essa é a troca certa; para um gráfico com rótulos de eixo ou um diagrama que precisa ser mantido, não é, e vale guardar uma versão com texto vivo ao lado, mesmo que seja um segundo arquivo.

Quando um SVG é escrito diretamente no HTML em vez de carregado por uma tag `<img>`, seus elementos viram parte da página. CSS consegue recolorir um caminho no hover, uma folha de estilo consegue adaptar um ícone para o modo escuro, e JavaScript consegue animar peças individuais.

Carregado por `<img>` ou como fundo CSS, nada disso se aplica — o SVG é renderizado isoladamente e a página não consegue alcançar dentro dele. Essa distinção decide qual técnica usar, e é por isso que o mesmo arquivo pode ser estilizável num lugar de um site e inerte em outro.

Por ser um documento em vez de uma imagem, um SVG pode conter elementos `<script>`, referências externas e links. Servido do seu próprio domínio e aberto diretamente, esse script roda com os privilégios do seu site — um vetor de cross-site scripting que um PNG simplesmente não tem.

É por isso que muitos formulários de upload recusam SVG de saída, e por isso que um site aceitando SVGs de usuários deveria sanitizá-los em vez de confiar. Vale saber também como destinatário: um SVG de fonte desconhecida está mais perto de um arquivo HTML do que de uma imagem, e abri-lo num navegador não é o ato neutro que parece.

Illustrator, Figma e Sketch escrevem bastante andaime: metadados de editor, nomes de camada, grupos vazios, coordenadas com dezesseis casas decimais, e definições que nada referencia. Um ícone que deveria ter 800 bytes comumente exporta com oito kilobytes.

Otimizadores removem tudo isso sem mudar o que é desenhado, e reduções de 60 a 80 por cento são comuns. Também comprime bem no transporte por ser texto — um servidor mandando gzip ou brotli reduz de novo —, motivo pelo qual um conjunto de ícones SVG bem preparado costuma ser menor que um único PNG.

Um SVG pode incorporar um bitmap como um data URI em base64, e alguns caminhos de exportação fazem isso sem avisar — uma forma com um efeito que o formato não consegue expressar é achatada para uma imagem e envolvida em SVG.

O resultado é um arquivo com extensão `.svg` que não escala, porque o que está dentro é uma grade fixa de pixels. Se um SVG parece borrado ao ampliar, quase sempre é por isso, e o conserto fica rio acima, no arquivo de design, não na exportação.

PNG quando um raster de tamanho fixo é necessário e transparência importa — escolha as dimensões em pixels com cuidado, porque essa decisão é o que você está abrindo mão. JPG quando a arte vai para algum lugar que recusa PNG, aceitando que a transparência vira um fundo sólido. PDF quando vai para impressão, o que não perde nada já que os dois descrevem formas.

Guarde o SVG em todo caso. Toda exportação raster é uma decisão sobre um tamanho, e o original é a única versão que ainda consegue produzir qualquer outro. Converter para SVG a partir de uma fotografia é a direção que raramente faz sentido — não há formas numa fotografia para descrever.