Categoria: Desenvolvimento
Editor de viewBox de SVG
Leia e reescreva o viewBox de um SVG manualmente
Cole um código SVG, carregue seu viewBox atual (ou sua largura e altura, se não tiver um), depois ajuste o min-x, min-y, largura e altura para recortar, adicionar espaço ou reancorar a arte, e copie o SVG reescrito.
<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <rect width="120" height="120" rx="16" fill="#0f766e" /> <circle cx="60" cy="60" r="34" fill="#f4d35e" /> </svg>
Nada é enviado. O código é analisado e reescrito somente nesta página.
Tudo nesta página é processado no seu navegador. Nada é enviado.
Para que serve
O atributo viewBox é o que mapeia o sistema de coordenadas interno de um SVG para o espaço em que ele é renderizado, então alterá-lo é como você recorta parte de um ícone, adiciona espaço ao redor dele ou desloca sua origem sem tocar em um único caminho. Editar quatro números à mão em um editor de texto é trabalhoso e fácil de errar; esta ferramenta analisa o SVG que você cola, preenche os quatro campos do viewBox com o que encontra, e reescreve o código ao vivo conforme você os altera, com uma prévia para que você veja o recorte antes de copiar.
Como usar
- Cole um código SVG que inclua uma tag <svg>.
- Clique em "Carregar viewBox atual" para preencher os quatro campos, ou digite seu próprio min-x, min-y, largura e altura.
- Confira a prévia e copie o código SVG reescrito.
Privacidade
Esta ferramenta roda inteiramente no seu navegador. O que você digita nunca é enviado, salvo ou compartilhado — fechar a aba já remove tudo.
Perguntas frequentes
- Isso envia meu SVG para algum lugar?
- Não. O código é analisado e reescrito com correspondência simples de texto na aba do seu navegador; nada é enviado a um servidor.
- O que acontece com os atributos de largura e altura?
- Eles permanecem exatamente como estão. Alterar o viewBox reescala o que é desenhado dentro da viewport existente, da mesma forma que um navegador o aplica, em vez de redimensionar o próprio elemento.
- Por que a prévia às vezes aparece vazia?
- Uma largura ou altura zero, ou um viewBox que não se sobrepõe à arte, recorta tudo até sobrar nada. Aumente a caixa ou verifique os valores de min-x/min-y.