SVGZ ou SVG: escolha um arquivo para editar ou entregar

SVGZ é um arquivo SVG comprimido com gzip. Descomprima-o e você recupera o documento SVG, incluindo seus traçados, cores, texto e quaisquer imagens incorporadas. O registro do tipo de mídia SVG do W3C define .svgz como um alias de .svg.gz.

Escolha entre SVGZ e SVG conforme o fluxo de destino. Mantenha um .svg comum quando alguém precisa de marcação legível ou um aplicativo espera esse formato. Use .svgz quando o destinatário oferece suporte e você tem um motivo para entregar um arquivo comprimido. Para um site, confira a compressão HTTP antes de alterar nomes de arquivo: uma URL que termina em .svg já pode enviar conteúdo comprimido.

O exemplo abaixo comprime um emblema original de 332 bytes para 243 bytes e restaura os bytes originais exatos. Esse é o resultado de um arquivo, não uma promessa sobre sua arte ou a velocidade da página.

O que muda quando SVG se torna SVGZ?

O guia de tipos de arquivo SVG da MDN diferencia SVG comum em texto de SVG comprimido com gzip e explica a configuração de servidor exigida pelo SVGZ. Se o documento subjacente é desconhecido, comece por o que um arquivo SVG contém.

Uma cópia comprimida é um empacotamento útil. Mantenha seu mestre editável separadamente para poder inspecionar objetos, fazer correções e exportar a forma necessária à próxima ferramenta.

Experimente um ciclo de SVGZ com um pequeno emblema

Esta ilustração original contém um hexágono verde-azulado, um sol coral e uma montanha clara. Salve o seguinte como badge.svg em uma pasta de trabalho:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
  <title>Mountain badge</title>
  <path d="M80 12 139 46v68l-59 34-59-34V46Z" fill="#157d78"/>
  <circle cx="108" cy="53" r="12" fill="#ef8067"/>
  <path d="m38 111 32-49 21 30 10-15 25 34Z" fill="#fffdf5"/>
  <path d="m60 78 10-16 11 16-11-5Z" fill="#a8d9d3"/>
</svg>

Em um sistema com gzip, cmp e wc, execute estes comandos nessa pasta. Use novos nomes de saída se esses arquivos já contêm trabalho que você precisa manter.

gzip -n -c badge.svg > badge.svgz
gzip -dc badge.svgz > roundtrip.svg
cmp badge.svg roundtrip.svg
wc -c badge.svg badge.svgz roundtrip.svg

O primeiro comando grava uma cópia comprimida e mantém o arquivo original. A opção -n omite o nome de arquivo original e a marca de data e hora do cabeçalho gzip. O segundo comando decodifica a cópia comprimida em outro arquivo. cmp confere os bytes, e wc -c informa suas contagens.

Executamos essa sequência com Apple gzip 457.140.3. Todos os comandos terminaram com sucesso, e cmp não encontrou diferença entre o SVG original e o decodificado.

O arquivo comprimido economizou 89 bytes, cerca de 26.8% do tamanho deste arquivo original. Diferenças de espaços em branco, finais de linha, metadados, arte ou configurações de compressão podem alterar o resultado. A comparação de bytes demonstra que esse ciclo preservou o arquivo original. Ela não mede tempo de transferência no navegador, desempenho de renderização nem compatibilidade com um aplicativo de edição.

Se você só precisa abrir um SVGZ em um editor que espera SVG, a descompressão é a operação relevante. Renomear badge.svgz para badge.svg deixa os bytes comprimidos no lugar. Da mesma forma, renomear um SVG para SVGZ não executa gzip.

Separe a compressão da limpeza da arte

Suponha que um logo vetorizado tem um contorno irregular e centenas de pontos desnecessários. O gzip pode reduzir seu tamanho armazenado, mas a decodificação retorna esses mesmos pontos. Use o guia de limpeza de nós SVG quando o problema de edição é a complexidade geométrica. Compare a silhueta durante a simplificação, pois remover pontos pode alterar a arte.

A otimização da marcação é outra operação. Remover metadados, reescrever números ou unir formas compatíveis altera o documento de origem antes de ele ser comprimido. Um ciclo gzip idêntico byte a byte não faz nada disso. Se uma ferramenta de otimização também edita o SVG, revise sua saída de forma independente, em vez de atribuir todas as mudanças à compressão. O guia de configuração do SVGO e preservação de IDs demonstra essa revisão com um emblema original cuja referência CSS externa desaparece com a predefinição padrão.

Um SVG também pode conter uma imagem raster. Comprimir esse documento preserva a imagem incorporada; não cria contornos editáveis ao redor dos objetos da imagem. O diagnóstico de raster incorporado ajuda a distinguir um contêiner de imagem de uma arte construída com traçados vetoriais.

Essas distinções facilitam escolher o próximo passo: descomprimir para recuperar a marcação, editar para mudar a geometria e vetorizar apenas quando uma arte raster adequada precisa de novas formas vetoriais.

Um site pode comprimir respostas SVG comuns

