Tool Hub

SVG to Code

Converte marcação SVG em código HTML / JSX / Vue SFC

Cole marcação SVG e converta para código HTML, JSX ou Vue limpo. Processa automaticamente conversões de nome de atributo (p.ex., class → className em JSX).

Como usar

  1. Selecione um modo de saída: HTML, JSX (React) ou Vue Template.
  2. Cole sua marcação SVG no campo de entrada.
  3. Leia o código convertido na caixa de saída, onde o modo JSX renomeia class para className e converte atributos kebab-case para camelCase.
  4. Copie a saída com o botão de cópia.
  5. Verifique a visualização SVG ativa abaixo da saída para confirmar que o gráfico parece correto.

Exemplos

  • Colar um SVG com class="icon" e stroke-width="2" no modo JSX exibe className="icon" e strokeWidth="2".
  • Mudar a mesma entrada para o modo Vue Template substitui class= com :class= enquanto deixa todos os outros atributos inalterados.

Verifique as saídas antes de usar em produção. Sem garantia — veja Termos.