Otimizador de SVG – Arquivos menores, data URI e componente React
Reduza o tamanho de SVGs exportados do Figma, Illustrator ou Inkscape e gere o SVG limpo, o data URI para CSS e um componente React.
Processado no navegador – nenhum dado enviado ao servidor
Como usar esta ferramenta
- Cole o código SVG, envie o arquivo .svg ou carregue o exemplo
- Marque as otimizações desejadas e escolha as casas decimais das coordenadas
- Compare a prévia antes e depois e veja quantos bytes foram economizados
- Copie ou baixe o SVG otimizado, o data URI para CSS ou o componente JSX
Sobre esta ferramenta
O que é
Editores gravam no SVG muita coisa que o navegador ignora: dados de camadas, zoom da última sessão, ids automáticos, coordenadas com oito casas decimais. Em ícones isso costuma ser mais da metade do arquivo. A otimização tira o que não muda o desenho e deixa o código legível para colar no HTML ou num componente.
Quando usar
- Preparar ícones exportados do Figma ou do Illustrator para colocar no site
- Transformar um SVG em data URI para background-image no CSS
- Converter um ícone em componente React com className e props
- Descobrir por que um SVG simples tem dezenas de KB
Segurança
Processamento 100% no navegador. Nenhum dado é enviado ao servidor — seus dados sensíveis permanecem no seu dispositivo.
Perguntas frequentes
- Quantas casas decimais usar?
- Para ícones de 16 a 48 px, 1 ou 2 casas ficam visualmente idênticas, porque um décimo de unidade já é menor que um pixel. Ilustrações grandes ou com muitas curvas pequenas pedem 3. Transformações (rotate, matrix) recebem duas casas a mais automaticamente, porque erro ali deforma o desenho inteiro.
- Por que o data URI não é base64?
- Base64 aumenta o tamanho em cerca de um terço e comprime pior com gzip. O SVG em texto só precisa escapar os caracteres que quebrariam a URL — <, >, #, % — e trocar aspas duplas por simples para caber em url("...") no CSS.
- Remover ids não referenciados pode quebrar algo?
- Pode, se o CSS ou o JavaScript da sua página seleciona elementos do SVG pelo id. A ferramenta mantém ids usados dentro do próprio arquivo (gradientes, máscaras, use, animações) e não remove nenhum quando há script no SVG; se a página usa os ids, desmarque a opção.
- A prévia executa scripts do SVG?
- Não. As duas prévias são renderizadas como imagem (tag img com data URI), e o navegador não executa scripts nem carrega recursos externos de SVG exibido assim.