Pré-visualização / Editor de SVG

Como Funciona a Pré-visualização / Editor de SVG

O Que a Ferramenta Faz

A Pré-visualização / Editor de SVG renderiza marcação SVG em tempo real à medida que a edita e extrai metadados (largura, altura, viewBox, contagem de elementos) para inspeção rápida. Um alternador adiciona um fundo axadrezado para que consiga ver claramente as áreas transparentes. A ferramenta também produz um data URI codificado em URL, adequado para uso direto em CSS background-image ou em atributos src de HTML.

Casos de Uso Comuns para Programadores

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

Formatos, Tipos ou Variantes de Dados

A entrada é marcação XML SVG em bruto. A saída é o mesmo SVG renderizado num iframe em sandbox, mais um data URI codificado em 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 da complexidade. Os valores de atributos extraídos são mostrados na forma bruta.

Erros Comuns e Casos Limite

Recursos externos referenciados por elementos `use` ou `image` com href não serão carregados dentro do iframe em sandbox. JavaScript inline dentro de elementos script é bloqueado pelo sandbox — as animações devem basear-se em SMIL ou keyframes de CSS. SVGs que dependem de um tipo de letra específico que não esteja instalado no sistema irão recorrer a um predefinido; incorpore tipos de letra ou use tipos de letra do sistema para pré-visualizações.

Quando Usar Esta Ferramenta vs Código

Use a ferramenta no browser para design pontual de ícones, depuração ou geração de data URIs. Para ativos de produção, passe os SVGs pelo SVGO com uma configuração afinada para remover metadados e minificar a marcação, e use um sistema de sprites ou integração adequada com o bundler para carregar ícones na sua app, em vez de incluir data URIs inline em todo o lado.