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

Ultima revisión 01/11/2012

SVG Filters: Uso de feBlend (Fusionar)

Realiza pixel a pixel una combinación de dos imágenes de entrada. Los modos de fusión son: Normal, Multiplicar (multiply), Pantalla (screen), oscurecer (darken) y aclarar (lighten).

Los atributos in e in2 representan la primera y segunda imagen de entrada para realizar la operación de fusión. Tanto in como in2 contendrán uno de sus valores estándar o podrán tener otra fuente o imagen de entrada definida por el usuario.

BackgroundImage representa una instantánea de la imagen del tapiz bajo la declaración del filtro en el momento en que filter fue invocado.

Modo: 

<?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="feBlend">
            <feImage x = "0" y = "0" width = "100%" height = "100%" result = "raster1" xlink:href = "../../img/svg-filters/butterfly_th.jpg"/>
            <feBlend id="feBlend_def" mode="normal" in2="raster1" in="SourceGraphic"/>
        </filter>
    </defs>
    <image x = "0" y = "0" width = "100%" height = "100%" xlink:href = "../../img/svg-filters/paisajes3d.jpg" filter="url(#feBlend)" />
</svg>

Para todos los modos de fusión, el resultado de la opacidad se calcula mediante la siguiente fórmula:

qr = 1 - (1 - q) * (1 - qb)

Las siguientes definiciones son las que se aplican para las fórmulas de composición a continuación presentadas:

cr = Color resultante (RGB) - premultiplicado
qa = Valor de la opacidad de un píxel dado por la imagen A.
qb = Valor de la opacidad de un píxel dado para la imagen B.
ca = Color (RGB) en un píxel dado por la imagen A - premultiplicado.
cb = Color (RGB) en un píxel dado para la imagen B - premultiplicado

ModeDefinición
Permite que el elemento referenciado por in2 sólo sea visible si el elemento referenciado por in contiene transparencia.
El color resultante se calcula a través de la fórmula: cr = (1 - q) * cb + ca.
Resta los valores de brillo de las dos imágenes en cada píxel.
El color resultante se calcula a través de la fórmula: cr = (1-qa)*cb + (1-qb)*ca + ca*cb
Suma los valores de brillo de las dos imágenes en cada píxel.
El color resultante se calcula a través de la fórmula: cr = cb + ca - ca * cb
Extrae o toma el valor más oscuro de las dos imágenes en cada píxel.
El color resultante se calcula a través de la fórmula: cr = Min ((1 - qa) * cb + ca, (1 - qb) * ca + cb)
Extrae o toma el valor más brillante de las dos imágenes en cada píxel.
El color resultante se calcula a través de la fórmula: cr = Max ((1 - qa) * cb + ca, (1 - qb) * ca + cb)

El modo normal es equivalente al over en la primitiva filtro feComposite, coincide con el método de mezcla utilizada por feMerge y coincide con la técnica alfa compositing simple que se usa en SVG para toda la composición exterior de efectos de filtro.

Sobre el autor

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.