Gradienti SVG: una sfumatura per più tracciati

Per distribuire un unico gradiente su tracciati SVG separati, usa gradientUnits="userSpaceOnUse", imposta gli estremi nelle coordinate della grafica e mantieni i tracciati nello stesso sistema di coordinate. Ogni tracciato mostra così la porzione di sfumatura corrispondente alla propria posizione. Le parti del logo restano modificabili separatamente.

Il valore predefinito, objectBoundingBox, adatta il gradiente a ogni elemento colorato. Tre tracciati che fanno riferimento allo stesso ID di gradiente possono quindi produrre tre sfumature complete dal viola all'arancione. Cambiare le unità elimina questa ripetizione, ma un elemento figlio trasformato può ancora spostare la propria colorazione. Il riferimento MDN su gradientUnits definisce lo spazio di riferimento come lo spazio utente corrente dell'elemento che usa il gradiente.

Questa guida usa un emblema originale in tre parti disegnato direttamente con tracciati SVG. Se hai già un logo vettoriale, parti da quell'originale. Una sorgente disponibile solo in formato raster richiede la ricostruzione della geometria prima di questa modifica della colorazione; la guida alla vettorializzazione dei gradienti approfondisce questa scelta.

Decidi se la sfumatura appartiene a ogni forma o all'intero simbolo

Usa una colorazione relativa all'oggetto quando ogni parte deve avere una sfumatura completa. Usa estremi condivisi nello spazio utente quando le parti sinistra e destra devono assumere colori diversi della stessa transizione.

Impostare fill="url(#brandBlend)" su un gruppo passa il riempimento ai suoi figli. Non fa sì che un gradiente relativo al riquadro delimitatore misuri la sagoma complessiva del gruppo. I figli continuano a ricevere una colorazione propria. La specifica SVG dei paint server descrive i gradienti come risorse richiamate dal riempimento o dal tratto di un elemento.

Un emblema, quattro scelte di coordinate

Imposta estremi che coprano la grafica

I tracciati dell'esempio occupano posizioni orizzontali da x=30 a x=310. Questi sono gli estremi della sfumatura. Il triangolo termina a x=125, il blocco centrale va da 140 a 210 e la forma destra si estende da 225 a 310.

Salva questo esempio come shared-logo.svg e aprilo in un browser:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 170" width="720" height="340">
  <defs>
    <linearGradient id="brandBlend" gradientUnits="userSpaceOnUse" x1="30" y1="0" x2="310" y2="0">
      <stop offset="0" stop-color="#5939d8" />
      <stop offset="0.5" stop-color="#ee4380" />
      <stop offset="1" stop-color="#ffae42" />
    </linearGradient>
  </defs>
  <g fill="url(#brandBlend)">
    <path d="M30 120 L90 30 L125 120 Z" />
    <path d="M140 45 H210 V135 H140 Z" />
    <path d="M225 30 H310 L280 135 H225 Z" />
  </g>
</svg>

Dovresti vedere un triangolo viola, un blocco centrale prevalentemente rosa e una forma destra sfumata in arancione, come in B. Gli spazi vuoti nascondono sezioni della stessa sfumatura; il colore non riparte all'inizio del tracciato successivo. Modifica un punto colore del gradiente e tutte e tre le parti si aggiornano perché richiamano la stessa definizione.

Per confrontarlo direttamente con A, sostituisci gli attributi gradientUnits, x1, y1, x2 e y2 del gradiente con x1="0%" y1="0%" x2="100%" y2="0%". Omettere gradientUnits ripristina il valore predefinito. Ogni forma riceve ora l'intera transizione di colore.

Anche le percentuali hanno un riferimento diverso: con userSpaceOnUse, si riferiscono al viewport SVG corrente anziché al riquadro delimitatore dell'oggetto colorato. I numeri espliciti rendono questo esempio più facile da verificare. Per sfumare un logo che occupa solo parte di un grande viewBox non è necessario usare tutta la larghezza del viewBox.

Controlla le trasformazioni quando una parte ha il colore sbagliato

In C, la forma destra sembra rimasta al suo posto. Le coordinate del tracciato si sono spostate di 60 unità a sinistra e un gruppo figlio l'ha spostata di 60 unità a destra:

<g transform="translate(60 0)">
  <path d="M165 30 H250 L220 135 H165 Z" />
</g>

Sostituisci il terzo tracciato nell'esempio completo con questo gruppo per riprodurre la discrepanza. Il suo bordo sinistro visibile rimane a x=225, ma il suo bordo sinistro locale è a x=165. Il gradiente usa quello spazio locale, quindi la parte assume i colori di una porzione precedente, più rosa, della sfumatura. userSpaceOnUse non garantisce un unico sistema di coordinate globale indipendentemente dalle trasformazioni annidate.

