SVG feComposite in and out Operators Explained
The feComposite filter primitive in SVG uses Porter-Duff
compositing operations to combine two input images (in and
in2) at the pixel level. Among its available operations,
the in and out operators perform distinct
alpha-based masking and cutout effects by determining which parts of the
source graphic (in) remain visible based on the
transparency of the destination graphic (in2).
Understanding the Inputs
To understand feComposite, you must identify its two
inputs: * in (Source / Graphic A): The
primary graphic you want to modify or display. *
in2 (Destination / Graphic B): The
reference graphic used to mask or slice the primary graphic.
Both operators completely discard the visual contents of
in2, using only its alpha channel (opacity) to determine
the visibility of in.
The in Operator:
Alpha Masking
The in operator displays only the portions of the source
image (in) that fall inside the opaque regions of the
destination image (in2). Any part of in that
falls outside of in2 becomes completely transparent.
- Visual Effect: It acts as a shape mask or cookie cutter. The source image is clipped to fit perfectly inside the silhouette of the second image.
- Mathematical Formula:
Color = SourceColor * DestinationAlpha - Common Use Case: Applying textures, gradients, or complex patterns strictly within the boundaries of a specific shape or text layer without altering the underlying SVG geometry.
The out Operator:
Reverse Cutout
The out operator displays only the portions of the
source image (in) that fall outside the opaque
regions of the destination image (in2). Any part of
in that overlaps with in2 is erased.
- Visual Effect: It punches a hole through the source image. The destination shape acts as a geometric eraser.
- Mathematical Formula:
Color = SourceColor * (1 - DestinationAlpha) - Common Use Case: Creating cutouts, hollow text effects, dynamic stencils, or custom drop shadows that don’t render underneath transparent text.
Key Differences at a Glance
operator="in": Showsininsidein2. Overlapping areas are preserved; non-overlapping areas are removed.operator="out": Showsinoutsidein2. Overlapping areas are removed; non-overlapping areas are preserved.