Este visualizador SVG é gratuito?

Sim, esta ferramenta é completamente gratuita para uso pessoal e comercial.

Como editar SVG online grátis?

Cole o código SVG no editor ou faça upload do arquivo. Qualquer alteração é refletida imediatamente na pré-visualização sem necessidade de instalar software.

Posso editar código SVG e ver as alterações ao vivo?

Sim. As edições no editor de código são refletidas instantaneamente no painel de pré-visualização, para que você possa ajustar caminhos, cores e dimensões em tempo real.

Como converter SVG para PNG online?

Esta ferramenta não exporta PNG, e os conversores de imagem do site não aceitam arquivos SVG. Para rasterizar um SVG, use um renderizador de linha de comando como o rsvg-convert (rsvg-convert -w 512 -o icon.png icon.svg) ou o Inkscape (inkscape icon.svg --export-type=png).

Posso carregar um SVG de uma URL?

Não diretamente: não há campo de URL. Abra o link no navegador, salve o arquivo .svg (ou copie a marcação pelo código-fonte) e depois abra o arquivo aqui ou cole o código no editor.

Visualizador e Editor SVG Online Gratuito

Abra, edite e visualize SVG online com pré-visualização ao vivo: formate, otimize e minifique o código no navegador, sem upload.

Abra qualquer arquivo SVG ou cole marcação SVG para visualizá-lo instantaneamente em um painel de pré-visualização ao vivo enquanto edita o código lado a lado. Este visualizador e editor SVG online renderiza gráficos vetoriais no navegador sem uploads, permite zoom e inspeção de formas, e formata ou minifica o código-fonte SVG, tudo processado localmente.

Arraste e solte o arquivo SVG aqui

ou clique para navegar

Código

sample.svg • 673

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:1" />
    </linearGradient>
  </defs>
  <circle cx="100" cy="100" r="90" fill="url(#grad1)" />
  <path d="M60 100 L90 130 L140 70" fill="none" stroke="white" stroke-width="20" stroke-linecap="round" stroke-linejoin="round" />
  <text x="50%" y="180" text-anchor="middle" fill="white" font-family="Arial, sans-serif" font-size="24" font-weight="bold">SVG Viewer</text>
</svg>

Pré-visualização

100%

Por que usar Visualizador SVG online?

Abra arquivos SVG ou cole o código, edite vendo o resultado renderizado e formate ou minifique a marcação vetorial sem instalar programas de design ou ferramentas de desktop.

Sobre o Visualizador SVG

SVG (Scalable Vector Graphics) é um formato de imagem vetorial baseado em XML para gráficos bidimensionais, com suporte a interatividade e animação. Esta ferramenta mostra o código SVG ao lado de uma pré-visualização renderizada, para você alterar o código, conferir o resultado e reduzir o tamanho do arquivo sem sair do navegador — útil para depurar ícones ou ajustar ilustrações vetoriais.

Principais Recursos do Visualizador SVG

Pré-visualização enquanto edita

Cada alteração no editor de código é renderizada na hora no painel de pré-visualização. Dá para aplicar zoom de 10% a 500% e rolar a pré-visualização para conferir caminhos, formas e estilos.

Processado no navegador

O SVG é lido, renderizado e formatado por JavaScript no seu navegador. Os arquivos que você abre e o código que cola não são enviados a nenhum servidor.

Formatar, minificar e baixar

“Formatar SVG” reindenta a marcação com 4 espaços e “Minificar SVG” remove os comentários e os espaços entre as tags. O resultado pode ser copiado ou baixado como arquivo .svg.

Como usar o Visualizador e Editor SVG

1
Carregue seu SVG
Abra um arquivo .svg, arraste-o para o editor ou cole o código SVG diretamente no editor.
2
Pré-visualização em tempo real
O painel da direita renderiza o SVG enquanto você digita. Aumente ou reduza o zoom e role a pré-visualização para inspecionar formas, caminhos e estilos.
3
Formatar ou minificar o código
Use “Formatar SVG” para reindentar a marcação com 4 espaços, ou “Minificar SVG” para remover comentários e espaços em branco e reduzir o tamanho do arquivo.
4
Copiar ou baixar
Copie o código SVG otimizado para a área de transferência ou baixe o arquivo .svg para usar no seu projeto.

Referências

W3C — SVG 2
A especificação oficial W3C que define o formato SVG, seus elementos e atributos.
MDN — SVG
Referência MDN para elementos SVG, atributos e como gráficos vetoriais são renderizados no navegador.

Ferramentas relacionadas

Imagem para Base64

Codifique um SVG ou imagem raster em um data URI Base64 para incorporação inline.

Conversor PNG

Converta imagens JPG, WebP, BMP, GIF ou ICO para PNG.

Visualizador XML

Inspecione e formate a estrutura XML que está por trás de todo documento SVG.

Conversor de cores

Converta valores de cor HEX, RGB e HSL usados em preenchimentos e traços SVG.

Perguntas frequentes

Este visualizador SVG é gratuito?: Sim, esta ferramenta é completamente gratuita para uso pessoal e comercial.
Vocês armazenam meus arquivos SVG?: Não. O SVG é processado por JavaScript no seu navegador; os arquivos que você abre e o código que cola não são enviados a nenhum servidor.
Como editar SVG online grátis?: Cole o código SVG no editor ou faça upload do arquivo. Qualquer alteração é refletida imediatamente na pré-visualização sem necessidade de instalar software.
Posso editar código SVG e ver as alterações ao vivo?: Sim. As edições no editor de código são refletidas instantaneamente no painel de pré-visualização, para que você possa ajustar caminhos, cores e dimensões em tempo real.
Como converter SVG para PNG online?: Esta ferramenta não exporta PNG, e os conversores de imagem do site não aceitam arquivos SVG. Para rasterizar um SVG, use um renderizador de linha de comando como o rsvg-convert (rsvg-convert -w 512 -o icon.png icon.svg) ou o Inkscape (inkscape icon.svg --export-type=png).
Posso carregar um SVG de uma URL?: Não diretamente: não há campo de URL. Abra o link no navegador, salve o arquivo .svg (ou copie a marcação pelo código-fonte) e depois abra o arquivo aqui ou cole o código no editor.