Cole SVG ou escolha um arquivo e selecione o componente de destino. Confira o resultado: remover metadados, elementos ativos ou atributos pode alterar o SVG.
Funciona localmente no seu navegadorEsta página limpa marcação SVG no navegador e entrega o mesmo desenho como componente React, Vue ou Svelte. Cole a marcação ou escolha um arquivo .svg local: a prévia, os contadores de bytes e o código gerado saem todos do elemento já limpo. Nada é enviado, e a página continua funcionando com a rede desligada.
A limpeza é conservadora com o desenho e rígida com tudo que pode executar ou baixar algo: coordenadas, ids, classes e CSS local ficam exatamente como estão, enquanto scripts, elementos de animação, atributos de evento e referências remotas são removidos. Confira a prévia antes de usar o resultado, porque tirar uma animação ou uma regra de estilo remota muda o que o arquivo faz.
São removidos: <script>, <foreignObject>, <iframe>, <object>, <embed>, <audio>, <video> e os elementos de animação <animate>, <animateMotion>, <animateTransform> e <set>; todos os atributos de evento on*; valores de href e xlink:href que não sejam referências internas #id; qualquer atributo cujo valor chame uma url() remota; blocos <style> com @import ou url() remota; comentários, <metadata> e <desc>. Ficam: dados de traçado, ids, classes, atributos de apresentação como rx, opacity e transform, e o CSS que aponta apenas para dentro do arquivo. Nos testes, url(#g1) sobreviveu e style="fill:url(https://…)" não.
A raiz é reescrita: sem viewBox, ele é calculado a partir de width e height, ou vira 0 0 24 24 quando nenhum dos dois existe; depois width e height saem, o xmlns é definido e os espaços entre as tags são compactados. Não é um minificador — os números não são arredondados, então um traçado "M 4.000 4.0" mantém os zeros, e um ícone pequeno pode crescer com o viewBox e o xmlns acrescentados. O ícone de exemplo foi de 310 para 248 bytes, e os contadores usam bytes UTF-8, então um texto em CJK conta o que realmente ocupa.
No React sai um componente de função que espalha {...props} na raiz, e os nomes de atributo são convertidos onde o framework exige: class vira className, e stroke-linecap, fill-opacity, font-size, text-anchor, stop-color ou clip-path viram camelCase, para o componente não avisar sobre propriedades DOM inválidas. Valores entre aspas e o CSS dentro de <style> ficam intactos, e um ícone sem filhos vira <svg … {...props} /> autofechado.
No Vue sai um componente de arquivo único com <script setup>, defineProps({ size }) e :width/:height ligados a size; no Svelte, export let size com width={size} height={size}. Os dois adicionam aria-hidden, e o React não define tamanho — a raiz leva só o viewBox, então passe width e height como props ou ajuste por CSS. O campo de nome vira um identificador PascalCase: vazio resulta em KivIcon, e um nome que não pode iniciar um identificador ganha prefixo, então 3d-icon exporta Svg3dIcon.
Não há otimização de traçado nem reescrita de id: dois ícones que definam id="g1" continuam colidindo na mesma página, como aconteceria com SVG escrito à mão. A animação é apagada em vez de preservada, e um bloco <style> que misture regra local com url() remota é descartado inteiro, então confira a prévia quando o original dependia de uma folha de estilo externa.
A prévia é um <img> alimentado por uma URL blob, então scripts na marcação não rodam; isso faz dela uma visão fiel do arquivo limpo, não uma auditoria de segurança. Entrada inválida gera aviso e o resultado anterior é apagado em vez de continuar na tela: é preciso exatamente uma raiz <svg>, e uma entidade XML indefinida como é recusada porque o SVG é analisado como XML — é e as cinco entidades predefinidas são aceitas.