Filtro <filter> SVG

L'elemento <filter> dei filtri SVG viene utilizzato per aggiungere effetti eleganti alle immagini SVG. Ad esempio, ombreggiature, sfocature o riflessi.

Esempio di filtro

Questo è un esempio semplice di filtro SVG che mostra due ellissi. La ellisse sinistra non utilizza il filtro, mentre quella destra è renderizzata con il filtro di sfocatura Gaussiana:

<svg width="500" height="100">
<defs>
　　　　　　<filter id="blurFilter" y="-5" height="40"
　　　　　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="3" y="-"/>
　　　　　　</filter>
　　</defs>
　　　　
　　<ellipse cx="55" cy="60" rx="25" ry="15"
　　　　　　　　　　　style="stroke: none; fill: #0000ff; " />
　　<ellipse cx="155" cy="60" rx="25" ry="15"
　　　　　　　　　　　style="stroke:none; fill:#0000ff; filter:url(#blurFilter);" />
</svg>

Effetto dell'immagine dopo l'esecuzione:

Attenzione al bordo sfocato dell'ellisse destra.

Input e output del filtro

I filtri SVG richiedono alcuni input (sorgente) e applicano l'effetto del filtro su di essi. L'input del filtro può essere una forma grafica (che rappresenta i colori RGB), un canale alpha della forma o l'output di altri filtri.

I filtri SVG generano un'output grafico a partire dall'input (risultato). Questo output viene solitamente visualizzato, piuttosto che applicare la forma del filtro. L'output del filtro può essere utilizzato come input per un altro filtro. Pertanto, è possibile collegare i filtri.

Ecco una illustrazione dell'input e dell'output dei filtri SVG:

L'input dei filtri SVG viene solitamente specificato nell'attributo dell'elemento filtro in. Ecco un esempio:

　<feGaussianBlur stdDeviation="3" in="SourceGraphic" />

Se si desidera utilizzare l'output di un filtro SVG come input per un altro filtro, è necessario aggiungere l'attributo al elemento filtro result. Ecco un esempio:

<feGaussianBlur stdDeviation="3" in="SourceGraphic" result="blur"/>

Ora, un altro filtro SVG può utilizzare l'output di questo filtro inserendo il valore blur nel suo attributo in. Nei casi precedenti, il valore blur è stato specificato nell'attributo result del filtro.

Dimensioni del filtro

La dimensione di un filtro è impostata utilizzando le proprietà x, y, width e height.

Le proprietà x e y vengono interpretate rispetto all'x e y della forma utilizzata come input. Poiché l'output di alcuni filtri è solitamente più grande dell'input (ad esempio, aggiungere sfocatura intorno alla forma), è solitamente necessario utilizzare numeri negativi per x e y per evitare di tagliare via l'effetto aggiunto dal filtro.

Anche per le proprietà width e height è molto semplice. Allo stesso modo, a volte potrebbe essere necessario specificare una larghezza e altezza che siano maggiori della forma di input, per evitare la truncatura dell'effetto aggiunto dal filtro.

filtri combinati

Puoi usareCombinazione di filtri. Ecco un esempio:

<svg width="500" height="100">
<defs>
　　　　<filter id="blurFilter2" y="-10" height="40" x="-10" width="150">
　　　　　　　　<feOffset in="SourceAlpha" dx="3" dy="3" result="offset2" />
　　　　　　　　<feGaussianBlur in="offset2" stdDeviation="3" result="blur2" />
　　　　　　　　<feMerge>
　　　　　　　　　　　　<feMergeNode in="blur2" />
　　　　　　　　　　　　<feMergeNode in="SourceGraphic" />
　　　　　　　　</feMerge>
　　　　</filter>
</defs>
<ellipse cx="55" cy="60" rx="25" ry="15"
　　　　　　　　　style="stroke: none; fill: #0000ff; filter: url(#blurFilter2);" />　
</svg>

