Mappe di spostamento SVG: deforma l’anteprima del logo

Un filtro SVG feDisplacementMap deforma l’immagine visualizzata dal renderer usando un’altra immagine come mappa di campionamento. Lascia invariati i dati dei tracciati sorgente. Usalo per un’anteprima reversibile del logo o un’illustrazione web e conserva un master senza filtro per modifica e consegna.

Per un primo esempio prevedibile, imposta in="SourceGraphic", scegli una mappa con nome per in2, specifica i canali orizzontale e verticale e imposta color-interpolation-filters="sRGB". Il riferimento MDN sullo spostamento spiega i due input e la formula di campionamento. Una forma che sembra piegata sullo schermo non è automaticamente un nuovo contorno modificabile.

Decidi quale file ti serve

L’esempio seguente usa un nostro stemma quadrato con centro aperto. I bordi dritti facilitano il confronto della deformazione. È un motivo dimostrativo, non il logo di un cliente o l’output di un vettorializzatore.

Anteprima e sorgente sono separate

Per una modifica dell’anteprima solo cromatica, usa la ricolorazione con feColorMatrix. Lo spostamento risponde a un problema spaziale: dove campionare l’immagine renderizzata.

Copia un esempio SVG statico e controllato

Salva questo codice come SVG e aprilo in un browser. Contiene un tracciato, una sorgente di rumore fissa, una matrice che mantiene variabile il canale orizzontale e neutro quello verticale, e una scala di spostamento di 36.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <defs>
    <filter id="warp" x="-25%" y="-25%" width="150%" height="150%" primitiveUnits="userSpaceOnUse"
            color-interpolation-filters="sRGB">
      <feTurbulence type="fractalNoise" baseFrequency="0.035"
                    numOctaves="1" seed="8" result="noise"/>
      <feColorMatrix in="noise" type="matrix" values="1 0 0 0 0
        0 0 0 0 0.5
        0 0 0 0 0
        0 0 0 0 1" result="map"/>
      <feDisplacementMap in="SourceGraphic" in2="map" scale="36"
                         xChannelSelector="R" yChannelSelector="G"/>
    </filter>
  </defs>
  <path d="M42 42H158V158H42Z M78 78H122V122H78Z" fill="#e76b50" fill-rule="evenodd" filter="url(#warp)"/>
</svg>

feTurbulence fornisce una variazione procedurale. Il riferimento MDN sul rumore documenta i controlli di frequenza, ottave, seme e tipo. Qui manteniamo fissi questi valori, così cambiando scale si confronta l’intensità sulla stessa mappa.

La matrice conserva il canale rosso del rumore, imposta il verde a 0.5, il blu a zero e l’alfa a uno. Il suo output è una mappa di controllo, non una nuova tavolozza per lo stemma corallo. Il riferimento MDN sulla matrice spiega la trasformazione dei canali. Il rosso controlla quindi il campionamento orizzontale, mentre il verde fornisce uno scostamento verticale neutro.

Per confrontare le intensità, cambia solo scale="36" in scale="12" e poi scale="0". Lascia invariati tracciato, seme, matrice della mappa, spazio colore e viewBox. Questo isola la decisione che stai prendendo.

Interpreta la scala come scostamento di campionamento

Per i canali della mappa selezionati, le posizioni di campionamento della sorgente sono:

sampleX = x + scale × (horizontalChannel - 0.5)
sampleY = y + scale × (verticalChannel - 0.5)

La specifica W3C sullo spostamento definisce questa mappatura inversa: ogni posizione di output chiede dove campionare la sorgente. Uno scostamento di campionamento positivo non è un’istruzione per spostare un nodo del tracciato in quella direzione.

Alla scala 36, il canale orizzontale produce questi scostamenti di campionamento:

L’esempio usa primitiveUnits="userSpaceOnUse", quindi questi valori si riferiscono al sistema di coordinate utente dell’SVG. Non sono distanze garantite in pixel CSS dopo il ridimensionamento del viewBox. La specifica definisce inoltre la scala 0 come priva di effetto di spostamento.

