Visualizador SVG
Editor de código SVG & prévia online
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.