SVG
filtri
Ricerca…
Sintassi
- Dichiarazione filtro:
<filter id="filter-id"> ... elenco di primitive figlio ...</filter> - Applica il filtro tramite l'attributo SVG:
<elementname filter="url(#filter-id)" ... /> - Applica il filtro tramite la proprietà CSS: (-prefix- ) filter: url ("# filter-id");
Parametri
| Attributi elemento | Dettagli |
|---|---|
| Regione del filtro | L'elemento filtro può facoltativamente definire la posizione, le dimensioni, la risoluzione e le unità per l'uscita di un effetto filtro. La posizione e le dimensioni di un filtro possono essere specificate utilizzando i seguenti parametri: x, y, larghezza, altezza. I valori predefiniti non sono intuitivi e sono: x: -10% y: -10% larghezza: 120% altezza: 120% |
| Filtro di risoluzione | L'attributo filterRes è un attributo facoltativo in SVG 1.1 che può essere utilizzato per specificare la risoluzione con cui viene elaborato il filtro. Questo attributo aveva un supporto non uniforme e ora è deprecato nei browser correnti. |
| Unità di filtro | Per impostazione predefinita, le unità e il sistema di coordinate per la regione degli effetti del filtro (x, y, larghezza, altezza) di un elemento del filtro sono impostati rispetto al riquadro di delimitazione dell'elemento che fa riferimento al filtro. Nei termini SVG, questo è chiamato "objectBoundingBox". Quando scriviamo x = "50%" significa "imposta la posizione x iniziale della regione del filtro sul lato sinistro del riquadro di delimitazione dell'elemento di riferimento + 50% della larghezza dell'elemento". Ma puoi anche specificare le unità e le coordinate esplicitamente impostando la proprietà filterUnits. Le due alternative sono "objectBoundingBox" (l'impostazione predefinita che abbiamo appena descritto) o "userSpaceOnUse". userSpaceOnUse imposta le unità filtro e il sistema di coordinate sull'area di disegno dell'elemento di riferimento, o in termini SVG, "userSpaceOnUse". |
| Unità primitive | Oltre al sistema di unità per il filtro stesso, è possibile specificare anche il sistema di unità che verrà utilizzato dalle primitive del filtro figlio del filtro tramite l'attributo primitiveUnits. Ancora una volta, la scelta è tra userSpaceOnUse e objectBoundingBox. Questi influenzano le coordinate 0,0 e i valori unitari per i primitivi del filtro nello stesso modo di filterUnits. |
| Spazio colore | Lo spazio colore predefinito per i filtri SVG è linearRGB. L'attributo opzionale color-interpolation-filters può essere impostato su sRGB per cambiare lo spazio colore allo spazio sRGB più convenzionale. |
Osservazioni
La maggior parte degli attributi del filtro sono animabili tramite l'elemento <animate> , sebbene sia necessario utilizzare la libreria "fakeSMIL" su IE per ottenere gli stessi risultati. L'animazione SMIL (l'elemento <animate> ) sarà deprecata a favore della nuova specifica Web Animations, che ha un supporto molto limitato a partire dalla metà del 2016.
Elementi secondari dell'elemento Filtro - primitive del filtro - hanno due attributi facoltativi che specificano lo spazio colore all'interno del quale vengono eseguiti i calcoli di interpolazione del colore: interpolazione del colore e filtri di interpolazione del colore. L'impostazione predefinita per la prima è sRGB e l'impostazione predefinita per quest'ultima è linearRGB. Manipolazioni che invertono lo spazio cromatico (tramite feColorMatrix o feComponentTransfer) possono risultare in risultati non intuitivi, per quelli utilizzati nello spazio colore CSS sRGB. Ad esempio, l'inversione del colore di un'immagine in scala di grigi in linearRGB provocherà uno spostamento pronunciato verso i toni più bianchi. Questo può essere corretto impostando il valore della primitiva su sRGB. Questi attributi possono essere impostati sulle singole primitive del filtro o ereditati dall'elemento filtro stesso.
Se non viene specificato nessun altro input, ma ne è richiesto uno, la prima primitiva del filtro all'interno di un filtro assumerà come input la versione rasterizzata (bitmap) dell'elemento di riferimento. Le successive primitive di filtro che prevedono un input prenderanno come input il risultato della primitiva del filtro immediatamente precedente.
Nei filtri complessi, può diventare difficile tenere traccia degli input e degli output (e debuggarli) se sono lasciati impliciti; ed è buona pratica dichiarare esplicitamente input e output per ogni primitiva.
I primitivi del filtro SVG possono essere suddivisi colloquialmente in input, trasformazioni, effetti di illuminazione e combinazioni.
ingressi:
feFlood: genera un campo di colore
feTurbulence: genera un'ampia varietà di effetti di rumore
feImage: genera un'immagine da un riferimento di immagine esterna, URI di dati o riferimento a un oggetto (i riferimenti a oggetti non sono supportati in Firefox a partire da metà dicembre '12)
trasformazioni:
feColorMatrix: trasforma i valori di input di un pixel RBGA in valori di output
feComponentTransfer: regola la curva del colore di un singolo canale di colore
feConvolveMatrix: sostituisce ogni pixel con un nuovo pixel calcolato dai valori dei pixel in un'area relativa al pixel corrente)
feGaussianBlur: sostituisce il pixel corrente con una media ponderata di pixel in un'area attorno al pixel
feDisplacementMap: sposta ciascun pixel dalla sua posizione corrente in base ai valori R, G o B da un altro grafico di input.
feMorfologia: sostituisce ogni pixel con un nuovo pixel calcolato dal valore massimo o minimo di tutti i pixel in un'area rettangolare attorno a quel pixel.
feOffset: sposta l'input dalla sua posizione corrente
Effetti luminosi:
feSpecularLighting: fornisce un effetto di illuminazione "brillante" 2D o pseudo-3D
feDiffuseLighting: fornisce un effetto di illuminazione "opaca" 2D o pseudo-3D
feDistantLight: fornisce una fonte di luce distante per l'illuminazione speculare o diffusa
feSpotLight: fornisce una sorgente di luce a sezione conica per illuminazione speculare o diffusa
fePointLight: fornisce una sorgente di luce puntiforme per illuminazione speculare o diffusa
combinazioni:
feMerge: crea un semplice over-composito da più input (inclusi i precedenti input dei filtri)
feBlend: miscela più input usando le regole di mixaggio
feComposite: combina più input utilizzando le regole di combinazione impostate, tenendo conto dei valori alfa.
feTile: tessere immesse per creare un motivo ripetuto
Altre note
Sebbene SVG sia una tecnologia di grafica vettoriale, è importante sottolineare che i filtri SVG eseguono operazioni a livello di pixel su tutti gli input (incluse le forme SVG) e producono output rasterizzati (bitmap) con un livello di risoluzione specificato. L'applicazione di una trasformazione in scala 10x (ad esempio) su una curva SVG semplice che è stata filtrata a una normale risoluzione dello schermo produrrà bordi pixelati poiché l'anti-aliasing dell'elemento grafico originale è stato convertito in pixel dal filtro e ingrandito. (Non è chiaro se questo è conforme alle specifiche o solo una limitazione delle attuali implementazioni)
Ricorda che SVG è XML quando scrivi filtri, quindi tutti i tag devono essere chiusi e molte proprietà e attributi devono essere specificati esplicitamente o il filtro non verrà eseguito.
Un elemento filtro non viene mai visualizzato direttamente. Viene fatto riferimento solo utilizzando la proprietà filter sull'elemento a cui viene applicato il filtro. Si noti che la proprietà display non si applica all'elemento filtro e gli elementi non vengono visualizzati direttamente anche se la proprietà display è impostata su un valore diverso da "none". Al contrario, gli elementi filtro sono disponibili per il riferimento anche quando la proprietà di visualizzazione sul filtro o su uno qualsiasi dei suoi antenati è impostata su "nessuno".
I filtri SVG possono essere referenziati tramite un filtro CSS, anche se a metà 2016, solo un sottoinsieme di primitive è supportato tramite questo meccanismo e questo meccanismo non è supportato nei browser Microsoft.
Blur Filters: feGaussian Blur (basic)
<svg width="900px" height="400px" viewBox="0 0 900 400">
<defs>
<filter id="basicGaussian">
<feGaussianBlur stdDeviation="5"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#basicGaussian)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Immagine sorgente di Daderot su Wikimedia Commons)
Filtri sfocatura: feGaussianBlur (set di sfocatura dell'asse x e dell'asse y separatamente)
<svg width="900px" height="400px" viewBox="0 0 900 400">
<defs>
<filter id="xAxisGaussian">
<feGaussianBlur stdDeviation="5 0"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#xAxisGaussian)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Immagine sorgente di Daderot su Wikimedia Commons)
Filtri di sfocatura: feGaussianBlur con bordi rigidi e 100% di opacità
<svg width="900px" height="400px" viewBox="900 400">
<defs>
<filter id="GaussianHardEdge" x="0%" y="0%" width="100%" height="100%">
<feGaussianBlur stdDeviation="5"/>
<feComponentTransfer>
<feFuncA type="table" tableValues="1 1"/>
</feComponentTransfer>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#GaussianHardEdge)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Immagine sorgente di Daderot su Wikimedia Commons)
Filtri sfocatura: Box Blur
<svg width="900px" height="400px" viewBox="900 400">
<defs>
<filter id="GaussianHardEdge" >
<feConvolveMatrix order="3" kernelMatrix=" 1 1 1
1 1 1
1 1 1"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#GaussianHardEdge)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Immagine sorgente di Daderot su Wikimedia Commons)
Filtri sfocatura: Bokeh Blur (3 strati, ritagliato)
<svg width="900px" height="400px" viewBox="0 0 900 400">
<defs>
<filter id="BokehBlur" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="2" result="blurSource"/>
<feColorMatrix type="luminanceToAlpha"/>
<feComponentTransfer result="brightness-mask" >
<feFuncA type="discrete" tableValues="0 0 0 1 1"/>
</feComponentTransfer>
<!--bokeh Layer 1 -->
<feTurbulence type="fractalNoise" seed="1" baseFrequency=".67" numOctaves="3"/>
<feColorMatrix type="luminanceToAlpha"/>
<feComponentTransfer>
<feFuncA type="discrete" tableValues="0 0 0 1"/>
</feComponentTransfer>
<feComposite operator="in" in="brightness-mask"/>
<feComposite operator="in" in="blurSource"/>
<feMorphology operator="dilate" radius="5"/>
<feGaussianBlur stdDeviation="8"/>
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0
0 0 0 9 0" />
<feComponentTransfer result="bokeh1">
<feFuncA type="linear" slope=".5" />
</feComponentTransfer>
<!--bokeh Layer 2 -->
<feTurbulence type="fractalNoise" seed="49" baseFrequency=".67" numOctaves="3"/>
<feColorMatrix type="luminanceToAlpha"/>
<feComponentTransfer>
<feFuncA type="discrete" tableValues="0 0 0 1"/>
</feComponentTransfer>
<feComposite operator="in" in="brightness-mask"/>
<feComposite operator="in" in="blurSource"/>
<feMorphology operator="dilate" radius="10"/>
<feGaussianBlur stdDeviation="12"/>
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0
0 0 0 15 0" />
<feComponentTransfer result="bokeh2">
<feFuncA type="linear" slope=".3" />
</feComponentTransfer>
<!--bokeh Layer 3 -->
<feTurbulence type="fractalNoise" seed="44" baseFrequency=".67" numOctaves="3"/>
<feColorMatrix type="luminanceToAlpha"/>
<feComponentTransfer>
<feFuncA type="discrete" tableValues="0 0 0 1"/>
</feComponentTransfer>
<feComposite operator="in" in="brightness-mask"/>
<feComposite operator="in" in="blurSource"/>
<feMorphology operator="dilate" radius="10"/>
<feGaussianBlur stdDeviation="18"/>
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0
0 0 0 15 0" />
<feComponentTransfer result="bokeh3">
<feFuncA type="linear" slope=".2" />
</feComponentTransfer>
<!--Merge -->
<feBlend mode="multiply" in="bokeh3" in2="bokeh2"/>
<feBlend mode="lighten" in2="bokeh1"/>
<feMorphology operator="erode" radius="0" result="bokeh"/>
<feGaussianBlur stdDeviation="9" in="SourceGraphic"/>
<feComposite operator="over" in="bokeh"/>
<feComposite operator="in" in2="SourceGraphic"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#BokehBlur)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Immagine sorgente di Daderot su Wikimedia Commons)
Filtri ombra: Basic Dropshadow
<svg width="800px" height="600px">
<defs>
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
<feOffset dx="5" dy="5" result="offsetblur"/>
<feFlood flood-color="red"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<text filter="url(#drop-shadow)" x="30" y="100" font-size="80">SVG Filters</text>
</svg>
Filtri ombra: bagliore interno
<svg width="800px" height="600px">
<defs>
<filter id="inner-glow">
<feFlood flood-color="red"/>
<feComposite in2="SourceAlpha" operator="out"/>
<feGaussianBlur stdDeviation="2" result="blur"/>
<feComposite operator="atop" in2="SourceGraphic"/>
</filter>
</defs>
<text filter="url(#inner-glow)" x="30" y="100" font-size="80" font-family="Sans-Serif" font-weight="bold">SVG Filters</text>
</svg>
Filtri ombra: ombretto complesso (sagomato, rumoroso, a forma di)
<svg width="800px" height="600px">
<defs>
<filter id="complex-shadow" color-interpolation-filters="sRGB" x="-50%" y="-50%" height="200%" width="200%">
<!-- Take source alpha, offset it by angle/distance and blur it by size -->
<feOffset id="offset" in="SourceAlpha" dx="11" dy="6" result="SA-offset"/>
<feGaussianBlur id="blur" in="SA-offset" stdDeviation="4" result="SA-o-blur"/>
<!-- Apply a contour by using a color curve transform on the alpha and clipping the result to the input -->
<feComponentTransfer in="SA-o-blur" result="SA-o-b-contIN">
<feFuncA id="contour" type="table" tableValues="0 1 .3 .1 0.05 .1 .3 1 "/>
</feComponentTransfer>
<feComposite operator="in" in="SA-o-blur" in2="SA-o-b-contIN" result="SA-o-b-cont"/>
<!-- Adjust the spread by multiplying alpha by a constant factor --> <feComponentTransfer in="SA-o-b-cont" result="SA-o-b-c-sprd">
<feFuncA id="spread-ctrl" type="linear" slope="2.8"/>
</feComponentTransfer>
<!-- Adjust color and opacity by adding fixed offsets and an opacity multiplier -->
<feColorMatrix id="recolor" in="SA-o-b-c-sprd" type="matrix" values="0 0 0 0 0.945 0 0 0 0 0.137 0 0 0 0 0.137 0 0 0 0.49 0" result="SA-o-b-c-s-recolor"/>
<!-- Generate a grainy noise input with baseFrequency between approx .5 to 2.0. And add the noise with k1 and k2 multipliers that sum to 1 -->
<feTurbulence result="fNoise" type="fractalNoise" numOctaves="6" baseFrequency="1.98"/>
<feColorMatrix in="fNoise" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 7 -3" result="clipNoise"/>
<feComposite id="noisemix" operator="arithmetic" in="SA-o-b-c-s-recolor" in2="clipNoise" k1="0.67" k2="0.33" result="SA-o-b-c-s-r-mix"/>
<!-- Merge the shadow with the original -->
<feMerge>
<feMergeNode in="SA-o-b-c-s-r-mix"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<text filter="url(#complex-shadow)" x="30" y="100" font-size="80" font-family="Sans-Serif" font-weight="bold">SVG Filters</text>
</svg>
Filtri per la manipolazione del colore: livelli di grigio di base
<svg width="800px" height="600px">
<defs>
<filter id="greyscale">
<feColorMatrix type="matrix"
values="0.2126 0.7152 0.0722 0 0
0.2126 0.7152 0.0722 0 0
0.2126 0.7152 0.0722 0 0
0 0 0 1 0"/>
</filter>
</defs>
<image
xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#greyscale)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Immagine sorgente di Daderot su Wikimedia Commons)
Filtri di manipolazione del colore: scala di grigi (solo canale verde)
<svg width="800px" height="600px">
<defs>
<filter id="greyscale">
<feColorMatrix type="matrix"
values="0 1 0 0 0
0 1 0 0 0
0 1 0 0 0
0 0 0 1 0"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#greyscale)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Immagine sorgente di Daderot su Wikimedia Commons)
Filtri per la manipolazione del colore: monotono
<svg width="800px" height="600px">
<defs>
<filter id="greyscale">
<feColorMatrix type="matrix"
values=".2 .2 .2 0 0
.6 .6 .6 0 0
.2 .2 .2 0 0
0 0 0 1 0"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#greyscale)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Immagine sorgente di Daderot su Wikimedia Commons)
Filtri sfocatura: Sfocatura messa a fuoco (gaussiana)
<svg width="800px" height="600px">
<defs>
<filter id="focus-blur" >
<feDiffuseLighting result = "diffOut" diffuseConstant = "1" lighting-color="white">
<feSpotLight id="spotlight" x = "500" y = "100" z = "150" pointsAtX = "500" pointsAtY = "100" pointsAtZ = "0" specularExponent ="12" limitingConeAngle="70"/>
</feDiffuseLighting>
<feColorMatrix in="diffOut" result="alphaMap" type="luminanceToAlpha"/>
<feComponentTransfer in="alphaMap" result="invertlight">
<feFuncA type="table" tableValues="1 0 0"/>
</feComponentTransfer>
<feGaussianBlur in="invertlight" result="featherspot" stdDeviation="5"/>
<feComposite operator="xor" result="infocus" in2="SourceGraphic" in="featherspot"/>
<feGaussianBlur in="SourceGraphic" result="outfocus" stdDeviation="2"/>
<feComposite operator="over" in="infocus" in2="outfocus"/>
<feComposite operator="in" in2="SourceGraphic"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#focus-blur)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Immagine sorgente di Daderot su Wikimedia Commons)
Filtri per la manipolazione del colore: Posterizzazione
<svg width="800px" height="600px" >
<defs>
<filter id="posterize" color-interpolation-filters="sRGB">
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 0.25 0.75 1.0"/>
<feFuncG type="discrete" tableValues="0 0.25 0.75 1.0"/>
<feFuncB type="discrete" tableValues="0 0.25 0.75 1.0"/>
</feComponentTransfer>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/4/42/Andy_Warhol_1975.jpg" x="20px" y="20px" width="300px" height="600px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#posterize)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/4/42/Andy_Warhol_1975.jpg" x="340px" y="20px" width="300px" height="600px" preserveAspectRatio="xMinYMin meet"/>
</svg>
Filtri sfocatura: evidenzia sfocatura
Questo filtro seleziona solo le aree ad alta luminanza di un grafico sorgente, offusca il contenuto e compone il contenuto sfocato sopra l'originale.
<svg width="800px" height="600px">
<defs>
<filter id="highlightblur" color-interpolation-filters="sRGB">
<feColorMatrix type="luminanceToAlpha" in="SourceGraphic" result="lumMap"/>
<feComponentTransfer in="lumMap" result="highlightMask">
<feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 1"/>
</feComponentTransfer>
<feComposite operator="in" in="SourceGraphic" in2="highlightMask" result="highlights"/>
<feGaussianBlur in="highlights" stdDeviation="3" result="highBlur"/>
<feComposite operator="over" in="highBlur" in2="SourceGraphic" result="final"/>
</filter>
</defs>
<image filter="url(#highlightblur)" x="0" y="-40" width="780" height="600" preserveAspectRatio="true" xlink:href="http://i554.photobucket.com/albums/jj424/allbowerpower/Christmas%202009/ChristmasTablesetting016b.jpg"
/>
</svg>