Unità dei motivi SVG: ripetizioni alla giusta scala

Per mantenere costante la spaziatura delle ripetizioni di un motivo SVG mentre cambi le dimensioni di una forma, usa patternUnits="userSpaceOnUse" e larghezza e altezza numeriche della tessera. Controlla separatamente la grafica all'interno della tessera con patternContentUnits o un viewBox del motivo.

Questa distinzione conta quando un piccolo motivo riempie sia un distintivo stretto sia uno striscione largo. Potresti volere più copie nello striscione, spazi più grandi fra le copie o un motivo allungato. Ciascun risultato richiede una scelta di coordinate diversa. Ridimensionare l'intero gruppo dello striscione cambia nuovamente il risultato.

Se il motivo è già composto da tracciati SVG, mantienili. La vettorializzazione viene prima nella procedura, quando l'unico sorgente è un'immagine raster.

Distingui la tessera dalla sua grafica

Un motivo ha una tessera rettangolare ripetuta e un contenuto disegnato al suo interno. patternUnits controlla x, y, width e height della tessera. patternContentUnits controlla le coordinate del contenuto, a meno che il motivo abbia un viewBox.

Con objectBoundingBox, una larghezza .25 significa un quarto della larghezza del riquadro delimitatore dell'oggetto riempito. Non significa un quarto della larghezza del motivo. Un rettangolo largo 120 unità riceve una tessera da 30 unità; uno largo 240 riceve una tessera da 60.

Il valore predefinito del contenuto rimane userSpaceOnUse. Cambiare soltanto patternUnits può quindi cambiare gli spazi fra i motivi lasciando ciascun motivo alle stesse dimensioni. Imposta entrambi gli attributi deliberatamente invece di presumere che cambino insieme.

Confronta quattro versioni della stessa foglia

Abbiamo disegnato i tracciati della foglia per questo esempio e renderizzato l'SVG in un browser. Entrambi i rettangoli di destinazione sono alti 80 unità; le larghezze sono 120 e 240. Lo screenshot aggiunge etichette e sfondi intorno a quelle forme originali. È una dimostrazione SVG, non un risultato di conversione PerfectVector.

Leggi le righe dall'alto verso il basso:

1. Una tessera fissa 40 × 40 produce tre colonne nel rettangolo stretto e sei in quello largo. Le dimensioni della foglia rimangono invariate.
2. Una larghezza della tessera .25 mantiene quattro colonne in entrambi gli oggetti. Il rettangolo più largo ha più spazio fra le foglie perché le coordinate della foglia usano ancora unità utente.
3. Le coordinate del contenuto relative al riquadro delimitatore allungano orizzontalmente la foglia quando la larghezza dell'oggetto raddoppia. La sua dimensione verticale rimane uguale perché l'altezza dell'oggetto è invariata.
4. Una tessera fissa 40 × 40 con viewBox="0 0 40 40" ritorna al risultato della prima riga, anche se patternContentUnits="objectBoundingBox" rimane nel markup. Il viewBox del motivo ha la precedenza.

Apri l'esempio completo

Salva questo codice come pattern-units.svg e aprilo direttamente in un browser. Le quattro righe usano le stesse definizioni della figura, senza etichette e sfondi. Ogni coppia di rettangoli si trova in gruppi traslati, così le origini locali sono confrontabili.

<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>

Inizia dal motivo fixed e cambia soltanto la larghezza del secondo rettangolo. Ispeziona poi tile e both prima di cambiare un tracciato. Questo tiene separata la scelta delle coordinate dalla grafica stessa. Per modifiche più ampie a tracciati e colori, usa la guida alla modifica degli SVG.

Usa viewBox quando il motivo ha coordinate proprie

Un viewBox del motivo permette alla foglia di mantenere un'area di disegno familiare mentre la tessera ha dimensioni separate. La specifica dei motivi SVG adatta quell'area di disegno alla tessera usando viewBox e preserveAspectRatio.

Nell'ultima riga, sia la tessera sia il viewBox sono 40 × 40, quindi non c'è differenza di proporzioni. Se in seguito rendi rettangolare la tessera, il valore predefinito preserveAspectRatio="xMidYMid meet" mantiene le proporzioni del motivo e centra l'area di disegno adattata. preserveAspectRatio="none" consente scale orizzontali e verticali indipendenti. Sceglilo soltanto quando la deformazione è intenzionale.

Cambiare patternContentUnits non corregge le dimensioni quando è presente un viewBox del motivo: in quel caso l'attributo non ha effetto. Cambia dimensioni della tessera, viewBox o regola delle proporzioni in base alla parte che deve cambiare.

Un motivo è utile quando una sola definizione deve disegnare un riempimento ripetuto. Se servono invece copie posizionate individualmente, simboli SVG e istanze use sono più adatti a quel lavoro.

