Effetti filtro SVG: creare effetti visivi avanzati
Padroneggia i filtri SVG per sfocatura, ombre, effetti di colore e trattamenti visivi complessi. Guida completa alle primitive di filtro e combinazioni creative.
Founder of VectoSolve
Self-taught developer, founder and sole developer of VectoSolve since 2024. He builds the conversion engine and the cutting, embroidery and 3D printing exports.
How this article was made: drafted with AI assistance, then edited and fact-checked before publication. About the author
Key Takeaways
- I filtri SVG applicano effetti visivi accelerati dalla GPU come sfocatura, ombra e distorsione direttamente nel browser
- Le primitive di filtro (feGaussianBlur, feColorMatrix, feTurbulence, ecc.) possono essere concatenate per creare effetti complessi
- Ricette creative come vetro smerigliato, bagliore neon e rilievo sono costruite combinando semplici primitive di filtro
- Le prestazioni variano ampiamente — feColorMatrix è leggero mentre feTurbulence è computazionalmente pesante
- Usa i filtri CSS come fallback per effetti semplici e riserva i filtri SVG per composizioni avanzate
La potenza dei filtri SVG
I filtri SVG permettono effetti visivi sofisticati senza immagini raster. Dalle ombre semplici alle distorsioni complesse, i filtri trasformano la grafica vettoriale in modi potenti.
Fondamenti dei filtri
Struttura del filtro
<defs>
<filter id="myFilter">
<!-- Primitive di filtro qui -->
</filter>
</defs>
<rect filter="url(#myFilter)" .../>Regione del filtro
Controlla i limiti del filtro:
<filter id="f" x="-20%" y="-20%" width="140%" height="140%">
<!-- Estende l'area del filtro oltre l'elemento -->
</filter>Pro Tip: Estendi sempre la regione del filtro (es: x="-20%") quando usi effetti di sfocatura o ombra. Se l'output del filtro appare tagliato, la regione del filtro è troppo piccola.
Effetti filtro comuni
Sfocatura (feGaussianBlur)
<filter id="blur">
<feGaussianBlur stdDeviation="5"/>
</filter>Sfocatura variabile:
<!-- Solo sfocatura orizzontale -->
<feGaussianBlur stdDeviation="10 0"/>
<!-- Solo sfocatura verticale -->
<feGaussianBlur stdDeviation="0 10"/>Ombra esterna (feDropShadow)
Ombra semplice:
<filter id="shadow">
<feDropShadow dx="3" dy="3" stdDeviation="2" flood-opacity="0.5"/>
</filter>Ombra personalizzata
Più controllo:
<filter id="custom-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
<feOffset in="blur" dx="4" dy="4" result="offset"/>
<feFlood flood-color="#000" flood-opacity="0.5" result="color"/>
<feComposite in="color" in2="offset" operator="in" result="shadow"/>
<feMerge>
<feMergeNode in="shadow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual DealEffetti di colore
Matrice colore (feColorMatrix)
Conversione in scala di grigi:
<filter id="grayscale">
<feColorMatrix type="saturate" values="0"/>
</filter>Tono seppia:
<filter id="sepia">
<feColorMatrix type="matrix"
values="0.393 0.769 0.189 0 0
0.349 0.686 0.168 0 0
0.272 0.534 0.131 0 0
0 0 0 1 0"/>
</filter>Rotazione della tonalità:
<filter id="hue-rotate">
<feColorMatrix type="hueRotate" values="90"/>
</filter>Regolazione del colore
Luminosità/contrasto:
<filter id="bright">
<feComponentTransfer>
<feFuncR type="linear" slope="1.5" intercept="0"/>
<feFuncG type="linear" slope="1.5" intercept="0"/>
<feFuncB type="linear" slope="1.5" intercept="0"/>
</feComponentTransfer>
</filter>"I filtri SVG sono il Photoshop del browser — sovrapponili con saggezza e potrai creare effetti che altrimenti richiederebbero software pesante di editing immagini.
Spostamento e distorsione
Turbolenza
Creazione di rumore:
<filter id="turbulence">
<feTurbulence type="turbulence"
baseFrequency="0.05"
numOctaves="2"/>
</filter>Mappa di spostamento
Distorsione con pattern:
<filter id="displace">
<feTurbulence type="turbulence"
baseFrequency="0.02"
numOctaves="3"
result="noise"/>
<feDisplacementMap in="SourceGraphic"
in2="noise"
scale="30"
xChannelSelector="R"
yChannelSelector="G"/>
</filter>Effetti di illuminazione
Illuminazione diffusa
Illuminazione tipo 3D:
<filter id="diffuse">
<feDiffuseLighting lighting-color="#white" surfaceScale="5">
<fePointLight x="100" y="100" z="200"/>
</feDiffuseLighting>
</filter>Illuminazione speculare
Riflessi brillanti:
<filter id="specular">
<feSpecularLighting specularConstant="1"
specularExponent="30"
lighting-color="white"
surfaceScale="5">
<fePointLight x="150" y="60" z="200"/>
</feSpecularLighting>
</filter>Free SVG Tools for Crafters
Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG
Check Your SVG FreeCombinare i filtri
Operazioni di fusione
Sovrapposizione dei risultati:
<filter id="glow">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>Operazioni di composizione
Combinare con operatori:
<filter id="cutout">
<feImage href="mask.svg" result="mask"/>
<feComposite in="SourceGraphic"
in2="mask"
operator="in"/>
</filter>Ricette creative
Vetro smerigliato
<filter id="frosted">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
<feColorMatrix in="blur" type="saturate" values="1.5" result="saturate"/>
<feTurbulence type="fractalNoise" baseFrequency="0.1" result="noise"/>
<feDisplacementMap in="saturate" in2="noise" scale="5"/>
</filter>Bagliore neon
<filter id="neon">
<feFlood flood-color="#ff00ff" result="flood"/>
<feComposite in="flood" in2="SourceGraphic" operator="in" result="mask"/>
<feGaussianBlur in="mask" stdDeviation="5" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>Effetto rilievo
<filter id="emboss">
<feConvolveMatrix
order="3"
kernelMatrix="-2 -1 0
-1 1 1
0 1 2"/>
</filter>
Animazione con filtri
Sfocatura animata
<filter id="animated-blur">
<feGaussianBlur stdDeviation="0">
<animate attributeName="stdDeviation"
values="0;10;0"
dur="2s"
repeatCount="indefinite"/>
</feGaussianBlur>
</filter>Turbolenza dinamica
<feTurbulence baseFrequency="0.02">
<animate attributeName="baseFrequency"
values="0.01;0.05;0.01"
dur="5s"
repeatCount="indefinite"/>
</feTurbulence>A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual DealConsiderazioni sulle prestazioni
Impatto sulle prestazioni
Prestazioni dei filtri:
feGaussianBlur: Pesante (dipende dal raggio)
feColorMatrix: Leggero
feTurbulence: Molto pesante
feDisplacementMap: Pesante
Filtri concatenati: CumulativoSuggerimenti per l'ottimizzazione
- Minimizzare la regione del filtro
- Ridurre il raggio di sfocatura
- Limitare gli effetti concatenati
- Memorizzare in cache i filtri statici
- Usare filtri CSS quando possibile
Per effetti semplici come sfocatura, scala di grigi o ombra esterna, il filter CSS è significativamente più veloce dei filtri SVG perché sfrutta il compositing accelerato dall'hardware. Riserva i filtri SVG per effetti che il CSS non può replicare.
Alternativa con filtri CSS
Quando possibile, usa il CSS:
.blurred {
filter: blur(5px);
}
.grayscale {
filter: grayscale(100%);
}Compatibilità browser
Stato del supporto
Supporto ampio:
- feGaussianBlur
- feColorMatrix
- feOffset
- feMerge
Supporto variabile:
- feDisplacementMap
- feTurbulence
- feDiffuseLightingStrategie di fallback
.element {
/* Fallback */
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
@supports (filter: url(#shadow)) {
.element {
box-shadow: none;
filter: url(#shadow);
}
}Conclusione
I filtri SVG permettono effetti sofisticati impossibili solo con il CSS. Sebbene computazionalmente intensivi, offrono un controllo preciso sui trattamenti visivi. Usali con giudizio per effetti d'impatto, considerando sempre le prestazioni e fornendo fallback.
Crea effetti vettoriali filtrati
| Primitiva di filtro | Effetto | Costo prestazionale |
|---|---|---|
| feGaussianBlur | Sfocatura morbida / vetro smerigliato | Medio (accelerato GPU) |
| feColorMatrix | Spostamento colore, desaturazione | Basso |
| feTurbulence | Rumore, texture organiche | Alto (calcolo a livello pixel) |
| feDisplacementMap | Distorsione, effetti ondulazione | Alto |
| feDropShadow | Ombre esterne | Basso–Medio |
Free SVG Tools for Crafters
Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG
Check Your SVG FreeFonti e approfondimenti
- MDN Web Docs: Effetti filtro SVG — Riferimento dettagliato per ogni primitiva di filtro SVG e i suoi attributi
- W3C SVG 2: Effetti filtro — Specifica ufficiale del pipeline di filtri SVG e del modello di compositing
- CSS-Tricks: Filtri SVG — Esempi visivi e ricette per combinazioni creative di filtri SVG
- Smashing Magazine: Filtri SVG — Tutorial avanzati sul concatenamento delle primitive di filtro per effetti visivi in produzione