Visualizador e editor de SVG online: código, prévia, paths | We.Inc
Cole ou abra um SVG para vê-lo ao lado do código. Edite ao vivo, confira em fundo claro, escuro e xadrez, inspecione os comandos dos paths, faça uma limpeza e exporte em PNG ou como componente React.
Visualizador e editor de SVG
Cole o código SVG ou abra um arquivo .svg e a imagem aparece ao lado do código. Edite o código e a prévia é redesenhada enquanto você digita. Troque o fundo para conferir as áreas transparentes, dê zoom, liste cada comando de path, remova a sujeira deixada pelos editores e baixe o resultado como SVG, PNG ou componente React.
O que você pode exportar
Formato
Use para
SVG (limpo)
Sites, ícones, logos; o menor arquivo
PNG de 1x a 4x
Lugares que não aceitam SVG, como alguns clientes de e-mail e posts em redes sociais
Componente React (JSX)
Usar o gráfico inline em um projeto React ou Next.js
Uma visão do código e uma prévia ao vivo lado a lado. Nada é enviado: o arquivo é lido e desenhado pelo seu próprio navegador, e a prévia é exibida como imagem, então nenhum script dentro do SVG consegue rodar.
Cole a marcação SVG na caixa de código, solte um arquivo nela ou use Abrir arquivo. Um exemplo já vem carregado para você testar as ferramentas na hora.
Edite o código. A prévia é atualizada enquanto você digita e avisa quando a marcação está quebrada.
Mude o fundo da prévia para branco, escuro ou xadrez, e dê zoom de 25% a 800% para conferir os detalhes finos.
Abra o inspetor de paths para ver os comandos de cada path em palavras simples, como Mover para, Linha até e Curva cúbica, com os números deles.
Clique em Limpar para remover comentários, metadados e atributos de editor e arredondar decimais longos, depois baixe como SVG ou PNG, ou copie como JSX.
Mantenha o atributo viewBox e remova width e height fixos se quiser que o SVG se ajuste ao contêiner no CSS.
Defina fill ou stroke como currentColor nos ícones para que eles herdem a cor do texto de onde estiverem.
Duas casas decimais bastam para quase qualquer ícone desenhado em um grid de 24 ou 100 unidades. Mais precisão basicamente só acrescenta bytes.
Nunca cole um SVG de uma fonte não confiável direto no HTML da sua página. SVG inline pode carregar scripts; carregue-o com uma tag img ou limpe-o antes.
Perguntas frequentes
Como abrir um arquivo SVG?
Qualquer navegador moderno abre arquivos SVG diretamente, mas só mostra a imagem. Para ver o código e a imagem juntos, abra o arquivo neste visualizador com o botão Abrir arquivo ou arraste-o para a caixa de código.
Meu SVG é enviado para algum lugar?
Não. O arquivo é lido pelo seu navegador e desenhado localmente. Nada que você abre ou digita aqui é enviado para um servidor.
Por que meu SVG não mostra nada na prévia?
As causas mais comuns são a falta do atributo xmlns="http://www.w3.org/2000/svg" no elemento svg, um viewBox que aponta para longe do desenho, ou formas brancas sobre fundo branco. Experimente o fundo xadrez e confira a linha de erro abaixo da prévia.
O que a etapa de limpeza remove?
Comentários, a declaração XML, o doctype, blocos de metadados, atributos específicos de ferramentas como Inkscape, Sketch e Serif, e grupos vazios. Ela também arredonda os decimais para a precisão que você escolher. Não mescla paths nem altera formas, então o desenho deve continuar igual.
Como usar um SVG no React?
Copie a saída em JSX. Ela converte os atributos para os nomes do React, como stroke-width para strokeWidth e class para className, transforma strings de style em objetos e repassa ao elemento svg as props que você der ao componente.
Como ler código SVG
Um arquivo SVG é texto que descreve formas. O elemento svg define um sistema de coordenadas com o viewBox: viewBox="0 0 24 24" significa que o desenho usa um grid de 24 por 24 unidades, seja qual for o tamanho em que é exibido. Dentro dele, elementos como rect, circle e path desenham nesse grid com preenchimentos e traços.
A maioria dos ícones é feita quase só de elementos path. O atributo d de um path é uma lista de comandos de desenho: M move a caneta, L desenha uma linha reta, C desenha uma curva cúbica, A desenha um arco e Z fecha a forma. Letras maiúsculas usam coordenadas absolutas; minúsculas são relativas ao último ponto. O inspetor desta página explica cada um.
Por que SVGs exportados são maiores do que precisam
As ferramentas de design salvam informações que as ajudam a reabrir o arquivo: nomes de camadas, configurações do editor, posições de guias e coordenadas com seis ou mais casas decimais. Os navegadores ignoram tudo isso. Remover essas informações e arredondar os números costuma reduzir bastante o tamanho do arquivo, o que importa quando o mesmo ícone aparece em todas as páginas.
Esta página faz uma limpeza conservadora que nunca deve mudar a aparência da imagem. Para mudanças mais profundas, como mesclar paths, a ferramenta otimizadora de SVG vai além.
Mover para
Linha até
Linha horizontal
Linha vertical
Curva cúbica
Cúbica suave
Curva quadrática
Quadrática suave
Arco
Fechar path
um elemento <script>
um atributo de evento on…
um link javascript:
um <foreignObject> com HTML dentro
Branco
Escuro
Xadrez
A marcação não é um XML válido.
O elemento raiz não é <svg>.
Cole uma marcação que comece com <svg e termine com </svg>.
Esse arquivo tem mais de 5 MB. Abra um SVG menor.
{name} aberto.
A prévia não carregou, então ainda não há nada para exportar.
PNG de {w} × {h} salvo.
Código
Abrir arquivo
Exemplo
Código SVG
{bytes} bytes · {n} path
{bytes} bytes · {n} paths
Este SVG contém {parts}. A prévia aqui é segura, mas não cole isso em uma página como HTML inline sem remover esse trecho.
Prévia
Zoom
Prévia do seu SVG
Renderizado pelo seu navegador. Scripts dentro do SVG não rodam aqui.
Inspetor de paths
Não há elementos path neste SVG.
Path {n}
Comandos do path {n}
Comando
Números
(relativo)
Escolha um path para destacá-lo na prévia e listar os comandos dele.