ToolAct

Visualizador SVG

Editor de código SVG & prévia online

Código SVG
Caracteres: 0Bytes: 0
Prévia SVG
A prévia SVG aparecerá aqui

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

  1. Digite ou cole código SVG no editor à esquerda
  2. O painel à direita exibe a renderização do SVG em tempo real
  3. Clique no botão 'Source' para ver o código SVG formatado
  4. Clique no botão 'Baixar' para salvar o SVG como arquivo
  5. 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

Visualizar marcação SVG durante a ediçãoCole o código SVG no editor com destaque de sintaxe e a página o analisa com DOMParser antes de renderizar. SVG válido aparece no painel de prévia, enquanto erros de análise mostram um estado de SVG inválido em vez de renderizar saída quebrada de aparência insegura, e qualquer tag foreignObject ou script incorporada é preservada exatamente como foi escrita.
Inspecionar e compartilhar código SVGO destaque de sintaxe usa o wrapper local de highlight.js para XML, e as contagens de bytes de entrada/saída tornam o tamanho do ativo visível. Você pode copiar o SVG validado ou baixá-lo como image.svg para uso em design, documentação ou trabalho de frontend, com a indentação original e os atributos xml:space preservados na saída.
Carregar uma amostra SVG confiável para testes rápidosO botão de amostra insere um pequeno SVG de círculo com gradiente e texto, fornecendo uma estrutura de referência para defs, gradientes, formas, texto, namespaces e dimensionamento. É útil para testar se a renderização, cópia ou download estão funcionando, incluindo casos onde web fonts são referenciadas e precisam recorrer a uma pilha de sistema. O atributo xml:space="preserve" em um elemento <text> é o que impede o renderizador de colapsar sequências de espaços em branco dentro de títulos ou rótulos monoespaçados, então SVGs que parecem corretos em uma prévia de navegador ainda podem renderizar com espaços colapsados quando abertos em visualizadores mais antigos.
Verificar o dimensionamento do viewBox antes de incorporar em layoutsCole o SVG e confirme que os atributos viewBox, width e height renderizam corretamente em diferentes tamanhos de contêiner. SVGs sem preserveAspectRatio ou com viewBox ausente frequentemente cortam ou esticam quando inseridos em grids CSS responsivos, e um único zero final ausente no viewBox pode deslocar toda a composição em alguns pixels.
Auditar SVG em busca de scripts e referências externasAntes de exportar um ícone para um CMS ou site em produção, verifique o painel de código em busca de tags <script>, xlink:href para URLs externas e handlers onload. Remover ou colocar esses elementos em sandbox por meio de um sanitizador de SVG reduz o risco de JavaScript inline ou pixels de rastreamento dentro do que parece ser uma imagem estática. Web fonts referenciadas de um CDN podem falhar silenciosamente quando o SVG é baixado e reaberto offline, então uma pilha de font-face com fallback genérico (serif, sans-serif) mantém o texto legível na cópia salva.

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ó &lt;parsererror&gt; 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ó &lt;parsererror&gt; 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.

Ferramentas relacionadas

二维码生成器

在线二维码生成工具，支持文本、网址、名片等类型。自定义样式、颜色、大小，一键下载高清图片。

条形码生成器

在线条形码生成器，支持CODE128、EAN13、EAN8、UPC、CODE39、ITF14等多种条码格式。可自定义颜色、尺寸，一键生成并下载PNG或SVG格式条形码。

屏幕检测

在线屏幕检测工具，检测坏点、亮点、漏光问题。多种纯色测试、对比度测试，评估显示器质量。

纯色背景生成器

在线纯色背景图生成工具，自定义颜色和尺寸，支持常用预设（1080p、2K、4K等），一键下载PNG/JPG图片。浏览器本地处理，保护隐私。

颜色选择器

在线颜色选择工具，HEX、RGB、HSL格式互转。生成调色板，获取网页配色，提升设计效率。

字体预览工具

用本机已安装的任意字体预览文字，或上传 TTF、OTF、WOFF、WOFF2 字体文件。可调字号、字重、字间距、行高与颜色，一键复制 CSS。全部在浏览器内完成，不上传任何内容。