Gerador de ViewBox SVG

Controle com precisão como a arte SVG é dimensionada e exibida ajustando o atributo viewBox. O viewBox define o sistema de coordenadas e a proporção dos seus gráficos vetoriais — configurá-lo corretamente garante um dimensionamento perfeito em qualquer tamanho.

Entendendo as coordenadas viewBox

O atributo viewBox contém quatro valores: minX, minY, largura e altura. Eles definem a área visível do canvas SVG. Valores incorretos causam gráficos distorcidos, cortados ou mal posicionados. Esta ferramenta permite ajustar cada valor com feedback visual em tempo real.

Visualização para maior precisão

Veja como as alterações nas coordenadas afetam seu SVG instantaneamente. Esta abordagem visual elimina suposições ao calibrar os valores do viewBox. Se a arte aparecer cortada, você pode expandir a largura e a altura. Se o posicionamento estiver errado, ajuste minX e minY.

Preenchimento para espaço extra

Adicione espaço ao redor do conteúdo sem modificar as coordenadas manualmente. O preenchimento expande o viewBox uniformemente, deixando seus gráficos respirar em vez de ficarem colados às bordas do canvas.

Geração instantânea de código

Após ajustar os valores, copie o atributo viewBox pronto para uso diretamente no seu código SVG. Sem cálculos manuais nem tentativa e erro no editor de código.

Quando usar este gerador

Ao exportar SVG do Figma, Illustrator ou Inkscape, o viewBox pode não corresponder ao espaço visual desejado. Se seus ícones aparecerem cortados, se houver espaço em branco indesejado ou se o SVG não dimensionar corretamente, este gerador ajuda a corrigir isso de forma visual e intuitiva.