O que é o Otimizador de SVG e o que ele remove?

É um minificador de SVG no navegador que remove o prólogo XML, o doctype, comentários, metadados, title e desc, e resíduos de editores como Inkscape, Sodipodi e Adobe, e então colapsa os espaços em branco. Você controla cada etapa com os botões.

Como minifico um SVG com esta ferramenta?

Cole sua marcação SVG na caixa de entrada, ative as limpezas que quiser e copie a saída otimizada. A contagem de bytes e a porcentagem economizada aparecem acima do resultado para você confirmar a redução.

Otimizar vai mudar a aparência do meu SVG?

Não, as configurações padrão removem apenas dados não visuais e espaços em branco. Os caminhos e formas visuais são preservados, então o gráfico renderizado permanece idêntico.

Devo remover os atributos width e height?

Remova-os apenas se seu SVG tiver um viewBox. O viewBox mantém o gráfico escalável, o que é ideal para ícones responsivos e dimensionados por CSS.

Como o Otimizador de SVG é diferente do SVGO?

É um otimizador leve e sem dependências que cobre as limpezas mais comuns do SVGO no navegador, sem instalar uma ferramenta de build ou configuração do Node.

Meu SVG é enviado para algum lugar?

Não. O Otimizador de SVG processa sua marcação localmente no seu navegador, então seus dados nunca saem do seu dispositivo e nada é enviado para um servidor.

Otimizador de SVG

Minifique SVG: remova comentários, metadados e restos do editor, e colapse espaços.

Seu SVG é otimizado localmente no seu navegador e nada é enviado para um servidor.

Precisa reduzir imagens rasterizadas também? Experimente o Image Optimizer.

Sobre Otimizador de SVG

Este otimizador de SVG minifica a marcação SVG para que seus ícones e gráficos sejam entregues menores e carreguem mais rápido. Cole um SVG exportado do Figma, Illustrator, Inkscape ou Sketch e a ferramenta remove o prólogo XML, o doctype, comentários, metadados e resíduos específicos de editores do Inkscape, Sodipodi e Adobe, e então colapsa os espaços em branco para economizar bytes. Você pode opcionalmente descartar os atributos width e height da raiz para que o viewBox mantenha o gráfico totalmente escalável para layouts responsivos. É uma alternativa leve e prática ao SVGO para desenvolvedores front-end, designers e qualquer um que precise minificar SVG ou inserir ícones em HTML, CSS ou componentes React. Tudo é processado localmente no seu navegador, e a ferramenta reporta a contagem de bytes antes e depois para você ver exatamente o quanto seu arquivo diminuiu.

Recursos

Remove o prólogo XML e declarações DOCTYPE que SVGs inline e da web não precisam
Remove comentários para limpar a marcação exportada
Apaga elementos metadata, title e desc que aumentam o tamanho do arquivo
Limpa resíduos de editores do Inkscape, Sodipodi e Adobe, incluindo atributos com namespace
Remove opcionalmente width e height da raiz para que o viewBox mantenha o gráfico escalável
Colapsa espaços em branco e espaçamento redundante entre tags
Mostra a contagem de bytes otimizada e a porcentagem economizada
Ative ou desative cada limpeza para manter exatamente a marcação que você precisa

Como usar Otimizador de SVG

Cole sua origem SVG na caixa de entrada.
Ative ou desative as opções de comentários, metadados, dados de editor, dimensões e espaços em branco conforme suas necessidades.
Leia a saída otimizada e a economia de bytes mostrada acima dela.
Copie o SVG otimizado e insira-o no seu projeto.

Exemplo

Entrada

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <!-- ícone de coração -->
  <title>coração</title>
  <path d="M12 21 4 13a4 4 0 1 1 8-5 4 4 0 1 1 8 5z"/>
</svg>

Saída

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 21 4 13a4 4 0 1 1 8-5 4 4 0 1 1 8 5z"/></svg>

Prólogo, comentário e title removidos com os espaços em branco colapsados.

Erros comuns e solução de problemas

O gráfico desaparece ou fica com o tamanho errado após remover as dimensões. — Remover width e height só funciona quando o SVG tem um viewBox. Se não tiver viewBox, mantenha a opção de dimensões desativada.
Um ID ou rótulo referenciado pelo seu CSS ou JavaScript foi limpo. — A opção de dados de editor remove data-name e atributos de editor com namespace. Desative-a se seu código depende desses ganchos.
A acessibilidade quebra porque o title e o desc foram removidos. — A opção de metadados remove os elementos title e desc. Desative-a quando você depende deles para rótulos de leitores de tela.
A saída fica vazia após colar. — O otimizador precisa de marcação SVG real; garanta que você colou o elemento svg completo e não apenas um caminho de arquivo ou uma imagem binária.

Perguntas frequentes

O que é o Otimizador de SVG e o que ele remove?: É um minificador de SVG no navegador que remove o prólogo XML, o doctype, comentários, metadados, title e desc, e resíduos de editores como Inkscape, Sodipodi e Adobe, e então colapsa os espaços em branco. Você controla cada etapa com os botões.
Como minifico um SVG com esta ferramenta?: Cole sua marcação SVG na caixa de entrada, ative as limpezas que quiser e copie a saída otimizada. A contagem de bytes e a porcentagem economizada aparecem acima do resultado para você confirmar a redução.
Otimizar vai mudar a aparência do meu SVG?: Não, as configurações padrão removem apenas dados não visuais e espaços em branco. Os caminhos e formas visuais são preservados, então o gráfico renderizado permanece idêntico.
Devo remover os atributos width e height?: Remova-os apenas se seu SVG tiver um viewBox. O viewBox mantém o gráfico escalável, o que é ideal para ícones responsivos e dimensionados por CSS.
Como o Otimizador de SVG é diferente do SVGO?: É um otimizador leve e sem dependências que cobre as limpezas mais comuns do SVGO no navegador, sem instalar uma ferramenta de build ou configuração do Node.
Meu SVG é enviado para algum lugar?: Não. O Otimizador de SVG processa sua marcação localmente no seu navegador, então seus dados nunca saem do seu dispositivo e nada é enviado para um servidor.

Ferramentas relacionadas

Formatador de CSS / SCSS — Embeleze ou minifique CSS/SCSS/LESS, ordene propriedades e remova duplicatas.
Formatador de HTML — Embeleze ou minifique HTML, formate CSS/JS inline e veja a prévia do resultado.
Formatador de XML — Embeleze, minifique e valide XML, e converta XML ↔ JSON.
Formatador de JS / TS — Embeleze ou minifique JavaScript, TypeScript e JSX/TSX com opções do Prettier.
Otimizador de imagens — Recodifique e reduza imagens (JPEG/WebP/PNG), com redimensionamento opcional.
Conversor de formato de imagem — Converta imagens entre PNG, JPEG e WebP inteiramente no seu navegador.
Gerador de Open Graph — Gere meta tags Open Graph e Twitter com prévia do card social.
Renderizador de diagramas Mermaid — Renderize diagramas Mermaid (fluxo, sequência, gantt) em SVG no seu navegador.