Become an Image Processing Pro With SVG-1: Understanding the <feBlend> Element

Introduction

To excel in frontend graphics and visual effects, mastering the syntax and functions of various SVG filter elements is crucial. Let’s begin with the straightforward <feBlend> element.

The Function and Syntax of the <feBlend> Element

The <feBlend> element in SVG is used to apply blending modes, which control how overlapping graphics are visually combined.

In CSS, blending modes are achieved using the mix-blend-mode and background-blend-mode properties. In Canvas, they are implemented through the globalCompositeOperation property.

In SVG, blending modes are applied using the <feBlend> element.

Supported Attributes

The <feBlend> element supports three key attributes:

• in: The first input element, representing the underlying graphic or element in the blending operation.
• in2: The second input element, representing the overlay graphic or element in the blending operation.
• mode: Specifies the type of blending mode. Supported values are the same as CSS blend mode properties, such as:

mix-blend-mode: normal;          
mix-blend-mode: multiply;        
mix-blend-mode: screen;          
mix-blend-mode: overlay;         
mix-blend-mode: darken;          
mix-blend-mode: lighten;         
mix-blend-mode: color-dodge;     
mix-blend-mode: color-burn;      
mix-blend-mode: hard-light;      
mix-blend-mode: soft-light;      
mix-blend-mode: difference;      
mix-blend-mode: exclusion;       
mix-blend-mode: hue;             
mix-blend-mode: saturation;      
mix-blend-mode: color;           
mix-blend-mode: luminosity;      

Usage Example: Applying the <feBlend> Element

Let’s assume we have the following base image: a spaceship, which will serve as the background layer for our blending example.

Next, we have a foreground effect image of a meteor shower, which will be blended with the spaceship background.

The following SVG code (using two different methods) can create a screen blending effect between the two images:

<svg
  width="150"
  height="200"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="mix">
      <feImage 
        href="https://raw.githubusercontent.com/trevortylerlee/n1/main/n1.jpeg" 
        x="0%" y="0%"
        width="100%"
        height="100%"
        result="spaceship"
      />
      <feImage
        href="meteor.png"
        x="0%" y="0%"
        width="100%"
        height="100%"
        result="meteor"
      />
      <feBlend in="spaceship" in2="meteor" mode="screen" />
    </filter>
  </defs>

  <rect 
    x="0%" y="0%" width="100%" height="100%" 
    style="filter:url(#mix);"
  ></rect>
</svg>

or

<svg
  width="150"
  height="200"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="mix">
      <feImage 
        href="meteor.png" 
        width="100%"
        height="100%"
        result="meteor"
      />
      
      <feBlend in="SourceGraphic" in2="meteor" mode="screen" />
    </filter>
  </defs>

  <image
    href="https://raw.githubusercontent.com/trevortylerlee/n1/main/n1.jpeg"
    width="100%"
    height="100%"
    style="filter: url(#mix);"
  />
</svg>

Both methods can produce the effect shown in the image below:

Some Explanation

SourceGraphic is a built-in keyword for the in and in2 attributes in SVG filters, representing the original image content to which the filter is applied. The complete set of supported values includes: SourceGraphic, SourceAlpha, BackgroundImage, BackgroundAlpha, FillPaint, and StrokePaint. These will be discussed in more detail in future explanations.