> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.
# Mappe di spostamento SVG: deforma l’anteprima del logo
> Usa feDisplacementMap per deformare un’anteprima, controllare canali e grigio neutro in sRGB e verificare due dimensioni. Conserva il master dei tracciati per la consegna.
Source: https://perfectvector.com/it/blog/svg-fedisplacementmap-artwork
Language: it
Author: Irene Kim
Published: 2026-10-01T08:00:00+09:00
Updated: 2026-10-01T08:00:00+09:00
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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDisplacementMap) 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
| Obiettivo | Approccio adatto | Cosa conservare |
| -------------------------------------------------------- | ------------------------------------------------------------------ | ---------------------------------------------------------- |
| Grafica deformata statica in una pagina web | Una copia di visualizzazione filtrata | Master originale dei tracciati SVG |
| Logo modificabile con contorni deformati permanentemente | Modificare o ricostruire deliberatamente la geometria | Nuova geometria dei tracciati verificata |
| Anteprima raster con aspetto fisso | Renderizzare la copia di visualizzazione alle dimensioni richieste | Master pulito ed esportazione raster controllata |
| Geometria di produzione per stampa o taglio | Partire dal master senza filtro | Dimensioni, fori e tracciati verificati nella destinazione |
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**
*Illustrazione: lo stemma visibile può deformarsi mentre il contorno sorgente rimane invariato. Questo diagramma concettuale non è una schermata del browser, un’esportazione da un editor nativo o un risultato di conversione.*
Per una modifica dell’anteprima solo cromatica, usa la [ricolorazione con feColorMatrix](https://perfectvector.com/it/blog/svg-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`.
```xml
```
`feTurbulence` fornisce una variazione procedurale. Il [riferimento MDN sul rumore](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) 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:
```text
sampleX = x + scale × (horizontalChannel - 0.5)
sampleY = y + scale × (verticalChannel - 0.5)
```
La [specifica W3C sullo spostamento](https://drafts.csswg.org/filter-effects/#feDisplacementMapElement) 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:
| Valore del canale nello spazio colore di lavoro del filtro | Scostamento orizzontale di campionamento |
| ---------------------------------------------------------- | ---------------------------------------- |
| `0` | `-18` |
| `0.5` | `0` |
| `1` | `+18` |
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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/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:
```xml
```
Mantieni la primitiva di spostamento, i selettori e l’`sRGB` esplicito sul filtro. Il [riferimento MDN su feFlood](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/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`.
| Intensità | Osservazione nel file di prova originale | Decisione che supporta |
| --------- | ------------------------------------------------------------------- | -------------------------------------------------- |
| `0` | Bordi esterni dritti e apertura quadrata | Base per il confronto |
| `12` | Lieve variazione orizzontale del contorno; apertura ancora visibile | Un trattamento visivo contenuto |
| `36` | Deformazione più forte del bordo esterno e dell’apertura | Verificare la riconoscibilità prima della consegna |
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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/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](https://perfectvector.com/it/blog/svg-shadow-clipped) 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](https://perfectvector.com/it/blog/svg-contains-raster-image) 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](https://perfectvector.com/it/vectorize-logo), 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](https://perfectvector.com/it/blog/how-to-vectorize-a-logo) 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDisplacementMap) — Input sorgente e mappa, canali e comportamento del campionamento.
2. [W3C: Filtro di spostamento](https://drafts.csswg.org/filter-effects/#feDisplacementMapElement) — Mappatura inversa, scala e coordinate delle primitive.
3. [MDN: feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) — Controlli della mappa procedurale fissa.
4. [MDN: feColorMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) — Valori espliciti dei canali della mappa di controllo.
5. [MDN: color-interpolation-filters](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters) — linearRGB predefinito e sRGB esplicito.
6. [MDN: feFlood](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feFlood) — Controllo con mappa a colore costante.
7. [MDN: filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) — Attributi della regione del filtro.
Se l’originale pulito esiste solo come raster, [converti il tuo logo in SVG](https://perfectvector.com/it/vectorize-logo), controlla sagoma e fori e salva quel master prima di creare una copia separata per la visualizzazione deformata.
## Explore
- [Read the HTML article](https://perfectvector.com/it/blog/svg-fedisplacementmap-artwork)
- [Ricalco immagine disattivato: controlla l’oggetto](https://perfectvector.com/it/blog/illustrator-image-trace-greyed-out.md)
- [Immagini SVG con fpdf2: tracciati nel PDF Python](https://perfectvector.com/it/blog/fpdf2-svg-image.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)