Como comprimir ficheiros SVG.

Abra o Compressor de SVG e escolha um ficheiro SVG ou Experimente uma amostra. A amostra é svg-compressor.svg, um ícone de órbita de 985 bytes com um viewBox de 512 × 512, preenchimento de gradiente, título e descrição. Utilize Colar SVG quando o código já estiver num editor ou na área de transferência.

A ferramenta aceita até 20 ficheiros com 2 MB cada. Analisa um documento SVG completo e remove declarações de documento SVG padrão sem carregar ficheiros externos. XML mal formado, declarações de entidades personalizadas e subconjuntos de documentos internos são rejeitados. Ficheiros muito complexos também podem atingir o limite de elementos ou de tempo de processamento.

Este fluxo de trabalho produz arte vetorial estática. Scripts, manipuladores de eventos, recursos externos, animações e imagens rasterizadas incorporadas são removidos. A pré-visualização Original já está higienizada, pelo que não deve ser interpretada como uma renderização irrestrita de todas as funcionalidades do ficheiro de origem.

Os dois painéis de pré-visualização mostram o original higienizado e o resultado otimizado. Os tamanhos junto a Original e Otimizado e o resumo de bytes comparam o ficheiro de origem com o resultado final. Reporta um aumento quando a otimização torna um ficheiro específico maior, em vez de prometer uma redução sempre.

Abra as Definições e defina a Precisão decimal para 2 para o exemplo. A precisão varia de 1 a 5 e começa em 3. Valores mais baixos podem simplificar a geometria numérica, mas podem deslocar curvas finas, pequenos espaços ou arestas alinhadas. Aumente-a quando a pré-visualização perder detalhes importantes.

Esta amostra utiliza geometria simples, pelo que a precisão 2 mantém a sua forma reconhecível. Outros SVGs com coordenadas decimais complexas podem sofrer mais alterações. Ver o código SVG otimizado expõe o texto real que será transferido; não é uma representação separada do original.

Deixe a opção Manter títulos e descrições acessíveis ativada para o exemplo prático. Isto retém o título e a descrição do SVG enquanto remove metadados de editor redundantes e simplifica o código elegível. Estes são tipos de informação diferentes e não devem ser tratados como intercambiáveis.

A opção Encurtar IDs internos está ativa por predefinição. O otimizador atualiza as referências dentro do SVG, mas CSS externos ou JavaScript podem ainda depender dos IDs originais. Desative esta opção quando o ficheiro fizer parte de uma aplicação maior que nomeia os seus elementos e teste o SVG final nesse contexto.

Deixe as opções Dimensões responsivas e Código de saída legível desativadas para o exemplo. Dimensões responsivas remove a largura e altura fixas quando o viewBox de coordenadas pode fornecer um dimensionamento escalável. Código legível adiciona indentação e é útil para manutenção, mas pode aumentar o tamanho do texto.

Selecione Iniciar e, em seguida, Transferir. O resultado processado tem 635 bytes em comparação com os 985 bytes da origem: uma redução de 35.5%. O seu título e descrição permanecem, e a comparação apresentada é renderizada a partir da origem genuína e do SVG transferido.

O artigo renderiza ambos os vetores a 1,024 píxeis para uma ilustração nítida do resultado; o seu tamanho de coordenada lógica permanece 512 × 512. Uma pré-visualização maior não adiciona conteúdo rasterizado ao SVG guardado. Reveja o vetor real na sua página de destino antes de substituir um ativo de produção existente.

Um ficheiro é transferido como SVG com o seu nome base original. Um lote é transferido como um ZIP, com sufixos numerados para nomes de ficheiros duplicados. O processamento ocorre no navegador. Guarde a origem original se pretender experimentar diferentes definições de otimização mais tarde.