SourceGraphic vs SourceAlpha in SVG Filters

SVG filter chains rely on predefined input keywords to determine which visual data an effect should process. The two most fundamental inputs are SourceGraphic and SourceAlpha. While both reference the original element to which the filter is applied, SourceGraphic retains the full color and opacity of the element, whereas SourceAlpha strips all color information and passes only the shape and transparency as solid black. Understanding this distinction is essential for building effects like drop shadows, glows, and lighting maps in SVG.

What is SourceGraphic?

SourceGraphic represents the complete original SVG element, including all of its red, green, blue, and alpha (RGBA) channels. When used as an input (in attribute) in a filter primitive, it processes the element exactly as it is visually rendered—maintaining its fill colors, gradients, stroke properties, and opacity levels.

Common Use Cases: * Applying blurs, color matrices, or distortions directly to an artwork while maintaining its original colors. * Serving as the top layer in an <feMerge> chain to overlay the original crisp graphic on top of a generated shadow or background effect.

What is SourceAlpha?

SourceAlpha extracts only the opacity (alpha channel) of the original SVG element. It discards the RGB color channels entirely, replacing them with solid black (rgb(0,0,0)) while maintaining the original transparency boundaries.

Common Use Cases: * Drop Shadows: Blurring SourceAlpha creates a pure black shadow silhouette regardless of what colors or patterns exist in the original image. * Lighting and Bump Maps: Lighting filters like <feDiffuseLighting> and <feSpecularLighting> use the alpha channel to calculate 3D surface depth and highlights. * Bevels and Outlines: Isolating the shape mask without interference from internal color variations.

Key Differences

Feature SourceGraphic SourceAlpha
RGB Channels Original element colors Solid black (rgb(0,0,0))
Alpha Channel Original transparency Original transparency
Primary Function Visual transformation Shape and mask generation
Typical Effect Blurs, color shifts, final overlay Shadows, embossing, glows

Practical Application: The Drop Shadow Pattern

The relationship between SourceGraphic and SourceAlpha is best illustrated in a standard drop shadow filter:

  1. Step 1: An <feGaussianBlur> takes in="SourceAlpha" to blur only the silhouette of the element.
  2. Step 2: An <feOffset> shifts that blurred black silhouette down and to the right.
  3. Step 3: An <feMerge> stacks the original SourceGraphic on top of the shifted shadow.

Using SourceGraphic in Step 1 instead would cause multicolor elements to produce a blurry, multi-colored halo rather than a uniform shadow. Using SourceAlpha ensures that the shadow remains a neutral, solid silhouette regardless of the source element’s fill and stroke styling.