SVG
Des filtres
Recherche…
Syntaxe
- Déclaration de filtre:
<filter id="filter-id"> ... liste des primitives enfants ...</filter> - Appliquer le filtre via l'attribut SVG:
<elementname filter="url(#filter-id)" ... /> - Appliquer le filtre via la propriété CSS: (-prefix- ) filter: url ("# filter-id");
Paramètres
| Attributs d'élément | Détails |
|---|---|
| Région de filtre | L'élément filtrant peut éventuellement définir la position, les dimensions, la résolution et les unités pour la sortie d'un effet de filtre. La position et les dimensions d'un filtre peuvent être spécifiées à l'aide des paramètres suivants: x, y, width, height. Les valeurs par défaut ne sont pas intuitives et sont: x: -10% y: -10% largeur: 120% hauteur: 120% |
| Résolution du filtre | L'attribut filterRes est un attribut facultatif de SVG 1.1 qui peut être utilisé pour spécifier la résolution à laquelle le filtre est traité. Cet attribut avait un support inégal et est maintenant obsolète dans les navigateurs actuels. |
| Unités de filtrage | Par défaut, les unités et le système de coordonnées de la région des effets de filtre (x, y, largeur, hauteur) d'un élément de filtre sont définis par rapport au cadre de sélection de l'élément faisant référence au filtre. En termes SVG, cela s'appelle "objectBoundingBox". Lorsque nous écrivons x = "50%", cela signifie "définir la position x de départ de la zone de filtrage à gauche du cadre de sélection de l’élément de référence + 50% de la largeur de l’élément". Mais vous pouvez également spécifier les unités et les coordonnées explicitement en définissant la propriété filterUnits. Les deux alternatives sont "objectBoundingBox" (la valeur par défaut que nous venons de décrire) ou "userSpaceOnUse". userSpaceOnUse définit les unités de filtrage et le système de coordonnées sur le canevas de l'élément de référence ou, en termes de SVG, sur "userSpaceOnUse". |
| Unités primitives | En plus du système d'unités pour le filtre lui-même, vous pouvez également spécifier le système d'unités que les primitives de filtres enfants du filtre utiliseront via l'attribut primitiveUnits. Encore une fois, le choix est entre userSpaceOnUse et objectBoundingBox. Celles-ci affectent les coordonnées 0,0 et les valeurs unitaires des primitives de filtrage de la même manière que pour les unités de filtrage. |
| Espace de couleur | L'espace de couleur par défaut pour les filtres SVG est linearRGB. L'attribut optionnel color-interpolation-filters peut être défini sur sRGB pour changer l'espace colorimétrique en espace sRGB plus conventionnel. |
Remarques
La plupart des attributs de filtre peuvent être animés via l'élément <animate> , même si vous devez utiliser la bibliothèque "fakeSMIL" sur IE pour obtenir les mêmes résultats. L'animation SMIL (l'élément <animate> ) sera déconseillée au profit de la nouvelle spécification Web Animations - qui a un support très limité à la mi-2016.
Les éléments enfants de l'élément Filter - primitives de filtre - ont deux attributs facultatifs qui spécifient l'espace colorimétrique dans lequel les calculs d'interpolation de couleur sont effectués: interpolation de couleur et filtres d'interpolation de couleur. La valeur par défaut pour le premier est sRGB, et la valeur par défaut pour le dernier est linearRGB. Les manipulations qui inversent l'espace colorimétrique (via feColorMatrix ou feComponentTransfer) peuvent donner des résultats non intuitifs - pour ceux utilisés dans l'espace colorimétrique CSS sRGB. Par exemple, une inversion de couleur d'une image en niveaux de gris dans linearRGB entraînera un décalage prononcé vers des tons plus blancs. Cela peut être corrigé en définissant la valeur de la primitive sur sRGB. Ces attributs peuvent être définis sur les primitives de filtre individuelles ou hérités de l'élément de filtre lui-même.
Si aucune autre entrée n'est spécifiée, mais une seule est requise, la première primitive de filtre dans un filtre prendra comme entrée une version pixellisée (bitmap) de l'élément de référence. Les primitives de filtrage suivantes qui attendent une entrée prennent en entrée le résultat de la primitive de filtre immédiatement précédente.
Dans les filtres complexes, il peut être difficile de suivre (et de déboguer) les entrées et les sorties si elles sont implicites. et il est recommandé de déclarer explicitement les entrées et les sorties pour chaque primitive.
Les primitives de filtre SVG peuvent être familièrement divisées en entrées, transformations, effets d'éclairage et combinaisons.
Contributions:
feFlood: génère un champ de couleur
feTurbulence: génère une grande variété d'effets sonores
feImage: génère une image à partir d'une référence d'image externe, d'un URI de données ou d'une référence d'objet (les références d'objet ne sont pas prises en charge dans Firefox à la mi-décembre '12)
Transformations:
feColorMatrix: transforme les valeurs d'entrée d'un pixel RBGA en valeurs de sortie
feComponentTransfer: ajuste la courbe de couleur d'un canal de couleur individuel
feConvolveMatrix: remplace chaque pixel par un nouveau pixel calculé à partir des valeurs de pixels dans une zone par rapport au pixel en cours)
feGaussianBlur: remplace le pixel actuel par une moyenne pondérée de pixels dans une zone autour du pixel
feDisplacementMap: déplace chaque pixel de sa position actuelle en fonction des valeurs R, G ou B d'un autre graphique d'entrée.
feMorphology: remplace chaque pixel par un nouveau pixel calculé à partir de la valeur maximale ou minimale de tous les pixels dans une zone rectangulaire autour de ce pixel.
feOffset: déplace l’entrée de sa position actuelle
Effets d'éclairage:
feSpecularLighting: fournit un effet d'éclairage "brillant" 2D ou pseudo-3D
feDiffuseLighting: fournit un effet d'éclairage 2D ou pseudo-3D "mat"
feDistantLight: fournit une source de lumière distante pour l'éclairage spéculaire ou diffus
feSpotLight: fournit une source de lumière conique pour l'éclairage spéculaire ou diffus
fePointLight: fournit une source lumineuse ponctuelle pour un éclairage spéculaire ou diffus
Combinaisons:
feMerge: crée un simple sur-composite à partir de plusieurs entrées (y compris les entrées de filtre précédentes)
feBlend: mélange plusieurs entrées en utilisant les règles de mixage
feComposite: combine plusieurs entrées à l'aide de règles de combinaison définies, en tenant compte des valeurs alpha.
feTile: entrée de tuiles pour créer un motif répétitif
Autres notes
Bien que SVG soit une technologie graphique vectorielle, il est important de souligner que les filtres SVG effectuent des opérations au niveau des pixels sur toutes les entrées (y compris les formes SVG) et produisent des sorties tramées (bitmap) à un niveau de résolution spécifié. L'application d'une transformation à l'échelle 10x (par exemple) sur une courbe SVG simple qui a été filtrée à une résolution d'écran normale produira des bords pixellisés car l'anticrénelage du graphique d'origine a été converti en pixels par le filtre et mis à l'échelle. (On ne sait pas si cela est conforme aux spécifications ou juste une limitation des implémentations actuelles)
Rappelez-vous que SVG est XML lorsque vous écrivez des filtres, donc toutes les balises doivent être fermées et de nombreuses propriétés et attributs doivent être spécifiés explicitement ou le filtre ne s'exécutera pas.
Un élément de filtre n'est jamais rendu directement. Il est uniquement référencé à l'aide de la propriété filter sur l'élément auquel le filtre est appliqué. Notez que la propriété display ne s'applique pas à l'élément filter et que les éléments ne sont pas directement rendus même si la propriété display est définie sur une valeur autre que "none". Inversement, les éléments de filtre sont disponibles pour référencer même lorsque la propriété d'affichage de l'élément de filtre ou de l'un de ses ancêtres est définie sur "none".
Les filtres SVG peuvent être référencés via un filtre CSS, bien qu'à la mi-2016, seul un sous-ensemble de primitives soit pris en charge via ce mécanisme, et ce mécanisme n'est pas pris en charge dans les navigateurs Microsoft.
Filtres de flou: Flou gaussien (basique)
<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>
( Image source par Daderot chez Wikimedia Commons)
Filtres de flou: feGaussianBlur (flou de l'axe x et de l'axe y défini séparément)
<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>
( Image source par Daderot chez Wikimedia Commons)
Filtres de flou: feGaussianBlur avec des bords durs et une opacité de 100%
<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>
( Image source par Daderot chez Wikimedia Commons)
Filtres de flou: Flou de boîte
<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>
( Image source par Daderot chez Wikimedia Commons)
Filtres de flou: Bokeh Blur (3 couches, découpées)
<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>
( Image source par Daderot chez Wikimedia Commons)
Filtres Shadow: 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>
Filtres Shadow: Inner Glow
<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>
Filtres Shadow: Complex Dropshadow (Contour, Noisy, Shaped)
<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>
Filtres de manipulation des couleurs: niveaux de gris de 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>
( Image source par Daderot chez Wikimedia Commons)
Filtres de manipulation des couleurs: échelle de gris (canal vert uniquement)
<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>
( Image source par Daderot chez Wikimedia Commons)
Filtres de manipulation de couleur: Monotone
<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>
( Image source par Daderot chez Wikimedia Commons)
Filtres de flou: flou de focus (gaussien)
<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>
( Image source par Daderot chez Wikimedia Commons)
Filtres de manipulation des couleurs: Postérisation
<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>
Filtres de flou: surligner le flou
Ce filtre sélectionne uniquement les zones de luminance élevée d'un graphique source, rend le contenu flou et compose le contenu flou au-dessus de l'original.
<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>