SVG
Filtros
Buscar..
Sintaxis
- Declaración de filtro:
<filter id="filter-id"> ... lista de primitivos secundarios ...</filter> - Aplicar filtro a través del atributo SVG:
<elementname filter="url(#filter-id)" ... /> - Aplicar filtro a través de la propiedad CSS: (-prefix- ) filter: url ("# filter-id");
Parámetros
| Atributos del elemento | Detalles |
|---|---|
| Filtrar región | El elemento de filtro puede definir opcionalmente la posición, las dimensiones, la resolución y las unidades para la salida de un efecto de filtro. La posición y las dimensiones de un filtro se pueden especificar utilizando los siguientes parámetros: x, y, ancho, altura. Los valores predeterminados no son intuitivos y son: x: -10% y: -10% ancho: 120% altura: 120% |
| Resolución del filtro | El atributo filterRes es un atributo opcional en SVG 1.1 que se puede usar para especificar la resolución a la que se procesa el filtro. Este atributo tenía un soporte desigual y ahora está en desuso en los navegadores actuales. |
| Unidades de filtro | De forma predeterminada, las unidades y el sistema de coordenadas para la región de efectos de filtro (x, y, ancho, alto) de un elemento de filtro se establecen en relación con el cuadro delimitador del elemento que hace referencia al filtro. En términos de SVG, esto se llama "objectBoundingBox". Cuando escribimos x = "50%" significa "establecer la posición inicial x de la región del filtro en el lado izquierdo del cuadro delimitador del elemento de referencia + 50% del ancho del elemento". Pero también puede especificar las unidades y las coordenadas explícitamente estableciendo la propiedad filterUnits. Las dos alternativas son "objectBoundingBox" (el valor predeterminado que acabamos de describir) o "userSpaceOnUse". userSpaceOnUse establece las unidades de filtro y el sistema de coordenadas en el lienzo del elemento de referencia, o en términos de SVG, el "userSpaceOnUse". |
| Unidades primitivas | Además del sistema de unidad para el filtro en sí, también puede especificar el sistema de unidad que las primitivas de filtro hijo del filtro usarán a través del atributo primitiveUnits. Una vez más, la elección es entre userSpaceOnUse y objectBoundingBox. Estos afectan las coordenadas 0,0 y los valores unitarios de las primitivas de filtro de la misma manera que para las unidades de filtro. |
| Espacio de color | El espacio de color predeterminado para los filtros SVG es linearRGB. El atributo opcional color-interpolation-filters se puede establecer en sRGB para cambiar el espacio de color al espacio sRGB más convencional. |
Observaciones
La mayoría de los atributos de filtro se pueden animar a través del elemento <animate> , aunque debe usar la biblioteca "fakeSMIL" en IE para lograr los mismos resultados. La animación SMIL (el elemento <animate> ) quedará en desuso en favor de la nueva especificación de animaciones web, que tiene un soporte muy limitado a partir de mediados de 2016.
Los elementos secundarios del elemento Filtro (primitivas de filtro) tienen dos atributos opcionales que especifican el espacio de color dentro del cual se realizan los cálculos de interpolación de color: interpolación de color y filtros de interpolación de color. El valor predeterminado para el primero es sRGB, y el valor predeterminado para el último es linearRGB. Las manipulaciones que invierten el espacio de color (a través de feColorMatrix o feComponentTransfer) pueden generar resultados no intuitivos, para aquellos que se utilizan para el espacio de color sRGB de CSS. Por ejemplo, una inversión de color de una imagen en escala de grises en RGB lineal resultará en un cambio pronunciado hacia tonos más blancos. Esto se puede corregir estableciendo el valor de la primitiva en sRGB. Estos atributos pueden establecerse en las primitivas de filtro individuales o heredarse del propio elemento de filtro.
Si no se especifica ninguna otra entrada, pero se requiere una, la primera primitiva de filtro dentro de un filtro tomará una versión rasterizada (en mapa de bits) del elemento referente como su entrada. Las primitivas de filtro posteriores que esperan una entrada tomarán el resultado de la primitiva de filtro inmediatamente anterior como entrada.
En filtros complejos, puede ser difícil mantener un seguimiento (y depurar) las entradas y salidas si se dejan implícitas; y es una buena práctica declarar explícitamente entradas y salidas para cada primitiva.
Los primitivos de filtro SVG se pueden dividir coloquialmente en entradas, transformaciones, efectos de iluminación y combinaciones.
Entradas:
feFlood: genera un campo de color
FeTurbulence: genera una gran variedad de efectos de ruido.
feImage: genera una imagen a partir de una referencia de imagen externa, URI de datos o referencia de objeto (las referencias de objeto no se admiten en Firefox a partir de mediados de diciembre de 2012)
Transformaciones
feColorMatrix: transforma los valores de entrada de un píxel RBGA en valores de salida
feComponentTransfer: ajusta la curva de color de un canal de color individual
feConvolveMatrix: reemplaza cada píxel con un nuevo píxel calculado a partir de los valores de píxel en un área relativa al píxel actual)
feGaussianBlur: reemplaza el píxel actual por un promedio ponderado de píxeles en un área alrededor del píxel
feDisplacementMap: mueve cada píxel desde su posición actual en función de los valores R, G o B de otro gráfico de entrada.
feMorphology: reemplaza cada píxel con un nuevo píxel calculado a partir del valor máximo o mínimo de todos los píxeles en un área rectangular alrededor de ese píxel.
feOffset: mueve la entrada desde su posición actual
Efectos de iluminación:
feSpecularLighting: proporciona un efecto de iluminación 2D o pseudo-3D "brillante"
feDiffuseLighting: proporciona un efecto de iluminación 2D o pseudo-3D "mate"
feDistantLight: proporciona una fuente de luz distante para iluminación especular o difusa
feSpotLight: proporciona una fuente de luz de sección cónica para iluminación especular o difusa
fePointLight: proporciona una fuente de luz puntual para iluminación especular o difusa
Combinaciones
feMerge: crea un simple sobre compuesto a partir de múltiples entradas (incluidas las entradas de filtro anteriores)
feBlend: combina entradas múltiples usando reglas de mezcla
feComposite: combina entradas múltiples utilizando reglas de combinación de conjuntos, teniendo en cuenta los valores alfa.
feTile: entrada de azulejos para crear un patrón de repetición
Otras notas
Aunque SVG es una tecnología de gráficos vectoriales, es importante enfatizar que los filtros SVG realizan operaciones a nivel de píxeles en todas las entradas (incluidas las formas SVG) y producen salidas rasterizadas (en mapa de bits) a un nivel específico de resolución. La aplicación de una transformación a escala 10x (por ejemplo) en una curva SVG simple que se ha filtrado a la resolución de pantalla normal producirá bordes pixelados, ya que el filtro ha convertido a píxeles el efecto de suavizado del gráfico original y se ha ampliado. (No está claro si esto cumple con las especificaciones o solo es una limitación de las implementaciones actuales)
Recuerde que SVG es XML cuando escribe filtros, por lo que todas las etiquetas deben cerrarse y muchas propiedades y atributos deben especificarse explícitamente o el filtro no se ejecutará.
Un elemento de filtro nunca se renderiza directamente. Solo se hace referencia al uso de la propiedad de filtro en el elemento al que se aplica el filtro. Tenga en cuenta que la propiedad de visualización no se aplica al elemento de filtro y los elementos no se representan directamente, incluso si la propiedad de visualización se establece en un valor distinto de "ninguno". A la inversa, los elementos de filtro están disponibles para referencia incluso cuando la propiedad de visualización en el elemento de filtro o cualquiera de sus antepasados se establece en "ninguno".
Se puede hacer referencia a los filtros SVG a través de un filtro CSS, aunque a mediados de 2016, solo un subconjunto de primitivas se admiten a través de este mecanismo, y este mecanismo no es compatible con los navegadores de Microsoft.
Filtros de desenfoque: desenfoque feGaussiano (básico)
<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>
( Imagen fuente de Daderot en Wikimedia Commons)
Filtros de desenfoque: feGaussianBlur (el desenfoque del eje xy el eje y se establecen por separado)
<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>
( Imagen fuente de Daderot en Wikimedia Commons)
Filtros de desenfoque: FeGaussianBlur con bordes duros y 100% de opacidad
<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>
( Imagen fuente de Daderot en Wikimedia Commons)
Filtros de desenfoque: Desenfoque de caja
<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>
( Imagen fuente de Daderot en Wikimedia Commons)
Filtros de desenfoque: Desenfoque de bokeh (3 capas, recortado)
<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>
( Imagen fuente de Daderot en Wikimedia Commons)
Filtros de sombras: Sombra básica
<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>
Filtros de sombras: Resplandor interior
<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>
Filtros de sombras: Complex Dropshadow (contorneado, ruidoso, en forma)
<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>
Filtros de manipulación de color: Escala de grises básica
<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>
( Imagen fuente de Daderot en Wikimedia Commons)
Filtros de manipulación de color: Escala de grises (solo canal 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>
( Imagen fuente de Daderot en Wikimedia Commons)
Filtros de manipulación de color: monótono
<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>
( Imagen fuente de Daderot en Wikimedia Commons)
Filtros de desenfoque: desenfoque de enfoque (gaussiano)
<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>
( Imagen fuente de Daderot en Wikimedia Commons)
Filtros De Manipulación De Color: Posterización
<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>
Filtros de desenfoque: resaltar desenfoque
Este filtro selecciona solo las áreas de alta luminancia de un gráfico de origen, difumina los contenidos y compone el contenido borroso sobre el 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>