As ferramentas de desenvolvimento que você usa todos os dias, tudo em um só lugar.

Conversores, formatadores, hashes, validadores e os pequenos utilitários que você fica reabrindo permanecem juntos em vez de se perderem entre as abas.

GitHub

/ Ferramentas

■

/ Buscador de ferramentas

109 ferramentas

/ Visualizador de SVG

Código SVG

Largura da pré-visualização (px)

Altura da pré-visualização (px)

/ Ferramenta selecionada

■

Visualizador de SVG - ferramenta de formatação gratuita

Visualize e pré-visualize código SVG com destaque de sintaxe

■ 01

O que é SVG?

SVG (Scalable Vector Graphics) é um formato de imagem vetorial baseado em XML para gráficos bidimensionais. Ao contrário das imagens raster, os SVGs podem ser dimensionados para qualquer tamanho sem perder qualidade, tornando-os ideais para logos, ícones e ilus…

■ 02

Como funciona?

Cole seu código SVG na área de texto. A ferramenta renderiza uma prévia ao vivo e exibe o código com destaque de sintaxe. Ajuste as dimensões da prévia para ver como o SVG se dimensiona. Use o botão Copiar para copiar o código SVG…

■ 03

Casos de exemplo

Abrange Círculo simples e Elemento path, para você comparar entradas e saídas comuns rapidamente.

/ Ferramentas relacionadas

/ Código

■

Código-fonte da ferramenta selecionada, mostrado aqui ao lado da versão ao vivo à direita.

/ Código-fonte

TypeScript

typescript

// No external dependencies needed - SVG is native to browsers

// Create an SVG programmatically
function createSvg(width: number, height: number): string {
  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">
  <!-- Add your SVG elements here -->
</svg>`;
}

// Example: Create a circle SVG