ViewBox: o espaço do seu SVG
Entenda os quatro valores do viewBox, ajuste o enquadramento e redimensione seu SVG sem distorção.
Quatro números, um enquadramento
O atributo viewBox descreve o retângulo do desenho que será mostrado: posição horizontal mínima, posição vertical mínima, largura e altura. Ele usa unidades do desenho, que não precisam corresponder a pixels da tela.
<svg xmlns="http://www.w3.org/2000/svg"
width="240" height="120" viewBox="0 0 100 50">
<circle cx="50" cy="25" r="20" fill="#649a35"/>
</svg>Neste exemplo, o desenho ocupa um espaço de 100 por 50 unidades, exibido em uma área de 240 por 120 pixels. O centro do círculo permanece no centro da imagem.
Dimensões e viewBox têm papéis diferentes
Width e height definem o tamanho solicitado para a imagem. ViewBox define as coordenadas visíveis. Alterar apenas a largura não muda as coordenadas dos elementos. Com viewBox, o navegador consegue mapear o desenho para o espaço disponível.
Como corrigir o enquadramento
- Abra o SVG no editor e selecione o elemento raiz svg.
- Confira width, height e viewBox nas propriedades.
- Use largura e altura positivas no viewBox. Ajuste os dois primeiros valores para deslocar a área visível.
- Compare o resultado em diferentes tamanhos antes de exportar.
Não copie automaticamente width e height para o viewBox quando essas medidas tiverem unidades como porcentagens ou centímetros. Primeiro descubra os limites do desenho. O SVG Lab não calcula automaticamente esses limites nesta versão.
Evite distorção
O comportamento padrão preserva a proporção do desenho. Um preserveAspectRatio="none" pode esticá-lo para preencher a área. Revise esse atributo no código se círculos estiverem parecendo elipses.