Pré-visualização e inspetor SVG

Cole ou arraste um SVG e veja-o renderizado imediatamente, com um painel de estatísticas cobrindo dimensões, viewBox, divisão por elementos, cores únicas e sinalizadores de segurança. A pré-visualização roda dentro de um iframe em sandbox com scripts e acesso same-origin desativados, então SVGs maliciosos não podem executar código. Exporte a imagem como SVG ou PNG, alterne entre fundo branco, preto ou padrão quadriculado transparente, ou mude para a visualização de código-fonte para inspecionar a marcação.

Especificacoes

• SVG 2 Specification
• MDN: SVG

Casos de Uso Comuns

• Pré-visualize rapidamente um ícone ou ilustração SVG antes de incorporá-lo
• Verifique se um SVG não confiável contém scripts ou manipuladores de eventos
• Confirme o viewBox e as dimensões intrínsecas de um SVG
• Conte cores únicas em um SVG (útil para extrair paletas ou otimizar)
• Converta um SVG em PNG sobre um fundo colorido ou transparente
• Inspecione a divisão por elementos para detectar uso inesperado de <script> ou <foreignObject>

Funcionalidades

• Pré-visualização em sandbox — o SVG é renderizado em um iframe com sandbox="", impedindo a execução de scripts e manipuladores de eventos
• Alternância de fundo: branco, preto ou padrão quadriculado transparente
• Painel de estatísticas: dimensões, viewBox, proporção, tamanho em bytes, contagem de elementos, principais elementos, cores únicas
• Sinalizadores de segurança destacam SVGs que contêm <script>, manipuladores de eventos, referências externas ou animações
• Exporte como SVG ou PNG em alta resolução (2×) — o fundo selecionado é embutido na exportação PNG
• Pré-visualização em tela cheia para examinar detalhes
• Visualização do código-fonte com destaque de sintaxe
• Copie o SVG normalizado para a área de transferência

Exemplos

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#0ea5e9"/></linearGradient></defs><rect width="100" height="100" fill="url(#g)"/></svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><circle cx="50" cy="50" r="20" fill="#ef4444"><animate attributeName="r" from="20" to="40" dur="1s" repeatCount="indefinite"/></circle></svg>

Dicas

• Prefira viewBox em vez de width/height fixos para que a imagem escale corretamente
• Se os selos Scripts ou Manipuladores de eventos acenderem, o SVG executaria código ao ser incorporado — remova-os antes de confiar nele
• O fundo quadriculado ajuda a detectar transparência não intencional; alterne para branco ou preto para ver como fica em páginas diferentes
• A exportação PNG é renderizada em resolução 2×; use a exportação SVG para preservar a qualidade vetorial
• Referências externas (hrefs http://) não carregam na pré-visualização em sandbox — isso é intencional