Understanding the SVG feBlend Filter Element

The <feBlend> element in Scalable Vector Graphics (SVG) is a filter primitive designed to combine two input images or graphical layers pixel-by-pixel using standard blend modes. It allows developers and designers to create complex visual effects—such as drop shadows, lighting effects, and composite textures—directly within vector markup. This article explains how <feBlend> works, its key attributes, and its role in SVG filter pipelines.

Primary Function of feBlend

The fundamental purpose of <feBlend> is to take two distinct visual inputs and merge them into a single output based on a predefined mathematical formula. It mimics layer blending modes commonly found in photo-editing software like Adobe Photoshop, making it essential for non-destructive, browser-rendered graphic manipulation.

Key Attributes of feBlend

The behavior of the <feBlend> element is controlled through three primary attributes:

• in: Defines the first input (foreground layer). This can be the original graphic (SourceGraphic), its alpha channel (SourceAlpha), or the named result (result) of a previous filter primitive.
• in2: Defines the second input (background layer) over which the first input is blended. It accepts the same values as the in attribute.
• mode: Specifies the blending algorithm applied to combine the two layers.

Supported Blend Modes

The mode attribute dictates how pixel color and alpha values from the two inputs interact. The standard SVG 1.1 modes include:

• normal: Places the in graphic directly over the in2 graphic based on opacity.
• multiply: Multiplies the color values of both inputs, resulting in a darker composite.
• screen: Inverts, multiplies, and inverts the colors again, resulting in a lighter composite.
• darken: Selects the darker pixel value between both inputs.
• lighten: Selects the lighter pixel value between both inputs.

Modern SVG implementations supporting Filter Effects Module Level 1 also support advanced CSS blend modes, including overlay, color-dodge, color-burn, hard-light, soft-light, difference, and exclusion.

Role in SVG Filter Pipelines

Within an SVG <filter> element, primitives are processed sequentially or in parallel. <feBlend> acts as a convergence point where multiple processing branches are combined.

For example, when creating a custom drop shadow: 1. The original graphic’s alpha channel (SourceAlpha) is offset using <feOffset>. 2. The offset layer is blurred using <feGaussianBlur>. 3. <feBlend> merges the original artwork (SourceGraphic) on top of the blurred shadow layer.

By combining layers programmatically, <feBlend> eliminates the need for rasterized composite images, keeping graphics scalable, lightweight, and fully interactive in web environments.