Questo esempio crea un filtro SVG che contiene due elementi di filtro: <feOffset> e <feGaussianBlur>. L'effetto del filtro di offset (feOffset) agisce sul canale Alpha della forma applicata. La sfocatura Gaussiana (feGaussianBlur) agisce sull'output del filtro di offset.

L'elemento <feMerge> combina l'output del filtro sfocante con l'immagine originale. Gli input vengono combinati nell'ordine in cui appaiono nell'elemento <feMerge>. Di conseguenza, gli input posteriori vengono visualizzati sopra quelli precedenti. Il risultato è che la forma dell'immagine sembra avere un'ombra. Effetto dell'immagine dopo l'esecuzione:

il filtro di sfocatura Gaussiana

Il filtro di sfocatura Gaussiana può sfocare le forme SVG. Il filtro di sfocatura Gaussiana è composto dal'elemento <feGaussianBlur> rappresenta. Ecco un esempio:

<svg width="500" height="250">
<defs>
　　　　<filter id="blurFilter4" x="-20" y="-20" width="200" height="200">
　　　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
　　　　</filter>
</defs>
<rect x="20" y="20" width="90" height="90"
　　　　　　style="stroke: none; fill: #00ff00; filter: url(#blurFilter4);" />
</svg>

In questo esempio, è definito un <filter> con un <feGaussianblur> interno. Poi, è definito un rettangolo verde che si riferisce a questo filtro tramite l'attributo CSS filter. Ecco l'immagine generata:

dimensione del sfocatura

l'elemento <feGaussianBlur> ha l'attributo stdDeviation che determina quanto deve essere sfocato il forma al quale viene applicato il filtro. Più grande è il numero, più sfocato è il forma. Ecco tre esempi con diversi valori di stdDeumation:

<svg width="500" height="250">
<defs>
　　　　<filter id="blurFilter5" x="-20" y="-20" width="200" height="200">
　　　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
　　　　</filter>
　　　　<filter id="blurFilter6" x="-20" y="-20" width="200" height="200">
　　　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="6" />
　　　　</filter>
　　　　<filter id="blurFilter7" x="-20" y="-20" width="200" height="200">
　　　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="12" />
　　　　</filter>
</defs>
<rect x="20" y="24" width="90" height="90"
　　　　　　style="stroke: none; fill: #00ff00; filter: url(#blurFilter5);" />
<rect x="150" y="24" width="90" height="90"
　　　　　　style="stroke: none; fill: #00ff00; filter: url(#blurFilter6);" />
<rect x="300" y="24" width="90" height="90"
　　　　　　style="stroke: none; fill: #00ff00; filter: url(#blurFilter7);" />
</svg>

Effetto dell'immagine dopo l'esecuzione:

Notare come il rettangolo diventa sempre più sfocato, con valori sempre più alti dell'attributo stdDeumation del filtro applicato.

Sfocatura del canale Alpha

L'esempio precedente utilizza SourceGraphic come input, il che significa che il colore RGB della forma viene utilizzato come input del filtro. Puoi invece utilizzare il canale Alpha della forma come input, impostando il valore SourceAlpha dell'attributo in dell'elemento <feGaussianBlur>. Ecco un esempio:

<svg width="500" height="250">
<defs>
　　　　<filter id="blurFilter8" x="-20" y="-20" width="200" height="200">
　　　　　　　　<feGaussianBlur in="SourceAlpha" stdDeviation="10" />
　　　　</filter>
</defs>
<rect x="20" y="20" width="90" height="90"
　　　　　　style="stroke: none; fill: #00ff00; filter: url(#blurFilter8);" />　
</svg>

Effetto dell'immagine dopo l'esecuzione:

Notare che anche se il rettangolo è definito con riempimento verde, l'uscita del filtro è nera e bianca. Questo accade quando viene applicato un filtro di sfocatura Gaussiana all'canale Alpha invece che al canale grafico (RGB).

Filtro di offset

