SVG preserveAspectRatio: ajuste sem distorcer

Use preserveAspectRatio="xMidYMid meet" quando todo o viewBox SVG deva caber em sua área de exibição sem distorção. Use slice quando essa área precisar ser coberta e algum conteúdo puder se estender além das bordas. Use none apenas quando uma escala horizontal e vertical desigual for intencional.

A distinção importante é entre o retângulo de coordenadas da arte, definido por viewBox, e a viewport em que ela aparece. O ajuste muda como um é mapeado para o outro. Ele não redesenha um logo, não remove a área de origem vazia nem exclui permanentemente traçados recortados.

Escolha primeiro o comportamento de ajuste

A referência de preserveAspectRatio do MDN documenta esses valores e o padrão, xMidYMid meet. Para um elemento svg, esse mapeamento exige um viewBox. O atributo diferencia maiúsculas de minúsculas: preserve o A e o R maiúsculos.

Para um logo, comece com meet. Perder uma letra ou transformar um círculo em oval geralmente é pior do que deixar algum espaço. Para um fundo ornamental, um recorte deliberado pode ser aceitável. Decida isso antes de escolher o alinhamento.

Teste um emblema em dois formatos de viewport

Este exemplo original usa um círculo, um retângulo e um triângulo fora do centro. O círculo torna a distorção visível; as partes desiguais facilitam perceber mudanças de alinhamento mais do que em um emblema simétrico.

Cole isto em um arquivo HTML e abra-o em um navegador:

<svg width="300" height="100" viewBox="0 0 200 100"
     preserveAspectRatio="xMidYMid meet"
     xmlns="http://www.w3.org/2000/svg"
     role="img" aria-label="Circle, rectangle, and triangle emblem"
     style="background:#f4ead4; overflow:hidden">
  <circle cx="40" cy="50" r="25" fill="#147d78" />
  <path d="M85 20 H130 V80 H85Z" fill="#e5a340" />
  <path d="M145 70 L170 25 L190 70Z" fill="#183549" />
</svg>

O viewBox tem 200 unidades de largura e 100 de altura. Sua proporção é 2:1. A primeira viewport tem 300 por 100 pixels CSS, proporção 3:1. Mude apenas o atributo para comparar xMidYMid slice e none. Depois mude a viewport para width="100" height="300" e repita.

Renderizamos essa geometria no Chrome com um pequeno ambiente de teste baseado em seletor. Sua leitura usou a matriz de transformação atual do grupo da arte. As escalas e translações resultantes corresponderam a estes valores; o deslocamento slice de aproximadamente −25 pixels está arredondado aqui.

Na viewport alta, meet mostrou as três pequenas formas. slice centralizado mostrou apenas parte da composição ampliada, dominada pelo retângulo dourado. none deixou o círculo estreito e alto. Esta é uma verificação deste exemplo no Chrome, não uma promessa sobre o comportamento de importação de todos os editores gráficos.

A regra de escala é direta neste exemplo com origem zero. Divida a largura da viewport pela largura do viewBox e depois a altura da viewport pela altura do viewBox. meet usa a menor razão nos dois eixos; slice usa a maior. none mantém as duas razões separadas. A especificação de sistema de coordenadas SVG define o mapeamento, incluindo alinhamento e origens de viewBox diferentes de zero.

Use alinhamento para escolher onde fica o espaço restante

A primeira palavra-chave controla o alinhamento. xMin, xMid e xMax alinham a borda esquerda, o centro horizontal ou a borda direita do viewBox. YMin, YMid e YMax fazem o equivalente verticalmente. Eles se referem ao retângulo do viewBox, que pode conter espaço vazio ao redor dos traçados reais.

Para a viewport alta do teste:

• xMinYMin meet coloca o viewBox ajustado no topo, em vez de centralizá-lo verticalmente.
• xMinYMin slice mantém o lado esquerdo do viewBox alinhado com o lado esquerdo da viewport. O lado direito ampliado se estende para fora da viewport.
• xMidYMid slice distribui o excesso horizontal entre os dois lados.

Mudamos o ambiente de teste de centralizado para xMinYMin. As translações de meet e slice se tornaram zero, enquanto seus fatores de escala permaneceram 0.5 e 3, respectivamente. O alinhamento moveu a composição; não mudou a escala de ajuste.

Uma mudança de alinhamento só é visível em um eixo com espaço restante ou excesso. No caso largo com meet, o viewBox já preenche a altura, portanto mudar YMid para YMin não deixa espaço vertical para movê-lo.

Faça do recorte uma escolha explícita

slice seleciona uma escala. O recorte determina se você vê as partes que se estendem para fora da viewport. O exemplo define overflow:hidden explicitamente para que o recorte seja previsível.

No ambiente de teste alto, mudar overflow para visible revelou o círculo e o triângulo ampliados além da viewport slice. A geometria não havia desaparecido. A referência de overflow SVG do MDN explica a relação entre overflow e recorte da viewport, incluindo diferenças no estilo padrão entre contextos SVG.

