Logo de islavisual
Isotipo de islavisual IslaVisual
imagen de sección

Ultima revisión 05/11/2012

SVG Filters: Uso de feMerge (Combinaciones)

El filtro feMerge permite la combinación de filtros de forma concurrente, en vez de secuencialmente.

En lugar de que cada primitiva de filtro se aplique a la salida de la primitiva de filtro que le precede, feMerge nos proporciona una forma para almacenar temporalmente la salida de cada filtro, para así, colocarlas en el tapiz en orden de abajo hacia arriba. Es evidente que las capas superiores deberían tener cierta transparencia (o estar incompletas) dentro del en el área afectada por el filtro, a fin de permitir que esas capas por debajo sean visibles.

Muchos efectos producen capas intermedias con el fin de crear la imagen de salida final. Como decía, este filtro nos permite unir todas ellas en una sola imagen. Esto se podría hacer mediante el uso de filtros feComposite pero, es más conveniente realizar esta operación de esta forma, y ofrecer a la aplicación algo más de flexibilidad.

El elemento feMerge puede tener uno o varios sub-elementos feMergeNode, en los que se debería especificar el atributo in.

La implementación canónica de feMerge hace renderizar el efecto íntegro en una capa RGBA, para luego provocar una capa resultante en el dispositivo de salida. En algunos casos (en particular si el dispositivo de salida es en sí un dispositivo de tono continuo), y dado que la fusión es asociativa, podría ser una aproximación suficiente para evaluar el efecto de una capa al tiempo que se renderiza cada capa individualmente desde la parte inferior hasta la parte superior en el dispositivo de salida.

Si la imagen situada más arriba es SourceGraphic y feMerge es el último filtro primitivo en filter, la aplicación o el visor renderiza las capas hasta ese momento, y posteriormente renderiza el SourceGraphic directamente sobre la parte superior.

IslaVisual!
<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="test" filterUnits="objectBoundingBox" x="0" y="0" width="1.5" height="4">
            <feOffset result="Off1" dx="5" dy="20"/>
            <feFlood style="flood-color:black;flood-opacity:0.8"/>
            <feComposite in2="Off1" operator="in" result="C1"/>

            <feOffset in="SourceGraphic" result="Off2" dx="20" dy="40"/>
            <feFlood style="flood-color:gray;flood-opacity:0.8"/>
            <feComposite in2="Off2" operator="in" result="C2"/>

            <feMerge>
                <feMergeNode in="C2"/>
                <feMergeNode in="C1"/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
    </defs>
    
    <image id="MyImage1" opacity="1.0" width='160' height='160' xlink:href='../../img/svg-filters/guitar.png' filter="url(#test)" />
    <text x="20" y="160" style="font:36px verdana bold;fill:white;filter:url(#test)">IslaVisual!</text>
</svg>

Los atributos configurables son:

AtributoDefinición
Es la imágenes de entrada. Pueden tomar los valores SourceGraphic, SourceAlpha, BackgroundImage, BackgroundAlpha, FillPaint, StrokePaint o una referencia de filtro primitiva definida por el usuario. Normalmente, este último será el más frecuente.

Sobre el autor

Imagen de Pablo Enrique Fernández Casado
Pablo Enrique Fernández Casado

CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.

Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.