Unidades de padrões SVG: motivos repetidos no tamanho certo

Para manter constante o espaçamento de repetição de um padrão SVG ao alterar as dimensões de uma forma, use patternUnits="userSpaceOnUse" e largura e altura numéricas para o ladrilho. Controle a arte dentro desse ladrilho separadamente com patternContentUnits ou um viewBox do padrão.

Essa distinção importa quando um pequeno motivo preenche tanto um emblema estreito quanto um banner largo. Você pode querer mais cópias no banner, intervalos maiores entre as cópias ou um motivo esticado. Cada resultado exige uma escolha diferente de coordenadas. Escalar todo o grupo do banner muda o resultado novamente.

Se o motivo já é composto por traçados SVG, mantenha esses traçados. A vetorização pertence a uma etapa anterior do fluxo, quando a única origem é uma imagem raster.

Separe o ladrilho da sua arte

Um padrão tem um ladrilho retangular que se repete e conteúdo desenhado dentro dele. patternUnits controla x, y, width e height do ladrilho. patternContentUnits controla as coordenadas do conteúdo, a menos que o padrão tenha um viewBox.

Com objectBoundingBox, uma largura de .25 significa um quarto da largura da caixa delimitadora do objeto pintado. Não significa um quarto da largura do motivo. Um retângulo de 120 unidades de largura recebe um ladrilho de 30 unidades; um retângulo de 240 unidades de largura recebe um de 60 unidades.

O padrão do conteúdo continua sendo userSpaceOnUse. Alterar apenas patternUnits pode, portanto, mudar os intervalos entre os motivos enquanto mantém o tamanho de cada motivo. Defina os dois atributos deliberadamente, em vez de supor que eles mudam juntos.

Compare quatro versões de uma folha

Desenhamos os traçados da folha para este exemplo e renderizamos o SVG em um navegador. Os dois retângulos de destino têm 80 unidades de altura; suas larguras são 120 e 240. A captura de tela acrescenta rótulos e fundos ao redor dessas formas originais. É uma demonstração SVG, não um resultado de conversão do PerfectVector.

Leia as linhas de cima para baixo:

1. Um ladrilho fixo de 40 × 40 produz três colunas no retângulo estreito e seis no largo. As dimensões da folha permanecem iguais.
2. Uma largura de ladrilho de .25 mantém quatro colunas nos dois alvos. O retângulo mais largo tem mais espaço entre as folhas porque suas coordenadas ainda usam unidades do usuário.
3. Coordenadas de conteúdo baseadas na caixa delimitadora esticam a folha horizontalmente quando a largura do alvo dobra. Seu tamanho vertical permanece igual porque a altura do alvo não muda.
4. Um ladrilho fixo de 40 × 40 com viewBox="0 0 40 40" retorna ao resultado da primeira linha, mesmo com patternContentUnits="objectBoundingBox" ainda na marcação. O viewBox do padrão tem precedência.

Abra o exemplo completo

Salve isto como pattern-units.svg e abra-o diretamente em um navegador. As quatro linhas usam as mesmas definições da figura, sem seus rótulos e fundos. Cada par de retângulos fica em grupos transladados para que suas origens locais sejam comparáveis.

<svg xmlns="http://www.w3.org/2000/svg" width="560" height="420" viewBox="0 0 560 420">
<defs>
  <pattern id="fixed" patternUnits="userSpaceOnUse" width="40" height="40">
    <path d="M8 24 Q8 6 30 8 Q30 26 8 24Z" fill="#127f70"/>
  </pattern>
  <pattern id="tile" patternUnits="objectBoundingBox" width=".25" height=".5">
    <path d="M8 24 Q8 6 30 8 Q30 26 8 24Z" fill="#127f70"/>
  </pattern>
  <pattern id="both" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox" width=".25" height=".5">
    <path d="M.04 .30 Q.04 .08 .20 .10 Q.20 .33 .04 .30Z" fill="#127f70"/>
  </pattern>
  <pattern id="box" patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox" width="40" height="40" viewBox="0 0 40 40">
    <path d="M8 24 Q8 6 30 8 Q30 26 8 24Z" fill="#127f70"/>
  </pattern>
</defs>
  <g transform="translate(20 20)"><rect width="120" height="80" fill="url(#fixed)"/></g>
  <g transform="translate(220 20)"><rect width="240" height="80" fill="url(#fixed)"/></g>
  <g transform="translate(20 120)"><rect width="120" height="80" fill="url(#tile)"/></g>
  <g transform="translate(220 120)"><rect width="240" height="80" fill="url(#tile)"/></g>
  <g transform="translate(20 220)"><rect width="120" height="80" fill="url(#both)"/></g>
  <g transform="translate(220 220)"><rect width="240" height="80" fill="url(#both)"/></g>
  <g transform="translate(20 320)"><rect width="120" height="80" fill="url(#box)"/></g>
  <g transform="translate(220 320)"><rect width="240" height="80" fill="url(#box)"/></g>
</svg>

Comece com o padrão fixed e altere somente a largura do segundo retângulo. Depois, inspecione tile e both antes de alterar um traçado. Isso mantém a escolha de coordenadas separada da própria arte. Para mudanças mais amplas de traçados e cores, use o guia de edição de SVG.

Use viewBox quando o motivo tiver suas próprias coordenadas

