Visualizador SVG
Cole ou escreva SVG em EntradaCole ou digite código SVG na esquerda
Visualizador SVG online. Cole código SVG para pré-visualizar gráficos vetoriais renderizados instantaneamente, com suporte para copiar e baixar arquivos .svg. Processamento local e seguro.
Sugestões Relacionadas
O que é SVG?
SVG (Gráficos Vetoriais Escaláveis) é um formato de imagem baseado em XML para descrever formas geométricas. Diferente de JPG e PNG, que são bitmaps (matrizes de pixels), SVG usa tags como <rect>, <circle> e <path> para descrever caminhos matemáticos das formas, mantendo-se nítido em qualquer tamanho sem pixelização.
**Quando usar SVG?** Logos, ícones de UI, fluxogramas, marcadores de mapa, gráficos, decorações animadas e ilustrações reutilizáveis: qualquer cenário que exija nitidez, personalização de cor, escalabilidade ou controle CSS é uma escolha natural para SVG.
**SVG vs Canvas:** Canvas é uma API de desenho imperativa onde a saída se torna pixels; SVG consiste em nós DOM declarativos onde você pode modificar atributos, estilos CSS e anexar eventos a qualquer momento. Use SVG para ícones, elementos UI e gráficos interativos; use Canvas para jogos, partículas e pixel art.
**Componentes comuns:** Elemento raiz <svg>, grupos <g>, caminhos <path> (o mais usado com atributo d), gradientes (<linearGradient>/<radialGradient>), filtros (<filter>) e animações (SMIL/CSS/JS).
**Como pré-visualizar?** Cole seu código-fonte SVG no editor desta página e veja a renderização ao vivo à direita. O layout de painéis divididos ajustável ajuda você a verificar em segundos se seu código SVG está correto.
Casos de uso
- Desenvolvedores frontend pré-visualizando rapidamente a renderização de código de ícones SVG
- Verificar a exibição do SVG após copiar do Figma, Sketch ou outras ferramentas de design
- Pré-visualizar alterações ao vivo ao depurar caminhos, cores ou atributos viewBox do SVG
- Revisar e validar código SVG antes de integrar ao código do projeto
Como Usar
- Cole o código-fonte SVG no editor à esquerda, ou clique em "Carregar exemplo" para ver uma demo
- O painel direito renderiza o gráfico vetorial instantaneamente: edite o código para ver atualizações ao vivo
- Quando satisfeito, clique em copiar para copiar o código, ou baixe como .svg com nome personalizado
Recursos
- Pré-visualização ao vivo: Cole ou edite código SVG para renderizar gráficos vetoriais instantaneamente, o que você vê é o que obtém
- Layout dividido: Painéis lado a lado redimensionáveis ao arrastar no desktop, alternância por abas no mobile
- Exportação com um clique: Copie o código SVG para a área de transferência ou baixe com nome personalizado como .svg padrão
- Processamento local: Toda a análise e renderização acontece no navegador, seu código nunca sai do seu dispositivo
- Fundo transparente: O fundo xadrez mostra claramente as áreas transparentes e detalhes das bordas
- Contador de caracteres: Contador de caracteres em tempo real com exemplo integrado para começar rapidamente
Perguntas frequentes
Como faço para pré-visualizar código SVG online?
Cole seu código-fonte SVG no painel de edição à esquerda, e o painel direito renderizará o gráfico vetorial instantaneamente. Você pode editar o código diretamente no editor com atualizações ao vivo, facilitando a depuração de ícones frontend.
Como faço para baixar e salvar o SVG pré-visualizado?
Clique no botão de download no canto superior direito do painel de pré-visualização. Você pode personalizar o nome do arquivo antes de salvá-lo como um arquivo .svg padrão. Você também pode clicar no botão copiar para copiar o código SVG diretamente para a área de transferência.
Meu código SVG é enviado para um servidor? É seguro?
Não. Toda a análise e renderização do SVG acontece localmente no seu navegador. Seu código SVG nunca é enviado para nenhum servidor: ele é processado inteiramente no seu dispositivo e descartado quando você sai.
Suporta código SVG copiado de softwares de design?
Sim. Código SVG copiado do Figma, Sketch, Adobe Illustrator ou outras ferramentas de design pode ser colado diretamente para pré-visualização. Recomendamos verificar o resultado renderizado primeiro antes de integrá-lo ao seu projeto.
Por que meu SVG não está aparecendo? Causas comuns?
Problemas comuns: ① Falta da declaração de namespace xmlns="http://www.w3.org/2000/svg"; ② Tags não fechadas no código; ③ Caracteres especiais não escapados corretamente; ④ Erros de sintaxe no próprio SVG. Por favor verifique esses itens.
Posso personalizar o nome do arquivo SVG baixado?
Sim. Após clicar no botão de download, um campo de entrada para o nome do arquivo aparecerá. Você pode personalizar o nome (padrão image.svg), depois pressione Enter ou clique em Confirmar para baixar. A ferramenta adiciona automaticamente a extensão .svg se faltar.
Glossário
- viewBox
- O sistema de coordenadas interno do SVG no formato "x y width height". O comum "0 0 24 24" significa 24 unidades de largura e altura. O tamanho real de exibição de um SVG é controlado pelos atributos width/height ou CSS externo.
- Namespace XML
- SVG deve declarar xmlns="http://www.w3.org/2000/svg" para que os navegadores o reconheçam corretamente como documento SVG. Namespace ausente é o motivo mais comum pelo qual SVG não é exibido em HTML.MDN - Namespace SVG
- Atributo d de path
- O conjunto de comandos de caminho, consistindo de letras como M/L/C/Q/H/V/Z mais coordenadas. M=Mover para, L=Linha para, C=Bézier cúbica, Q=Bézier quadrática, Z=Fechar caminho. Ícones complexos são frequentemente expressos com apenas um elemento path e seu atributo d.
- currentColor
- Uma palavra-chave CSS que se refere à propriedade color do elemento atual. Definir fill ou stroke como currentColor no SVG permite alterar cores de ícones por meio de mudanças de cor CSS externas, um padrão comum em sistemas de design.
Referência rápida de elementos SVG comuns
| Elemento | Tipo | Finalidade |
|---|---|---|
<svg> | Raiz | Contêiner para todo o conteúdo SVG, obrigatório |
<rect> | Forma básica | Retângulos, retângulos arredondados |
<circle> / <ellipse> | Forma básica | Círculos / elipses |
<line> / <polyline> | Forma básica | Linhas / polilinhas |
<polygon> / <path> | Caminho | Polígonos / curvas arbitrárias (atributo d) |
<text> / <tspan> | Texto | Texto incorporado no SVG |
<g> | Grupo | Agrupar elementos para transformações unificadas |
<defs> / <symbol> | Definição | Formas e gradientes reutilizáveis |
<linearGradient> / <radialGradient> | Gradiente | Preenchimentos de gradiente linear / radial |
<use> | Referência | Referenciar elementos de defs |
<filter> | Filtro | Efeitos avançados como desfoque, sombra |
Comparação SVG vs formatos bitmap
| Dimensão | SVG (Vetorial) | PNG (Bitmap) | JPG (Bitmap) |
|---|---|---|---|
| Composição | XML descreve caminhos geométricos | Matriz de pixels | Matriz de pixels (compactação DCT) |
| Escala | Mantém-se nítido em qualquer tamanho | Fica pixelado ao ampliar | Fica pixelado com artefatos visíveis |
| Tamanho do arquivo | Varia por complexidade, logos geralmente < 10KB | Médio (sem perdas) | Menor (com perdas) |
| Transparência | ✅ | ✅ | ❌ |
| Animação | ✅ SMIL / CSS / JS | ❌ (requer APNG) | ❌ |
| Controle de cor CSS | ✅ currentColor / variáveis fill | ❌ | ❌ |
| Ideal para | Ícones, logos, vetores UI | Assets transparentes, capturas de tela | Fotos, gradientes amplos |
Authoritative References
- ReferenceMDN - Tutorial SVG
- ReferenceMDN - Elemento <svg>
- ReferenceWikipedia - Gráficos Vetoriais Escaláveis
- ReferenceW3C - Especificação SVG
- Comprimir imagens
- Converter Imagem
- PNG para JPG
- HEIC para JPG
- WebP para JPG
- JPG para PNG
- JPG para WebP
- PNG para WebP
- WebP para PNG
- HEIC para PNG
- HEIC para WebP
- AVIF para JPG
- Cortar Imagem
- AVIF para PNG
- AVIF para WebP
- GIF para JPG
- GIF para PNG
- GIF para WebP
- SVG para JPG
- SVG para PNG
- SVG para WebP
- TIFF para JPG
- Filtros de Imagem
- TIFF para PNG
- TIFF para WebP
- Gerador ICO
- Editor de imagens
- Leitor de QR Code
- Redimensionar Imagem
- Girar e Espelhar Imagem
- Cantos Arredondados
- Gerador de Sprite CSS
- Visualizador SVG
- Imagem para Arte ASCII
- Ampliar Imagem
- Marca d'água Imagem