Imagens · Otimizador de SVG

Otimizar e minificar arquivos SVG no Mac

Remova sobras de editores do Figma, Illustrator e Inkscape em SVGs e arredonde coordenadas — arquivos menores com a mesma aparência.

Roda no seu Mac
Otimizador de SVG no OneMacTools em um Mac, com arquivos de exemplo e suas opções

Otimizador de SVG em um Mac

Otimizador de SVG no OneMacTools com arquivos de exemplo carregados e o painel de opções aberto
Otimizador de SVG com arquivos de exemplo e suas opções
O resultado de Otimizador de SVG nos arquivos de exemplo
O que Otimizador de SVG gerou a partir dos arquivos de exemplo

Capturas de tela do app, usando arquivos de exemplo.

Como usar Otimizador de SVG

  1. 1

    Arraste seus SVGs

    Adicione arquivos SVG exportados do Figma, Illustrator, Inkscape ou Sketch, um ou vários.

  2. 2

    Escolha a precisão

    Duas casas decimais atendem à maioria dos ícones e ilustrações.

  3. 3

    Decida sobre IDs e títulos

    Remova IDs não usados e mantenha os títulos se o SVG precisar ser descrito para leitores de tela.

  4. 4

    Clique em Otimizar

    Comentários, metadados e restos de editores são removidos e os números são arredondados. O app mostra o tamanho total antes e depois.

  5. 5

    Compare-os

    As cópias otimizadas, com “optimised” no nome, são salvas em uma pasta datada em Downloads › OneMacTools. Use o botão Visualizar (olho) para conferir se continuam iguais.

O que Otimizador de SVG faz

Remove comentários, metadados, elementos e atributos exclusivos de editores, grupos vazios, IDs não usados e casas decimais desnecessárias, sem mexer nas formas. Escolha 1, 2 ou 3 casas decimais e se quer manter os títulos para leitores de tela, depois use Visualizar para comparar.

Ideal para

  • Reduza ícones antes de publicar um site
  • Limpar ilustrações exportadas
  • Deixar SVGs mais fáceis de ler no código

Opções explicadas

Casas decimais
1, 2 ou 3; o padrão é 2. Os números de formas, posições e tamanhos são arredondados para essa quantidade de casas. Use 3 para arte muito pequena ou detalhada e 1 para formas grandes e simples.
Remover IDs não usados
Ativado por padrão. Remove atributos id que nada no arquivo referencia. Desative se seu CSS ou JavaScript seleciona elementos por ID.
Manter títulos (para leitores de tela)
Ativado por padrão. Mantém os elementos <title> e <desc>, que leitores de tela usam para descrever a imagem. Desative para SVGs puramente decorativos.

Boas práticas

  • Confira ícones pequenos com 2 ou 3 casas decimais. Arredondar para 1 casa pode deslocar detalhes finos em um ícone de 16 ou 24 px.
  • Desligue Remover IDs não usados em SVGs que você anima ou estiliza por ID, ou que usam aria-labelledby para apontar para um título.
  • Deixe os títulos ativados para imagens com significado, como gráficos e diagramas, para que continuem acessíveis.
  • Otimize antes de embutir SVGs no HTML ou de convertê-los com o Imagem para Base64; cada byte economizado é economizado em cada carregamento de página.
  • Guarde a exportação original. O arquivo otimizado é para publicar, não para editar de novo em um app de design.

Funciona com

Entrada
Arquivos SVG.
Saída
Um SVG otimizado com “optimised” adicionado ao nome.
  • Remove comentários, metadados, elementos e atributos exclusivos de editores (do Inkscape, Sketch, Illustrator, Figma e outros), grupos vazios e a declaração XML.
  • Arquivos que não são SVG válidos são informados em vez de alterados.

Perguntas sobre o Otimizador de SVG

Como reduzir o tamanho de um arquivo SVG?

Arraste-o para Otimizador de SVG e clique em Otimizar. Restos de editores, comentários e metadados são removidos e decimais longos são arredondados, então o arquivo fica menor sem mudar a aparência.

Otimizar muda a aparência do meu SVG?

Não deveria. As formas ficam no lugar e os números só são arredondados para as casas decimais que você escolher. Compare com o botão Visualizar e use 3 casas para ícones muito pequenos e detalhados.

Por que os SVGs do Figma ou do Illustrator são tão grandes?

Apps de design adicionam metadados, atributos específicos do editor e números com muitas casas decimais de que os navegadores não precisam. Removê-los costuma fazer uma diferença visível.

O que são IDs não usados?

Atributos id aos quais nada no arquivo se refere, geralmente sobras de nomes de camadas. É seguro removê-los, a menos que seu próprio CSS ou JavaScript os use.

Devo manter o título em um SVG?

Sim, se a imagem tiver significado, como um botão de ícone ou um diagrama, para que os leitores de tela possam descrevê-la. Em imagens puramente decorativas, você pode removê-lo.

Posso otimizar muitos SVGs de uma vez?

Sim. Solte um conjunto de ícones inteiro e cada arquivo ganha a própria cópia otimizada.

Otimizador de SVG envia meus arquivos?

Não. O Otimizador de SVG roda inteiramente no seu Mac, então seus arquivos nunca saem dele e ele funciona offline.

Otimizador de SVG altera meus arquivos originais?

Não. Os resultados são salvos como novos arquivos em uma pasta datada em Downloads › OneMacTools, e seus originais ficam exatamente como estavam, a menos que você ative uma opção que diga o contrário.

Do que Otimizador de SVG precisa?

Só um Mac com macOS 26 ou posterior. Não há mais nada para instalar.

Otimizador de SVG e mais 150.
Um app. Um preço.

Todas as 151 ferramentas. Download gratuito, um único pagamento pela licença, sua para sempre.