Um viewBox do padrão permite que a folha mantenha uma área de desenho conhecida enquanto o ladrilho tem um tamanho separado. A especificação de padrões SVG ajusta essa área de desenho ao ladrilho usando viewBox e preserveAspectRatio.

Na última linha, tanto o ladrilho quanto o viewBox têm 40 × 40, portanto não há diferença de proporção. Se você depois tornar o ladrilho retangular, o padrão preserveAspectRatio="xMidYMid meet" mantém as proporções do motivo e centraliza a área de desenho ajustada. preserveAspectRatio="none" permite escalas horizontal e vertical independentes. Escolha essa opção somente quando a distorção for intencional.

Alterar patternContentUnits não corrigirá o dimensionamento enquanto houver um viewBox no padrão: esse atributo não tem efeito nesse caso. Altere as dimensões do ladrilho, o viewBox ou sua regra de proporção conforme a parte que deve mudar.

Um padrão é útil quando uma única definição deve pintar um preenchimento repetido. Se você precisa de cópias posicionadas individualmente, símbolos SVG e instâncias use atendem a esse trabalho mais diretamente.

Redimensionar o retângulo é diferente de escalar seu grupo

userSpaceOnUse fixa o espaçamento nas coordenadas do usuário, não em pixels permanentes da tela. Uma transformação pode escalar essas coordenadas, incluindo o preenchimento do padrão.

Também abrimos duas versões com a definição fixed acima. O primeiro retângulo tinha width="240". O segundo manteve width="120" dentro de um grupo com transform="translate(20 120) scale(2 1)". Os dois ocuparam 240 unidades na tela nesse documento, mas o primeiro mostrou seis colunas de folhas e o transformado mostrou três colunas esticadas horizontalmente.

Use essa distinção ao investigar uma arte responsiva:

• Para revelar mais repetições, amplie a geometria do alvo mantendo inalterada a escala de suas coordenadas.
• Para ampliar toda a composição, escale o grupo e espere que a aparência de seu padrão também seja escalada.
• Se o layout de uma página altera o tamanho exibido do SVG raiz, inspecione o mapeamento de seu viewBox antes de atribuir o problema aos atributos do padrão.

A especificação de sistemas de coordenadas SVG descreve as transformações aplicadas às coordenadas do usuário. Para uma diferença entre aplicativos, confira primeiro as dimensões do documento SVG; as unidades do padrão, sozinhas, não estabelecem um tamanho físico de saída.

Prepare um motivo personalizado antes de repeti-lo

Se seu motivo existe apenas como PNG ou JPG, o PerfectVector pode recuperar a geometria SVG para a repetição. Converta o motivo para vetor, abra o resultado em um editor e inspecione o contorno, os pequenos espaços e as formas de fundo indesejadas antes de colocá-lo dentro de um padrão.

Mantenha um mestre SVG separado desse motivo. Construa o ladrilho ao redor de uma cópia e teste um alvo estreito e um largo. Uma arte vetorial existente pode ir diretamente para essa etapa de edição. Uma marca geométrica simples pode ser mais rápida de redesenhar manualmente, enquanto uma fotografia pode ser melhor mantida como imagem, em vez de vetorizada em um conjunto complexo de traçados.

Uma renderização no navegador não demonstra que todos os aplicativos de desenho preservam a definição do padrão. Reabra o arquivo salvo no destino real e confira ali o espaçamento da repetição e a forma do motivo. Um preenchimento repetido também não cria cópias editáveis independentes de cada folha visível. O guia de arquivos SVG explica por que a estrutura do documento importa junto com sua aparência.

Antes de entregar o arquivo, confira se cada fill="url(#...)" aponta para um ID de padrão existente e único, se o ladrilho tem dimensões positivas e se o motivo cabe no ladrilho pretendido. Padrões SVG normalmente recortam o conteúdo no limite do ladrilho; por isso, uma folha que atravessa uma borda exige um desenho deliberado da repetição, em vez de supor que o excedente aparecerá.

Perguntas frequentes

Por que meu espaçamento mudou, mas a folha ficou do mesmo tamanho? patternUnits controla as dimensões do ladrilho, enquanto patternContentUnits controla as coordenadas da arte. Um ladrilho baseado na caixa delimitadora com conteúdo no espaço do usuário, que é o padrão, pode mudar o espaçamento sem redimensionar a folha.

Por que patternContentUnits parece não fazer nada? Confira se o padrão tem um viewBox. Quando há um, ele define o mapeamento de coordenadas do conteúdo e patternContentUnits não tem efeito.

userSpaceOnUse mantém o padrão no mesmo tamanho na tela? Ele mantém as dimensões numéricas do ladrilho no sistema atual de coordenadas do usuário do alvo. Escalar um grupo ou mudar o mapeamento de coordenadas para a área de visualização do SVG raiz ainda pode alterar o tamanho exibido do padrão.

Fontes

1. MDN — patternUnits — Define as coordenadas da geometria do ladrilho e o padrão baseado na caixa delimitadora.
2. MDN — patternContentUnits — Define as coordenadas do conteúdo e a substituição por viewBox.
3. W3C — padrões SVG — Explica o ajuste do ladrilho, o comportamento da proporção e o recorte do padrão.
4. W3C — sistemas de coordenadas SVG — Define as transformações de coordenadas do usuário por trás da escala de grupos.

Você tem um motivo disponível apenas em raster para reutilizar? Transforme sua imagem em traçados SVG, inspecione o contorno recuperado e teste-o nos dois tamanhos de destino antes de criar a repetição final.