Evite tratar slice como uma operação de aparar traçados. Se um arquivo de entrega precisar conter apenas a geometria mantida, execute e verifique uma operação real de edição. Para uma janela de exibição personalizada não retangular, um clipPath pode ser a ferramenta adequada.

Da mesma forma, meet garante que o viewBox caiba; não garante que todo o conteúdo pintado caiba. Um contorno, filtro ou traçado fora desse retângulo de origem ainda pode se estender além dele. Inspecione as bordas visíveis em vez de confiar apenas no atributo.

Corrija o espaço vazio de origem antes de insistir no alinhamento

Suponha que uma pequena marca ocupe apenas o meio de um viewBox muito grande. meet ajusta todo esse retângulo de coordenadas, incluindo suas margens vazias. O resultado pode parecer pequeno demais mesmo quando a escala está correta.

Confira a área de desenho ou prancheta exportada no editor. Se mudar o viewBox para ajustar melhor a composição, inclua os contornos e efeitos pretendidos e confira cada inserção novamente. Não remova todas as margens automaticamente: a origem pode conter espaço livre deliberado ao redor de uma marca.

Problemas de tamanho físico são separados. Um SVG importado no tamanho errado em milímetros precisa do fluxo de tamanho SVG; mudar o alinhamento de ajuste dificilmente corrige suas suposições de unidades.

Separe SVG embutido de ajuste de imagem

Para SVG embutido, mude o atributo no elemento svg relevante. O CSS pode definir o tamanho da caixa desse elemento, enquanto preserveAspectRatio mapeia seu viewBox para essa caixa.

Para um SVG externo usado em um elemento de imagem HTML, o CSS controla o ajuste da imagem substituída:

<img class="brand-mark" src="emblem.svg" alt="Brand emblem">
<style>
  .brand-mark {
    width: 300px;
    height: 100px;
    object-fit: contain;
    object-position: center;
  }
</style>

A documentação de object-fit do MDN descreve como conteúdo substituído se ajusta à caixa CSS. Essa é uma camada diferente de editar o mapeamento interno do documento SVG. object-fit: contain também não remove uma área vazia já presente na origem. Veja SVG embutido versus elemento de imagem ao decidir qual modelo de incorporação usar.

Também existe um elemento SVG image, escrito com a palavra completa em vez de img do HTML. Seu preserveAspectRatio controla como a imagem referenciada se ajusta ao retângulo estabelecido para esse elemento. Ele é a exceção ao requisito geral de fornecer um viewBox no mesmo elemento, como explica a referência do atributo no MDN. Separar esses três casos evita tentar corrigir uma imagem HTML adicionando um atributo exclusivo de SVG a ela.

Preserve as proporções de origem antes do posicionamento

Se você só tem um PNG ou JPG da marca personalizada e precisa de geometria vetorial editável, o PerfectVector pode recuperar uma origem SVG antes de montar o layout. Primeiro inspecione os contornos, as pequenas aberturas e os limites da área de desenho. Ajustar o resultado preserva sua geometria atual; não repara uma origem distorcida nem recria detalhes que nunca foram recuperados.

Um SVG limpo existente pode seguir direto para as verificações de ajuste. Para o emblema simples acima, geometria criada manualmente é suficiente. A visão geral da vetorização de imagens explica quando recuperar traçados de uma imagem raster é útil.

Para uma marca apenas raster, experimente sua origem no PerfectVector, inspecione o SVG e compare uma inserção larga e uma alta com meet antes de considerar um recorte. Guarde o original vetorial para que as decisões de layout permaneçam reversíveis.

Perguntas frequentes

Por que meu SVG ainda tem espaço vazio com meet? A viewport e o viewBox podem ter proporções diferentes, deixando espaço restante após a escala uniforme. O viewBox de origem também pode conter margens ao redor dos traçados. O alinhamento move esse retângulo; não remove seu espaço interno.

slice recorta permanentemente a arte? Não. Ele muda a escala usada para cobrir a viewport. Overflow e recorte controlam quais partes ficam visíveis. A geometria original dos traçados permanece no documento, a menos que você a edite separadamente.

Por que none transforma meu círculo em oval? Ele permite fatores de escala horizontal e vertical diferentes. Quando as proporções da viewport e do viewBox diferem, um círculo pode se tornar uma elipse. Use meet ou slice com uma palavra-chave de alinhamento para manter escala uniforme.

Fontes

1. MDN preserveAspectRatio — Define valores de ajuste, alinhamento, padrões e a exceção de image SVG.
2. Especificação de sistema de coordenadas SVG — Define o cálculo de escala e translação para uma viewport.
3. MDN SVG overflow — Explica como overflow controla o recorte da viewport.
4. MDN object-fit — Documenta o ajuste de conteúdo de imagem substituído dentro de uma caixa CSS.