Etapa 1
Adicione um SVG completo
Carregue um arquivo .svg local de até 2 MiB ou cole marcação SVG bem formada. A origem permanece editável até que você a limpe ou substitua.
Ferramentas de design grátis
Otimizador e minificador de SVG gratuito
Envie ou cole marcação SVG, otimize-a localmente com SVGO e compare o código, tamanho do arquivo e resultado visual antes de baixar. Não é necessário login nem envio ao servidor.
Um SVG · até 2 MiB · processamento local
Otimize um SVG neste navegador
Cole o markup ou carregue um arquivo, escolha o que o SVGO pode alterar e compare a origem exata com o resultado antes de exportar.
XML completo com uma raiz <svg>. Pressione Ctrl/Command+Enter para otimizar.
Nenhum resultado otimizado ainda
Adicione um SVG completo, revise as configurações e execute o otimizador.
Como otimizar um SVG
Etapa 2
Escolha os limites da transformação
Mantenha os padrões conservadores ou altere deliberadamente as configurações de ID, elementos descritivos, dimensões, precisão, script, multipass e formatação.
Etapa 3
Compare e exporte o resultado
Revise as alterações exatas de bytes e estrutura, além das duas prévias restritas; depois copie ou baixe o SVG otimizado e teste-o na integração pretendida.
O que a otimização de SVG altera
Um SVG é marcação XML, portanto economias úteis geralmente vêm da remoção de dados de exportação e da representação mais compacta das mesmas formas. A redução disponível depende de como a origem foi criada.
Remova excesso de exportação e formatação
O pipeline padrão do SVGO remove comentários, metadados, namespaces de editores, valores vazios e outras marcações redundantes. Ele também pode compactar estilos, cores, transformações e grupos.
Simplifique dados numéricos e de caminhos
A precisão de coordenadas e transformações de caminhos pode economizar bytes, especialmente em desenhos detalhados. Menor precisão arredonda com mais agressividade; por isso, geometria delicada exige uma revisão visual mais próxima.
Espere resultados dependentes da origem
Uma exportação detalhada de ferramenta de design pode oferecer mais dados removíveis que um ícone minificado manualmente. Uma origem pequena ou já otimizada pode permanecer quase inalterada ou ficar maior sob configurações de preservação ou saída legível.
Escolha configurações mais seguras de otimização de SVG
A menor marcação não é automaticamente o melhor ativo. Mantenha informações de que o site, componente, folha de estilo ou tecnologia assistiva ao redor ainda precisa.
Preserve IDs usados fora do arquivo
Referências internas de URL podem ser atualizadas durante a limpeza de IDs, mas seletores CSS externos, buscas JavaScript e documentos em linha separados são invisíveis para o otimizador. Preserve IDs quando essas dependências puderem existir.
Mantenha elementos descritivos por padrão
Um título ou descrição de SVG pode contribuir para um nome ou explicação acessível conforme o ativo é incorporado. Remova esses elementos somente depois de conferir a integração final.
Altere dimensões somente de propósito
Remover largura e altura mantém ou cria um viewBox quando possível, mas altera o tamanho intrínseco do ativo. Confirme que o CSS ou contêiner fornece as dimensões pretendidas.
Revise o SVG otimizado antes de publicar
A área de trabalho oferece uma comparação rápida, não uma prova de que todo navegador, editor, componente ou animação se comporta de modo idêntico. Teste o resultado onde ele realmente será executado.
Compare ambas as prévias restritas
A origem e o resultado são exibidos como recursos de imagem não interativos. Use-os para detectar mudanças óbvias de cor, geometria, recorte e proporção sem inserir a marcação SVG nesta página.
Teste texto, filtros, animação e referências
Fontes, espaçamento de texto, filtros, máscaras, CSS, animação, recursos externos e scripts dependem do contexto. Abra o arquivo baixado no site ou aplicativo pretendido antes de substituir um ativo de produção.
Mantenha a origem editável
A marcação otimizada normalmente é um artefato de exportação. Mantenha o arquivo de design original ou SVG legível quando edição futura, entrega, revisão de acessibilidade ou depuração for importante.
Entenda os limites de processamento local e segurança
O processamento local reduz transferências desnecessárias de dados, enquanto as prévias restritas evitam executar a origem em linha. Essas escolhas não transformam um SVG arbitrário em código confiável de aplicativo.
O processamento da origem permanece nesta aba
O arquivo selecionado é lido como texto e passado para a compilação SVGO instalada no navegador. Esta página não envia a origem ou o resultado a um endpoint externo de otimização.
A prévia não executa SVG em linha
Ambas as prévias usam o contexto de imagem SVG do navegador, no qual scripts são desativados e recursos externos não são carregados. O comportamento interativo não é testado ali intencionalmente.
Otimização não é sanitização
Remover scripts e manipuladores de eventos é útil para um ativo estático, mas outras marcações arriscadas ou sensíveis ao contexto podem permanecer. Nunca insira uma saída não confiável em linha sem um sanitizador e política de segurança dedicados.
Privacidade e limites
O arquivo de origem ou a marcação colada é processada nesta aba do navegador. Nenhuma solicitação externa de otimização é adicionada, e a origem não é salva por esta página.
- • Um SVG completo por vez, a partir de marcação colada ou arquivo .svg local de até 2 MiB.
- • O SVGO pode reestruturar a marcação e arredondar geometria; a equivalência visual não é garantida.
- • Prévias restritas não testam scripts, recursos externos nem todas as integrações com a página hospedeira.
- • A otimização e a remoção de scripts não certificam um SVG não confiável como seguro para inserir em linha.
Perguntas frequentes
Este otimizador de SVG é gratuito?
Sim. Você pode colar ou carregar um SVG, otimizá-lo, visualizar o resultado, copiar a marcação e baixar o arquivo sem se cadastrar, fazer login ou desbloquear a saída.
A ferramenta envia ou armazena meu SVG?
Nenhum serviço externo de otimização é usado. O arquivo selecionado é lido como texto e processado na aba atual do navegador; esta página não adiciona uma solicitação de envio ou armazenamento para seu SVG.
Qual otimizador de SVG esta página usa?
Ela usa a compilação instalada no navegador do SVGO 4 com o pipeline de plugins preset-default e as configurações mostradas na área de trabalho. O multipass é ativado por padrão.
Posso enviar um arquivo SVG ou colar código SVG?
Ambas as opções são aceitas para um SVG por vez. Um arquivo .svg local pode ter até 2 MiB, ou você pode colar um documento SVG completo e bem formado no editor de origem.
O SVG otimizado sempre terá a mesma aparência?
Nenhuma garantia universal é possível. O SVGO pode reestruturar a marcação e arredondar valores numéricos, e fontes, filtros, animação ou comportamento específico da integração podem ser renderizados de forma diferente. Compare as prévias e teste o resultado baixado no contexto real.
Por que os IDs do SVG são preservados por padrão?
IDs podem ser referenciados por gradientes, máscaras, caminhos de recorte, CSS, JavaScript ou outro documento. O otimizador pode atualizar referências internas, mas não consegue descobrir todas as dependências externas; por isso, esta página mantém IDs a menos que você opte pela limpeza.
O que faz remover largura e altura?
A opção removeDimensions do SVGO remove largura e altura fixas quando há um viewBox ou pode derivar um viewBox de dimensões numéricas simples. Isso pode permitir dimensionar um SVG com CSS, mas altera o comportamento de tamanho intrínseco e deve ser testado onde o ativo é usado.
O otimizador mantém elementos de título e descrição do SVG?
Sim, por padrão. A área de trabalho preserva <title> e <desc> porque podem apoiar nomes ou descrições acessíveis em algumas integrações. Você pode removê-los deliberadamente para uma saída menor depois de revisar o contexto.
Remover scripts torna um SVG seguro para inserir em linha?
Não. A opção remove elementos de script, atributos de manipulador de eventos e links de script tratados pelo SVGO, mas a otimização não é uma sanitização completa. Um SVG não confiável que será inserido em linha precisa de uma revisão de segurança, sanitizador e política de conteúdo dedicados.
Por que o SVG otimizado permanece igual ou fica maior?
Uma origem pode já ser compacta, as configurações de preservação podem limitar as transformações disponíveis, a formatação legível adiciona espaços em branco ou a marcação exigida pode compensar outras economias. O resultado informa a diferença real de bytes UTF-8 em vez de presumir que todo arquivo fica menor.
Ferramentas relacionadas
Sd Ferramentas de design grátis
Inspecione e converta cores de SVG
Seletor de cores
Escolha uma cor visualmente ou informe um valor HEX; depois, ajuste RGB, HSL e opacidade. Visualize o resultado, compare tons próximos e copie o código de cor exato sem login.
Vd Ferramentas de design grátis
Confira um par de cores de SVG
Verificador de contraste de cores
Teste cores de texto e fundo segundo WCAG 2.2 AA e AAA. Veja a proporção de contraste exata, visualize o tamanho e o peso de fonte selecionados e identifique se o par é aprovado.
Gd Ferramentas de design grátis
Crie um gradiente CSS
Gerador de gradiente CSS
Crie gradientes lineares, radiais ou cônicos com duas a seis paradas de cor. Visualize o resultado ao vivo, ajuste a direção ou origem relevante e copie CSS pronto para usar sem fazer login.
Cd Ferramentas de imagem grátis
Converta um SVG para PNG
Conversor de SVG para PNG
Envie um SVG, escolha o tamanho PNG de que precisa, visualize o resultado e baixe-o. Grátis para usar, sem cadastro ou login.