Il valore verde fisso mantiene neutro il campionamento verticale in questo esempio. Per esplorare successivamente la deformazione su due assi, fornisci deliberatamente variazione anche nel verde. Non cambiare contemporaneamente i canali e la mappa quando cerchi la causa di un risultato inatteso.

Esplicita lo spazio colore del grigio neutro

Neutro significa un valore del canale selezionato pari a 0.5 nello spazio di lavoro usato dalla mappa. Non significa che qualsiasi campione visivamente grigio medio sia neutro con ogni impostazione del filtro.

Lo spazio di lavoro predefinito del filtro è linearRGB, mentre questo esempio usa esplicitamente sRGB. Un colore scritto come rgb(50%,50%,50%) non vale numericamente 0.5 dopo la conversione in RGB lineare. Il riferimento MDN su color-interpolation-filters documenta il valore predefinito e le scelte esplicite.

Per una mappa costante diagnostica, sostituisci la primitiva di rumore e la matrice con:

<feFlood flood-color="rgb(50%,50%,50%)" result="map"/>

Mantieni la primitiva di spostamento, i selettori e l’sRGB esplicito sul filtro. Il riferimento MDN su feFlood documenta l’immagine a colore costante usata qui. Questo controllo aiuta a distinguere la variazione della mappa da uno spostamento dovuto allo spazio colore.

Nel nostro file di prova in Chrome, lo stemma con mappa costante sRGB appariva allineato a quello senza filtro. Rimuovendo l’impostazione esplicita dello spazio colore, lo stesso stemma con mappa grigia si spostava visibilmente. È un’osservazione nel browser, non un’affermazione di rendering identico al pixel tra motori. Conserva l’impostazione dello spazio colore quando trasferisci questa ricetta alla tua grafica; controlla eventuali regole CSS che la sovrascrivono.

Controlla lo stesso stemma a due dimensioni

Abbiamo renderizzato lo stemma originale a 120 × 120 e 300 × 300 pixel CSS in Chrome. Ogni dimensione mostrava la stessa mappa fissa alle scale 0, 12 e 36, con lo stesso viewBox 0 0 200 200.

L’effetto era visibile a entrambe le dimensioni; l’anteprima più grande facilitava l’esame di foro e bordi. Il DOM del browser conteneva ancora un tracciato in ciascuno dei sei campioni, con valori d identici. Tre controlli aggiuntivi da 200 pixel confrontavano uno stemma senza filtro con mappe grigie costanti in sRGB esplicito e linearRGB predefinito.

Sono campioni SVG creati indipendentemente. Stabiliscono il comportamento di questo file nel browser testato e che la geometria sorgente non è cambiata. Non sono test in editor nativi, output PerfectVector o un’indagine sulla compatibilità.

Per il tuo logo, esamina prima la dimensione di visualizzazione reale più piccola. Un’apertura o un angolo deformato possono cambiare la lettura del marchio anche se il master pulito è ancora intatto.

Diagnostica uno spostamento, un effetto debole o un bordo tagliato

L’intero stemma si sposta invece di piegarsi. Prova il controllo a mappa costante con sRGB esplicito. Controlla i canali selezionati e se la mappa varia effettivamente in essi. Un valore selezionato costante non neutro crea uno scostamento di campionamento uniforme.

L’effetto rimane debole. Conferma che in2="map" corrisponda al result con nome della matrice. Aumenta gradualmente la scala con lo stesso seme e la stessa frequenza. Poi, se serve, prova una mappa diversa. Un nuovo seme cambia il disegno spaziale, quindi è un confronto separato.

Il bordo verticale si comporta in modo inatteso. Questo esempio è progettato per lo spostamento orizzontale: xChannelSelector="R" e yChannelSelector="G", con G fisso a 0.5. Controlla la riga della matrice e l’ortografia dei canali prima di aggiungere variazione su due assi.

Il contorno deformato viene tagliato. Esamina la regione del filtro prima di modificare il tracciato sorgente. L’esempio offre spazio aggiuntivo con x="-25%", y="-25%" e larghezza e altezza del 150%. Il riferimento MDN su filter documenta questi attributi di regione. Effetti più estremi possono richiedere una regione diversa e un viewport circostante può imporre un altro limite. Segui i controlli di ritaglio di filtri e viewport SVG se ampliare la regione non risolve l’output mancante.

