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 Online

Use este otimizador de SVG para minificar marcação SVG, remover comentários, metadados e resíduos de editores, e colapsar espaços para reduzir o tamanho.

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

Criado e mantido por Udit Agarwal

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 JavaScript, TypeScript e JSX/TSX com opções do Prettier, ou minifique JavaScript puro.
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.

Mais ferramentas de Formatadores de código

Embelezador de consultas MongoDB — Embeleze e indente consultas MongoDB e instruções find() no seu navegador.
Embelezador de agregações MongoDB — Embeleze e indente pipelines de agregação do MongoDB no seu navegador.
Explorador do MongoDB — Explore uma amostra de documento ou coleção do MongoDB e infira o esquema e os tipos dos campos.
Formatador de OpenAPI / Swagger — Formate e valide especificações OpenAPI / Swagger (JSON ou YAML) e conte caminhos e operações.
Conversor de Unidades CSS — Converta px, rem, em, pt e % com um tamanho de fonte raiz configurável.
Glob para Regex — Converta um padrão glob em regex JavaScript e teste contra caminhos.
HTML para Markdown — Converta HTML em Markdown limpo com tabelas GFM, listas e links.
Formatador TOML — Formate TOML e converta de e para JSON com erros de análise claros.
Conversor logfmt para JSON — Converta logs logfmt key=value para JSON e de volta, com valores entre aspas e coerção de tipos.
dotenv para JSON — Converta um arquivo .env em um objeto JSON e JSON de volta em .env, no navegador.
CSV para Tabela Markdown — Transforme CSV ou TSV em uma tabela Markdown no estilo do GitHub, no navegador.
INI para JSON — Converta configuração INI em JSON e JSON de volta em INI, com seções e chaves globais, no navegador.

Ver todas as ferramentas de Formatadores de código (32) · Todas as ferramentas