viewBox do SVG e dimensionamento responsivo

width e height do SVG definem o tamanho renderizado no DOM. O atributo viewBox define o espaço de coordenadas interno. Eles são independentes: um viewBox de "0 0 100 100" com width="200" height="200" amplia o espaço de coordenadas em 2 vezes.

viewBox="min-x min-y width height". O caso mais comum é: viewBox="0 0 100 100", que define um espaço de coordenadas de 100x100 começando na origem. Os valores de coordenadas no SVG referem-se a esse espaço, não a pixels.

Para criar um SVG responsivo, omita os atributos width e height (ou defina-os como 100%) e deixe que o viewBox defina as proporções. Adicione CSS: svg { width: 100%; height: auto; }. O SVG se ajusta ao contêiner, mantendo a proporção.

preserveAspectRatio controla como o viewBox se ajusta à janela de visualização do SVG quando as proporções são diferentes. Valores: "xMidYMid meet" (padrão — adiciona barras), "xMidYMid slice" (recorta para preencher), "none" (estica para preencher sem manter a proporção).

Alterar min-x e min-y desloca a parte visível do espaço de coordenadas do SVG. viewBox="50 50 100 100" mostra a região de (50,50) a (150,150). Isso permite criar uma panorâmica interativa atualizando os valores de viewBox com JavaScript.

Reduza as dimensões do viewBox para ampliar: viewBox="25 25 50 50" mostra uma região menor, ampliada para preencher o elemento SVG. Aumente as dimensões para reduzir o zoom. Atualize o viewBox em eventos de roda do mouse para criar um zoom interativo sem redimensionar o elemento SVG.

SVG em um elemento img: adapta-se responsivamente com object-fit, mas não pode ser estilizado com CSS nem controlado por scripts. SVG embutido: é totalmente acessível ao CSS e ao JavaScript, mas aumenta o tamanho do HTML. Escolha com base nas necessidades de interatividade.

SVGs de ícones usam um viewBox fixo (por exemplo, "0 0 24 24") e não definem width nem height, permitindo que o CSS determine seu tamanho: .icon { width: 1.5rem; height: 1.5rem; }. O viewBox garante que os ícones sejam redimensionados corretamente em qualquer tamanho, mantendo a renderização vetorial nítida.

Defina ícones em elementos <symbol viewBox="0 0 24 24"> dentro de um SVG oculto. Faça referência a eles: <use href="#icon-name">. Cada elemento use pode ter sua própria largura, altura, preenchimento e cor: um único arquivo de sprite para todos os ícones.

O preenchimento SVG fill="currentColor" herda a propriedade CSS color do elemento ou de seu elemento pai. Defina color: red no SVG ou em um elemento pai, e o ícone será preenchido automaticamente com a cor vermelha. Isso permite que ícones de uma só cor acompanhem a cor do texto sem uma estilização específica para SVG.

Se o conteúdo SVG parecer recortado ou estiver posicionado de forma inesperada, registre ou inspecione o valor de viewBox. Um erro comum é definir viewBox com as dimensões em pixels da arte de origem sem ajustá-lo ao tamanho renderizado, causando problemas de escala. Verifique se viewBox corresponde aos limites reais do conteúdo da arte SVG.

Como fazer um SVG se redimensionar de forma responsiva para se ajustar à largura de qualquer contêiner?

O viewBox do SVG define um espaço de coordenadas interno independente do tamanho renderizado em pixels, permitindo uma escala responsiva. Definir width:100%; height:auto com um viewBox faz com que os SVGs se adaptem a qualquer contêiner. O padrão de sprite com symbol+use, a tematização com currentColor e preserveAspectRatio formam um conjunto completo de recursos para usar SVGs flexíveis e adaptáveis a temas.