Visualizador SVG
Cole a marcação SVG bruta e pré-visualize o resultado renderizado imediatamente.
A pré-visualização desativa scripts e referências externas, mas ainda permite inspecionar viewBox e detalhes de tamanho.
Pré-visualização de SVG: cole código bruto e confira o resultado instantaneamente
Verificações de viewBox e tamanho: revise transparência e conteúdo potencialmente inseguro
Como usar
- Cole o código SVG ou carregue um arquivo `.svg`.
- Alterne o fundo e o nível de zoom para inspecionar a renderização.
- Revise viewBox, detalhes de tamanho e avisos e depois salve o SVG se necessário.
Exemplo
SVG de ícone simples
Entrada
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><circle cx="60" cy="60" r="52" fill="#0ea5e9"/><path d="M36 62l16 16 32-40" fill="none" stroke="#fff" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/></svg>
Saída
Um ícone circular azul é renderizado, e o viewBox é mostrado como `0 0 120 120` no painel de informações.
Perguntas frequentes
Meu SVG é enviado para algum lugar?
Não. O SVG colado e os arquivos carregados permanecem no seu navegador e não são enviados a um servidor.
O que acontece com SVGs que contêm script ou foreignObject?
A pré-visualização segura remove esses elementos antes de renderizar e mostra um aviso no painel de informações.
SVGs com imagens ou fontes externas são renderizados exatamente da mesma forma?
Nem sempre. Referências externas são desativadas, então a aparência pode ser diferente do ambiente original. Esta ferramenta prioriza a inspeção local segura.
Por que meu SVG não renderiza?
As causas comuns são XML inválido, valores de atributo incorretos ou um elemento raiz que não é `svg`. Verifique a mensagem de erro mostrada pela ferramenta.
Por que eu trocaria o fundo?
Áreas transparentes e ícones claros podem parecer muito diferentes dependendo do fundo, então a ferramenta permite testar rapidamente fundos xadrez, branco e escuro.
Notas
- Por segurança, referências a URLs externas e elementos perigosos são desativados antes da renderização.
- SVGs que dependem de fontes ou imagens externas podem não ter a mesma aparência do ambiente original.
- Arquivos SVG muito grandes saem automaticamente do modo de pré-visualização ao vivo e pedem renderização manual.