Per questo emblema, ripristina le coordinate originali del terzo tracciato e rimuovi la sua traslazione individuale. Se devi spostare l'intero logo, applica invece transform="translate(10 0)" al gruppo esterno esistente. Ottieni così D: tutte e tre le forme e la colorazione condivisa si spostano insieme.

Questa correzione funziona perché i tracciati sono già espressi in un sistema di coordinate comune. Inserire figli trasformati indipendentemente dentro un altro gruppo non elimina le loro singole trasformazioni. Per un logo importato, controlla queste trasformazioni prima di appiattire o riscrivere la geometria e conserva una copia dell'originale.

Quando gradientTransform è utile

gradientTransform cambia la mappatura delle coordinate della colorazione senza modificare la geometria del tracciato. È utile quando vuoi ruotare, inclinare o riposizionare una sfumatura. MDN lo descrive come una trasformazione aggiuntiva applicata dopo aver stabilito il sistema di coordinate selezionato da gradientUnits.

Evita di modificare una definizione condivisa per compensare un singolo figlio senza controllare gli altri. Ogni forma che richiama quella definizione può risentirne. Per questo logo semplice, mantenere la grafica in uno spazio comune rende più facile la manutenzione; una grafica importata più complessa può richiedere definizioni di gradiente mappate separatamente.

Dove interviene PerfectVector

Se l'unica sorgente è un logo PNG o JPG, PerfectVector può aiutarti a ricostruire una geometria vettoriale modificabile prima di ricreare il gradiente coordinato. Vettorializza il logo, poi controlla la sagoma, i fori e le parti distinte nel tuo editor. Usa quelle forme come punto di partenza per la colorazione condivisa.

La dimostrazione precedente è stata scritta a mano per isolare il comportamento delle coordinate; non è un risultato di conversione di PerfectVector. Non presumere che il ricalco di pixel sfumati ricostruisca i punti colore originali del gradiente o le sue impostazioni di coordinate. Un logo semplice può anche essere più veloce da ridisegnare manualmente. Conserva un SVG, AI o PDF vettoriale esistente quando disponibile.

Per una forma che non accetta un nuovo riempimento, usa i controlli per ricolorare gli SVG prima di cambiare le coordinate del gradiente. Se la stessa esportazione appare diversa fra applicazioni, segui la diagnosi dei cambi di colore SVG.

Riapri il file prima di consegnarlo

Salva un nuovo SVG e verifica il file effettivo, non soltanto la tela dell'editor. Controlla quanto segue:

• L'ID del gradiente esiste e ogni tracciato previsto lo richiama.
• La sfumatura copre i limiti del logo nella direzione desiderata.
• Spostare l'intero simbolo mantiene i colori coordinati.
• Le parti separate restano selezionabili dove devi modificarle.
• L'applicazione di destinazione conserva l'aspetto previsto.

Un rendering uniforme nel browser dimostra il comportamento della colorazione in quel browser. Non dimostra il supporto in ogni editor e non trasforma il gradiente in geometria per il taglio. Conserva una versione a colori piatti per i flussi che richiedono forme piene e mantieni l'originale SVG modificabile. La guida ai file SVG spiega la differenza fra il contenuto geometrico del file e il suo aspetto visualizzato.

FAQ

Devo unire i tracciati per condividere un gradiente? No. Tracciati separati possono richiamare un unico gradiente. Usa userSpaceOnUse con estremi appropriati e assicurati che i tracciati condividano il sistema di coordinate desiderato.

Perché raggruppare i tracciati continua a ripetere il gradiente? Un gruppo può passare il suo riempimento ai tracciati figli, ma un gradiente objectBoundingBox continua a usare i limiti di ogni figlio colorato. Imposta estremi nello spazio utente quando la sfumatura deve coprire l'intero simbolo.

Perché il colore di un tracciato è cambiato dopo averlo spostato in un gruppo? Una trasformazione su quel gruppo può cambiare il sistema di coordinate locale del tracciato. Confronta le sue trasformazioni con quelle degli altri tracciati e verifica l'SVG esportato prima di modificare il gradiente condiviso.

Fonti

1. MDN — gradientUnits — Definisce il valore predefinito, i sistemi di coordinate di riferimento e il comportamento delle percentuali.
2. SVG Working Group — Paint server — Specifica la colorazione riutilizzabile dei gradienti, i punti colore e il comportamento di estensione.
3. MDN — gradientTransform — Spiega le trasformazioni aggiuntive delle coordinate del gradiente.

Parti da un logo raster? Trasforma il logo in tracciati SVG modificabili, controlla le forme separate, poi ricrea il gradiente condiviso e riapri l'esportazione finale per verificarne l'allineamento.