Target SVG Filters to a Specific Subregion

SVG filters can be restricted to process only a specific portion of a graphic by defining subregions on individual filter primitives rather than applying the effect globally. By configuring the x, y, width, and height attributes on specific filter primitive elements and setting the appropriate coordinate system via primitiveUnits, you can isolate visual effects like blurs, color shifts, or displacements to an exact bounding area while leaving the rest of the element untouched.

Understanding the Filter Primitive Subregion

Every SVG filter primitive (such as <feGaussianBlur>, <feOffset>, or <feColorMatrix>) creates an independent subregion defined by the attributes x, y, width, and height.

By default, if these attributes are omitted, the primitive adopts the dimensions of the parent <filter> element (which defaults to -10% to 120% of the target element’s bounding box). Setting explicit geometric attributes on a primitive limits the processing area strictly to that rectangular bounding box.

Setting the Coordinate System with primitiveUnits

The coordinates of a primitive subregion depend on the primitiveUnits attribute declared on the parent <filter> element:

• userSpaceOnUse: Coordinates correspond to the current user coordinate system of the SVG canvas (typically in absolute pixels).
• objectBoundingBox (default): Coordinates are expressed as fractions or percentages relative to the bounding box of the element referencing the filter (where 0 is 0% and 1 is 100%).

Implementation Example

To apply a blur effect exclusively to the right half of a graphic, set primitiveUnits="objectBoundingBox" on the <filter> and specify the subregion on the <feGaussianBlur> primitive:

<svg width="400" height="200" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="partial-blur" primitiveUnits="objectBoundingBox">
      <!-- Target only the right half (x=50%, y=0%, width=50%, height=100%) -->
      <feGaussianBlur 
        in="SourceGraphic" 
        stdDeviation="5" 
        x="50%" 
        y="0%" 
        width="50%" 
        height="100%" 
        result="blurred-part" />
      
      <!-- Merge the unaffected original with the targeted blurred subregion -->
      <feMerge>
        <feMergeNode in="SourceGraphic" />
        <feMergeNode in="blurred-part" />
      </feMerge>
    </filter>
  </defs>

  <rect width="400" height="200" fill="#3498db" filter="url(#partial-blur)" />
</svg>

Layering and Merging Subregions

When a primitive processes a defined subregion, the pixels outside that subregion are treated as transparent black (rgba(0,0,0,0)) within that specific result buffer.

To preserve the underlying image: 1. Store the processed subregion using the result attribute. 2. Use <feMerge> or <feComposite> to overlay the targeted effect back onto the original SourceGraphic.

Non-Rectangular Subregions

Filter primitive subregions are strictly rectangular. If you need to target an irregular or complex shape: 1. Define a clip path or mask containing the custom geometry. 2. Use <feImage> or <feMask> within the filter pipeline to mask the processed result buffer before merging it back over the source element.