Visualizador SVG
Editor de código SVG & prévia online
Código SVG inválido
O que é o Visualizador SVG?
O Visualizador SVG é uma ferramenta online para editar código SVG e visualizar em tempo real. Permite escrever ou colar código SVG diretamente e ver o resultado renderizado instantaneamente. SVG (Scalable Vector Graphics) é um formato de imagem vetorial baseado em XML, amplamente utilizado em design web, criação de ícones e visualização de dados.
Esta ferramenta suporta prévia em tempo real, visualização de código fonte, download de arquivos SVG e muito mais.
SVG é imagem e código ao mesmo tempo: pode conter caminhos, texto, filtros, animações, referências externas e estilos. Um visualizador ajuda a inspecionar forma, viewBox, escala e marcação rapidamente, mas SVGs de fontes desconhecidas exigem cuidado. Antes de incorporar em um site, verifique tamanho, acessibilidade, sanitização e presença de scripts, links ou recursos externos.Como Usar
Como usar
- Digite ou cole código SVG no editor à esquerda
- O painel à direita exibe a renderização do SVG em tempo real
- Clique no botão 'Source' para ver o código SVG formatado
- Clique no botão 'Baixar' para salvar o SVG como arquivo
- Clique no botão 'Copiar SVG' para copiar o código para a área de transferência
Segurança de SVG
- Cole SVG apenas de fontes confiáveis sempre que possível; SVG pode conter scripts, referências externas ou estilos inesperados.
- Antes de baixar ou incorporar, verifique viewBox, dimensões, fills, strokes e renderização de texto no tamanho de destino.
Casos de uso
Princípio técnico
O código-fonte SVG é analisado com new DOMParser().parseFromString(source, 'image/svg+xml'), que retorna um Document construído a partir de regras XML em vez do parser permissivo do HTML. O parser verifica a formatação bem-formada, exibe um nó <parsererror> em caso de marcação inválida e expõe a árvore SVG para scripts e CSS exatamente como o restante do DOM. Elementos como <path>, <circle>, <rect>, <g>, <text>, <defs>, <linearGradient> e <filter> são nós de primeira classe com seus próprios atributos e alvos de eventos.
O sistema de coordenadas é governado pelo atributo viewBox. viewBox="minX minY width height" define o espaço de coordenadas interno, e preserveAspectRatio (padrão xMidYMid meet) decide como esse espaço é mapeado no viewport renderizado: meet preserva o viewBox inteiro adicionando letterboxing, slice preenche o viewport cortando, e none estica de forma não uniforme. Os comandos de caminho dentro de d usam M (moveTo), L (lineTo), C (bézier cúbico), Q (quadrático), A (arco elíptico) e Z (fechar caminho); cada comando tem uma forma maiúscula absoluta e uma forma minúscula relativa.
A segurança do SVG precisa de tratamento explícito porque o formato é executável: <script>, foreignObject contendo HTML, xlink:href para URLs externas, onload e outros atributos de manipuladores de eventos podem executar JavaScript no contexto da página se o SVG for injetado inline. DOMPurify com o perfil SVG ou um sanitizador no lado do servidor é a mitigação padrão ao aceitar SVG de terceiros. A rasterização para PNG é feita desenhando o SVG (carregado como HTMLImageElement a partir de uma URL de Blob) em um canvas com drawImage e chamando canvas.toBlob('image/png') para download.
- Parser: new DOMParser().parseFromString(source, 'image/svg+xml') retorna um Document XML estrito com um nó <parsererror> em caso de falha
- viewBox: "minX minY width height" define o espaço de coordenadas interno; preserveAspectRatio xMidYMid meet/slice controla ajuste vs corte
- Comandos de caminho: M moveTo, L lineTo, C bézier cúbico, Q quadrático, A arco, Z fechar caminho; maiúsculas = absoluto, minúsculas = relativo
- Superfície de segurança: <script> inline, foreignObject, xlink:href para URLs remotas e manipuladores onload/onclick executam como JavaScript
- Sanitização: DOMPurify com USE_PROFILES: { svg: true } remove scripts e manipuladores de eventos antes de inserir SVG de terceiros
- Exportação PNG: carrega SVG em HTMLImageElement via URL de Blob, drawImage em um canvas, canvas.toBlob('image/png') para download
- Linha de base do navegador: SVG 1.1 em todos os navegadores evergreen desde 2011; recursos do SVG 2 (melhorias em texto-sobre-caminho) são parciais
Exemplos
Círculo
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="#2563eb" />
</svg>Retângulo
<svg width="120" height="80" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="60" rx="8" fill="#10b981" />
</svg>Estrela
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<polygon points="50,5 61,35 95,35 68,57 79,91 50,70 21,91 32,57 5,35 39,35" fill="#f59e0b" />
</svg>Perguntas frequentes
O que o visualizador faz?
Ele renderiza o markup SVG colado, permite zoom e pan, mostra o código-fonte com destaque de sintaxe e exibe as dimensões da imagem e o viewBox. Útil para inspecionar SVGs de terceiros, depurar dados de path e pré-visualizar ícones antes de adicioná-los a um projeto.
O SVG é enviado para algum servidor?
Não. A página faz o parsing e renderiza o SVG localmente no seu navegador — SVG é apenas markup, o navegador já sabe como exibi-lo. O código colado nunca cruza a rede.
Por que meu SVG parece diferente aqui e no software de design?
SVG é renderizado conforme o user agent. Navegadores, Figma, Illustrator e Inkscape interpretam alguns casos extremos (renderização de texto, efeitos de filtro, mesh gradients, clip-paths) de forma diferente. O visualizador mostra o que o navegador faz, que é o que seus usuários finais verão no HTML.
Posso editar o SVG aqui?
Você pode editar o código-fonte à esquerda e renderizar novamente. Para edição visual (arrastar para mover pontos, alterar paths), use um editor SVG real como Inkscape, Figma ou Boxy SVG. Esta página é um visualizador com edições rápidas de texto.
Como coloco o SVG no meu projeto?
Copie o código-fonte. A maioria dos frameworks front-end aceita SVG inline diretamente em JSX/HTML. Para usar como background, coloque na sua pasta de assets e referencie com url(...). Para usar como icon font, passe por uma etapa de build como svgo mais um gerador de sprites.
Por que meu SVG é tão grande?
Muitas exportações SVG incluem metadados de editor (XMP do Adobe Illustrator, namespaces :inkscape: do Inkscape), defs não utilizados, comentários e dados de path verbosos. Passe pelo SVGO (online ou CLI) para removê-los — normalmente 30-70% menor sem alteração visual.
Recursos externos são carregados?
A maioria dos visualizadores bloqueia carregamentos externos (sem buscar URLs externas em <image href> ou <use href>) por segurança. Embuta bitmaps referenciados como URIs data: e converta <use> com href externo em cópias inline se seu SVG depende deles.
Ferramentas relacionadas
Gerador de Código de Barras
Gerador de código de barras online gratuito. Suporta formatos CODE128, EAN13, EAN8, UPC, CODE39, ITF14. Personalize cores e dimensões, gere e baixe códigos de barras em PNG ou SVG.
Gerador de QR Code
Gerador de QR code online gratuito suportando texto, URL, tipos vCard. Personalize estilo, cor, tamanho, baixe imagens de alta qualidade instantaneamente.
Gerador de Fundo Cor Sólida
Gere imagens de fundo de cor sólida online. Personalize cor e tamanho com predefinições (1080p, 2K, 4K), baixe como PNG/JPG. Processamento local, privacidade protegida.
Gerador de Gradiente
Gerador de gradiente CSS online gratuito para criar fundos de gradiente linear e radial. Ajuste visual de cores, cópia de código CSS com um clique.
Teste de Tela
Ferramenta de teste de tela online gratuita para detectar pixels mortos, pontos brilhantes e vazamento de luz. Múltiplos testes de cores sólidas, testes de contraste, avalie qualidade do display.
Pré-visualização de fontes
Veja seu texto em qualquer fonte instalada neste dispositivo ou envie um arquivo TTF, OTF, WOFF ou WOFF2. Ajuste tamanho, peso, espaçamento e cor, e copie o CSS pronto para uso. Tudo no navegador.