L’SVG perde l’effetto in un’altra destinazione. Apri esattamente il file consegnato in quella destinazione. Un’anteprima nel browser non stabilisce il comportamento di un editor, esportatore PDF o macchina da taglio. Mantieni disponibile il master pulito invece di promettere che il filtro si trasferirà invariato.

Consegna separatamente il master pulito

Per una versione senza filtro, rimuovi filter="url(#warp)" dal tracciato ed elimina la definizione del filtro inutilizzata. Conserva d originale, fill-rule="evenodd", riempimento e viewBox. Apri il file risultante e verifica che apertura quadrata e bordi dritti corrispondano alla versione pulita di riferimento.

Usa nomi di file separati per il master pulito e il trattamento visivo. Se ripeti l’SVG filtrato inline su una pagina, assegna a ogni filtro un ID univoco e aggiorna il relativo riferimento url(#...). Verifica il metodo di incorporamento finale e i browser che intendi supportare.

Se il contorno finale deformato deve essere esso stesso modificabile, prepara quella geometria come un lavoro grafico separato. Questo filtro non incorpora permanentemente l’anteprima in nuovi comandi di tracciato. Anche ricalcare un’anteprima rasterizzata è una nuova conversione con propri controlli di precisione e pulizia; non recupera il master originale matematicamente invariato.

Un PNG inserito dentro un SVG è una distinzione del tutto diversa. Vedi gli SVG che contengono immagini raster prima di presumere che il nome del file garantisca tracciati del logo modificabili.

Quando aiuta la vettorializzazione del logo

Se il logo originale pulito sopravvive solo come PNG o JPG, vettorializza quel logo sorgente, poi controlla sagoma, fori e regioni di colore modificabili prima di aggiungere un filtro di visualizzazione. PerfectVector gestisce la conversione da raster a vettore; il grafo di spostamento in questa guida è un trattamento SVG separato. Non trasforma l’anteprima deformata in un contorno di produzione garantito.

Se hai già il master pulito dei tracciati, usa direttamente quel file. Per preparare la sorgente e ripulire il logo, la guida alla vettorializzazione dei loghi tratta il recupero anziché la deformazione nel browser.

Domande frequenti

feDisplacementMap cambia i miei tracciati SVG? Questo filtro cambia l’immagine renderizzata tramite campionamento guidato dalla mappa. Nel file di prova originale nel browser, i sei campioni di intensità conservavano un tracciato con valori d identici.

Perché una mappa di spostamento grigia muove comunque la grafica? Neutro è un valore di canale pari a 0.5 nello spazio colore di lavoro della mappa. Un grigio sRGB al 50% non vale numericamente 0.5 dopo la conversione nello spazio linearRGB predefinito. Usa un’impostazione esplicita dello spazio colore e una prova controllata a mappa costante.

Cosa significa scala 36 in questo esempio? Con le unità delle primitive userSpaceOnUse, valori dei canali selezionati da 0 a 1 danno scostamenti di campionamento da -18 a +18 unità utente SVG. La distanza visualizzata dipende dal ridimensionamento del viewBox SVG.

Posso passare direttamente l’SVG deformato a una macchina da taglio? La deformazione visualizzata non è nuova geometria di taglio modificabile. Conserva un master dei tracciati senza filtro e verifica la destinazione effettiva; prepara separatamente contorni deformati permanenti se il lavoro li richiede.

Fonti

1. MDN: feDisplacementMap — Input sorgente e mappa, canali e comportamento del campionamento.
2. W3C: Filtro di spostamento — Mappatura inversa, scala e coordinate delle primitive.
3. MDN: feTurbulence — Controlli della mappa procedurale fissa.
4. MDN: feColorMatrix — Valori espliciti dei canali della mappa di controllo.
5. MDN: color-interpolation-filters — linearRGB predefinito e sRGB esplicito.
6. MDN: feFlood — Controllo con mappa a colore costante.
7. MDN: filter — Attributi della regione del filtro.

Se l’originale pulito esiste solo come raster, converti il tuo logo in SVG, controlla sagoma e fori e salva quel master prima di creare una copia separata per la visualizzazione deformata.