Il filtro di offset accetta un'entrata e lo sposta nell'uscita. Questo significa che può muovere la forma in su, in giù, a sinistra o a destra. Pertanto, funziona in modo simile a una trasformazione, ma viene eseguito all'interno del filtro. Ecco un esempio:

<svg width="500" height="250">
<defs>
　　　　<filter id="offsetFilter1" x="-20" y="-20" width="200" height="200">
　　　　　　　　<feOffset in="SourceGraphic" dx="80" dy="20" />
　　　　</filter>
</defs>
<rect x="20" y="20" width="90" height="90"
　　　　　　style="stroke: #000000; fill: none; filter: url(#offsetFilter1);" />
<rect x="20" y="20" width="90" height="90"
　　　　　　style="stroke: #000000; fill: none; " />
</svg>

Questo esempio definisce due rettangoli nello stesso punto. Uno dei rettangoli applica il filtro di offset, che lo sposta verso il basso e verso destra.

Effetto dell'immagine dopo l'esecuzione.

Il filtro di offset sembra avere anche altri effetti sulla forma (un tipo di sfocatura), ma non sono sicuro di perché. Finora non sono riuscito a trovare alcuna spiegazione su perché ciò accade.

Filtro matrice di colore

Il filtro matrice di colore può essere utilizzato per applicare la trasformazione matrice al colore delle forme. Ecco un esempio:

<svg width="500" height="250">
<defs>
　　　　<filter id="colorMatrixFilter1" x="-20" y="-20" width="200" height="200">
　　　　　　　　<feColorMatrix in="SourceGraphic" type="matrix"
　　　　　　　　　　　　　　　　values="0 0 0 1 0
　　　　　　　　　　　　　　　　　　　　　　　　0 0 0 1 0
　　　　　　　　　　　　　　　　　　　　　　　　0 0 0 1 0
　　　　　　　　　　　　　　　　　　　　　　　　0 0 0 1 0
　　　　　　　　　　　　　　　　"/>
　　　　</filter>
</defs>
<rect x="20" y="20" width="90" height="90"
　　　　　　style="stroke: none; fill: #0000ff; filter: url(#colorMatrixFilter1);" />
</svg>

I valori della matrice sono forniti nell'attributo values dell'elemento <feColorMatrix>. Devono esserci in totale 4 x 5 = 20 valori. Questi valori vengono applicati al colore dell'forma originale, come indicato di seguito:

　0 0 0 red 0
　0 0 0 green 0
　0 0 0 blue 0
　0 0 0 1 0

Effetto dell'immagine dopo l'esecuzione:

Attenzione: i risultati dei filtri matrice di colore in Chrome e Firefox sono un po' strani. Il rettangolo sopra è specificato con il colore di riempimento, ma una volta completato il lavoro del filtro matrice di colore, rimane solo il contorno.

Filtri di mescolazione

I filtri di mescolazione possono mescolare l'input proveniente da più filtri in uno solo. Ecco un esempio:

<svg width="500" height="250">
　　<defs>
　　　　<filter id="blurFilter3" y="-10" height="40" x="-10" width="150">
　　　　　　<feOffset in="SourceAlpha" dx="3" dy="3" result="offset3"/>
　　　　　　<feGaussianBlur in="offset3" stdDeviation="3" result="blur3"/>
　　　　　　<feBlend in="SourceGraphic" in2="blur3" x="-10" width="160"/>
　　　　</filter>
　　</defs>
　　<ellipse cx="55" cy="60" rx="25" ry="15"
　　　　　　　　　style="stroke: none; fill: #0000ff;
　　　　　　　　　　　　　　　　filter: url(#blurFilter3);" />
</svg>

Questo esempio dichiara un filtro che utilizza tre effetti di filtro. I primi due sono l'offset collegato e l'effetto sfocatura Gaussiana. Il terzo èRichiede due input (in e in2) e li mescola in un unico effetto.

L'effetto prodotto è molto simile a quello ottenuto con il filtro combinato menzionato in precedenza.