Ridimensionare il rettangolo è diverso dal ridimensionare il gruppo

userSpaceOnUse fissa la spaziatura in coordinate utente, non in pixel dello schermo permanenti. Una trasformazione può ridimensionare quelle coordinate, incluso il riempimento a motivo.

Abbiamo aperto anche due versioni con la definizione fixed sopra. Il primo rettangolo aveva width="240". Il secondo manteneva width="120" all'interno di un gruppo con transform="translate(20 120) scale(2 1)". Entrambi occupavano 240 unità sullo schermo in quel documento, ma il primo mostrava sei colonne di foglie e quello trasformato tre colonne allungate orizzontalmente.

Usa questa distinzione per diagnosticare grafica adattabile alle dimensioni:

• Per mostrare più ripetizioni, ingrandisci la geometria dell'oggetto mantenendo invariata la scala delle coordinate.
• Per ingrandire l'intera composizione, ridimensiona il gruppo e aspettati che anche l'aspetto del motivo si ridimensioni.
• Se la disposizione della pagina cambia le dimensioni visualizzate dell'SVG radice, ispeziona la mappatura del suo viewBox prima di attribuire il problema agli attributi del motivo.

La specifica del sistema di coordinate SVG descrive le trasformazioni applicate alle coordinate utente. Per una differenza fra applicazioni, controlla prima le dimensioni del documento SVG; le sole unità del motivo non possono stabilire dimensioni fisiche di output.

Prepara un motivo personalizzato prima di ripeterlo

Se il motivo esiste soltanto come PNG o JPG, PerfectVector può recuperare geometria SVG per la ripetizione. Converti il motivo in vettore, apri il risultato in un editor e ispeziona contorno, piccoli spazi e forme di sfondo indesiderate prima di inserirlo in un motivo.

Conserva un originale SVG separato del motivo. Costruisci la tessera intorno a una copia, poi prova un oggetto stretto e uno largo. La grafica vettoriale esistente può passare direttamente a questa fase di modifica. Un semplice simbolo geometrico potrebbe essere più rapido da ridisegnare manualmente, mentre potrebbe essere preferibile conservare una fotografia come immagine invece di ricalcarla in un insieme complesso di tracciati.

Un rendering nel browser non dimostra che ogni applicazione di progettazione conservi la definizione del motivo. Riapri il file salvato nella destinazione effettiva e controlla lì spaziatura delle ripetizioni e forma del motivo. Un riempimento ripetuto non crea inoltre copie indipendenti modificabili di ogni foglia visibile. La guida ai file SVG spiega perché la struttura del documento conta insieme al suo aspetto.

Prima di consegnare il file, controlla che ogni fill="url(#...)" punti a un ID di motivo esistente e univoco, che la tessera abbia dimensioni positive e che il motivo rientri nella tessera prevista. I motivi SVG normalmente ritagliano il contenuto al bordo della tessera, quindi una foglia che attraversa un bordo richiede una progettazione deliberata della ripetizione, anziché presumere che la parte fuoriuscita appaia.

FAQ

Perché la spaziatura è cambiata ma la foglia è rimasta uguale? patternUnits controlla le dimensioni della tessera, mentre patternContentUnits controlla le coordinate della grafica. Una tessera relativa al riquadro delimitatore con contenuto predefinito nello spazio utente può cambiare la spaziatura senza ridimensionare la foglia.

Perché patternContentUnits sembra non fare nulla? Cerca un viewBox sul motivo. Quando è presente, definisce la mappatura delle coordinate del contenuto e patternContentUnits non ha effetto.

userSpaceOnUse mantiene il motivo alle stesse dimensioni sullo schermo? Mantiene le dimensioni numeriche della tessera nel sistema di coordinate utente corrente dell'oggetto. Ridimensionare un gruppo o cambiare la mappatura fra coordinate e area di visualizzazione dell'SVG radice può comunque cambiare le dimensioni visualizzate del motivo.

Fonti

1. MDN — patternUnits — Definisce le coordinate della geometria della tessera e il valore predefinito relativo al riquadro delimitatore.
2. MDN — patternContentUnits — Definisce le coordinate del contenuto e la precedenza del viewBox.
3. W3C — Motivi SVG — Spiega adattamento della tessera, comportamento delle proporzioni e ritaglio dei motivi.
4. W3C — Sistemi di coordinate SVG — Definisce le trasformazioni delle coordinate utente alla base del ridimensionamento dei gruppi.

Hai un motivo solo raster da riusare? Trasforma l'immagine in tracciati SVG, ispeziona il contorno recuperato e provalo in entrambe le dimensioni degli oggetti prima di costruire la ripetizione finale.