A compressão HTTP é independente do nome de arquivo mostrado em uma URL. Um servidor pode receber uma requisição para badge.svg e enviar uma representação comprimida desse SVG. O guia de compressão HTTP da MDN descreve a negociação: a requisição anuncia as codificações compatíveis, e a resposta identifica a codificação usada. Quando a representação varia por Accept-Encoding, a resposta usa Vary: Accept-Encoding para que os caches diferenciem essas versões.

Para uma resposta SVG codificada com gzip, os cabeçalhos relevantes são:

Content-Type: image/svg+xml
Content-Encoding: gzip

Content-Type identifica a mídia decodificada. Content-Encoding informa ao destinatário como decodificar o corpo da resposta. A referência de Content-Encoding da MDN explica essa distinção. Esses cabeçalhos precisam descrever os bytes realmente enviados; adicionar Content-Encoding: gzip a um SVG sem compressão não o comprime.

Para um .svgz armazenado e servido como imagem SVG, as orientações de servidor SVGZ da MDN exigem o tipo de mídia SVG e a codificação de conteúdo gzip. Inspecione a resposta final no painel Network do navegador, incluindo qualquer comportamento da CDN. Um arquivo local que abre com sucesso não verifica essa resposta.

Antes de substituir um SVG existente por SVGZ, confira se a resposta SVG comum já está comprimida. Compare as respostas reais nas mesmas condições, incluindo o estado do cache, em vez de comparar o tamanho de um arquivo SVG local com o tamanho de transferência de rede. Nosso teste do emblema acima não faz essa comparação web.

Envie um arquivo que o próximo aplicativo consiga usar

Para uma entrega editável, pergunte qual formato o destinatário importa. Se ele aceita SVG, mas rejeita SVGZ, forneça o SVG descomprimido e teste essa cópia. A descompressão não adiciona suporte a recursos SVG que o próprio aplicativo não entende.

Abra o arquivo aceito no aplicativo pretendido e inspecione seus objetos. Confira letras, recortes, imagens incorporadas, cores e os menores detalhes importantes. Mantenha essa revisão separada da decodificação do arquivo: bytes de origem idênticos ainda podem ser interpretados de forma diferente por aplicativos com suporte diferente a recursos.

Se um arquivo parece vazio, estabeleça primeiro se ele foi decodificado em SVG legível. Depois, investigue o documento e seu contexto de exibição com o guia de solução de problemas de SVG em branco. Compressões repetidas não reparam pintura invisível, conteúdo ausente nem uma tela inadequada.

Mantenha o mestre, a cópia de entrega e uma nota curta com o nome da ferramenta de destino. Isso é mais útil que escolher o menor arquivo local antes de saber para onde ele irá.

Quando a imagem original ainda precisa de traçados vetoriais

Se o mestre vetorial está ausente e resta apenas um logo PNG ou JPG de imagem plana, o fluxo de imagem para vetor do PerfectVector pode ajudar a preparar uma versão candidata em SVG editável. Compare a prévia com o original, inspecione vazados e regiões separadas e abra o arquivo baixado no editor pretendido. Escolha a compressão somente depois de aceitar a arte.

O PerfectVector não é necessário para desempacotar um SVGZ existente. Use descompressão para essa tarefa. Mantenha fotografias ou efeitos pintados como raster quando isso preserva a aparência pretendida e use um mestre vetorial existente sempre que disponível. Os guias de formato e edição do blog abordam essas escolhas de imagem original antes do empacotamento.

Perguntas frequentes

SVGZ tem qualidade maior que SVG? Não. A compressão gzip muda a representação armazenada. Uma descompressão correta restaura o SVG original; não melhora seus traçados, cores ou imagens incorporadas.

Como transformo um SVGZ em SVG? Descomprima-o com uma ferramenta que trate gzip e salve o SVG decodificado. Por exemplo, gzip -dc badge.svgz > roundtrip.svg grava uma cópia decodificada. Renomear apenas a extensão não executa essa operação.

SVGZ sempre deixa um site mais rápido? Nenhum benefício fixo de velocidade decorre da extensão. Uma resposta SVG comum pode já usar compressão HTTP. Confira os cabeçalhos reais da resposta, os bytes transferidos, as condições de cache e o comportamento da página.

Comprimir SVG reduz sua quantidade de nós? Não. O gzip preserva o arquivo original durante a decodificação. A simplificação de traçados ou outra otimização SVG é uma operação separada que precisa de sua própria revisão da arte.

Fontes

1. W3C — registro do tipo de mídia SVG — Define SVGZ como SVG comprimido com gzip e sua relação com SVG.GZ.
2. MDN — primeiros passos com SVG — Diferencia as formas de arquivo e documenta os cabeçalhos de resposta SVGZ.
3. MDN — Content-Encoding — Explica a decodificação e a relação entre codificação e tipo de mídia.
4. MDN — compressão em HTTP — Aborda negociação de compressão de resposta e variação de cache.

Escolha o arquivo de entrega conforme a ferramenta de destino e verifique a arte decodificada. Se seu ponto de partida é um logo raster que precisa de formas editáveis, prepare uma versão candidata em SVG e revise seus traçados antes de decidir como comprimi-lo.