Desenvolvedor / Inspeção de SVG

Visualizador de SVG: inspecione, redimensione e copie SVG

Visualize o código SVG localmente com controles de zoom e plano de fundo. Confira dimensões e tokens de cor, edite largura e altura, corrija o viewBox e baixe ou copie um data URI.

Visualizador de SVG: inspecione, redimensione e copie SVG: Lê as dimensões do SVG, o viewBox, a quantidade de elementos, o tamanho em bytes e o uso explícito de cores. Edita somente os atributos de dimensionamento solicitados do elemento raiz após a sanitização. Um viewBox ausente pode ser preenchido com base nas dimensões de origem; o modo responsivo mantém o viewBox e remove os atributos width e height. Roda 100% localmente no seu navegador, sem enviar nenhum arquivo para o servidor.

Categoria
Ferramentas para desenvolvedores
Execuções
No seu navegador
Custo
Grátis · sem cadastro
Disponibilidade
Pronto para usar
Visualizador e redimensionador de SVGProcessamento local

Roda inteiramente no seu navegador

Escolha ou solte um SVG

Viewport e viewBox do SVG

O viewBox é composto por quatro números: x mínimo, y mínimo, largura e altura. A largura e a altura devem ser positivas. Especificação: https://www.w3.org/TR/SVG2/coords.html

Dimensionamento e prévias locais

Os comprimentos absolutos são convertidos usando 96 pixels CSS por polegada. O zoom e o plano de fundo da prévia não alteram a marcação exportada. Regras de processamento de imagens SVG: https://www.w3.org/TR/SVG2/conform.html

Como usar

  1. Solte um SVG ou cole o código para conferir uma prévia sanitizada.
  2. Defina as dimensões com bloqueio opcional de proporção, ajuste o viewBox ou remova as dimensões para uso responsivo.
  3. Baixe o SVG, copie o código ou copie um data URI codificado.

Privacidade e limitações

O SVG é processado localmente e renderizado como uma imagem isolada. Scripts, manipuladores de eventos e recursos externos são removidos.

Ferramentas relacionadas

SVG para PNGLimpador de SVGEditor SVG

Perguntas frequentes

Alterar o viewBox muda o desenho?

Isso altera a área de coordenadas visível. Use o viewBox existente quando quiser apenas mudar o tamanho de exibição; um viewBox diferente pode cortar ou deslocar o desenho visível.

O que acontece quando as dimensões estão ausentes?

O visualizador usa as dimensões do viewBox e, depois, um fallback de 300 × 150 pixels. Comprimentos físicos absolutos usam 96 pixels por polegada; comprimentos relativos precisam de uma página contêiner para serem calculados com precisão.

Por que o modo responsivo remove width e height?

Um viewBox preserva o sistema de coordenadas, enquanto o layout ao redor controla o tamanho exibido.

Posso copiar um data URI?

Sim. O data URI contém o SVG de saída sanitizado com codificação de URI.

Ferramenta grátis · no seu navegador execuções · não precisa de conta