Prévia / Editor de SVG

Como a Prévia / Editor de SVG Funciona

O Que a Ferramenta Faz

A Prévia / Editor de SVG renderiza a marcação SVG ao vivo conforme você a edita e extrai metadados (largura, altura, viewBox, contagem de elementos) para inspeção rápida. Um alternador adiciona um fundo quadriculado para que você veja regiões transparentes com clareza. A ferramenta também produz uma data URI codificada para URL adequada para uso direto em background-image do CSS ou em atributos src do HTML.

Casos de Uso Comuns para Desenvolvedores

Designers de ícones testam a matemática do viewBox e larguras de traço em diferentes tamanhos. Desenvolvedores frontend verificam se um ícone SVG editado à mão ainda renderiza corretamente após otimização (manual ou via SVGO). Desenvolvedores de e-mail geram versões compactas em data URI de marcas para embutir em HTML. Educadores demonstram como atributos como preserveAspectRatio e overflow afetam a renderização.

Formatos de Dados, Tipos ou Variantes

A entrada é marcação XML SVG bruta. A saída é o mesmo SVG renderizado em um iframe isolado, além de uma data URI codificada para URL (data:image/svg+xml;charset=utf-8,…). A métrica de contagem de elementos conta cada tag de abertura (incluindo defs, g, gradientes e elementos aninhados semelhantes), dando uma noção aproximada de complexidade. Os valores de atributos extraídos são exibidos em forma bruta.

Armadilhas Comuns e Casos de Borda

Recursos externos referenciados por elementos `use` ou `image` com href não serão carregados dentro do iframe isolado. JavaScript inline dentro de elementos script é bloqueado pelo sandbox — animações devem depender de SMIL ou keyframes de CSS. SVGs que dependem de uma fonte específica que não esteja instalada no sistema usarão uma fonte padrão; incorpore fontes ou use fontes do sistema para prévias.

Quando Usar Esta Ferramenta vs Código

Use a ferramenta no navegador para design pontual de ícones, depuração ou geração de data URIs. Para assets de produção, passe SVGs pelo SVGO com uma configuração ajustada para remover metadados e minificar a marcação, e use um sistema de sprites ou integração adequada com o bundler para carregar ícones no seu app em vez de embutir data URIs em todo lugar.