SVG Clipping, Masking & Blend Modes Guide

The Difference: Clipping vs Masking

While both clipping and masking restrict visual rendering to a designated area, their underlying mathematical and rendering pipelines are completely distinct:

• <clipPath> (Binary 1-Bit): Acts as a vector cookie-cutter. Any pixel inside the clip geometry is 100% visible; any pixel outside is 100% discarded. No anti-aliasing feathering or transparency gradient calculations are executed, making it extremely fast.
• <mask> (8-Bit Luminance & Alpha): Creates an intermediate pixel buffer where white (#FFFFFF) is 100% opaque, black (#000000) is 100% transparent, and grayscale values produce partial alpha transparency.

1. The Non-Destructive Notification Badge Cutout Pattern

A classic UI design problem: you have a bell icon and want to place an unread notification dot in the top-right corner. If the dot overlaps the bell stroke, placing a circle with a background-colored border breaks whenever the icon is placed over gradients, dark mode surfaces, or image cards.

The solution is an inverted SVG mask that punches an actual mathematical hole through the bell icon:

<svg viewBox="0 0 24 24" width="24" height="24">
  <defs>
    <mask id="badge-hole">
      <!-- Everything white stays visible -->
      <rect width="100%" height="100%" fill="white" />
      <!-- Black circle punches a transparent hole where the badge sits -->
      <circle cx="18" cy="6" r="5" fill="black" />
    </mask>
  </defs>

  <!-- Bell Icon masked with the hole -->
  <path 
    d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0" 
    fill="none" 
    stroke="currentColor" 
    stroke-width="2" 
    mask="url(#badge-hole)" 
  />

  <!-- Red Notification Dot sits in the center of the punched cutout -->
  <circle cx="18" cy="6" r="3" fill="#EF4444" />
</svg>

Because the cutout is physically transparent, the icon looks pristine on any surface, dark mode background, or blurred glass card.

2. Responsive Clipping with clipPathUnits="objectBoundingBox"

By default, <clipPath> uses absolute user space pixels. If you want a clipping path to automatically scale across differently sized icons or hero banners, use clipPathUnits="objectBoundingBox":

<svg width="0" height="0">
  <defs>
    <clipPath id="squircle" clipPathUnits="objectBoundingBox">
      <!-- Coordinates normalized from 0.0 to 1.0 -->
      <path d="M 0,0.5 C 0,0 0,0 0.5,0 C 1,0 1,0 1,0.5 C 1,1 1,1 0.5,1 C 0,1 0,1 0,0.5 Z" />
    </clipPath>
  </defs>
</svg>

<!-- Applied via CSS to any HTML or SVG element of any size -->
<style>
  .app-icon {
    clip-path: url(#squircle);
  }
</style>

3. CSS Blend Modes Inside SVG Vectors

CSS blend modes allow vectors to create sophisticated lighting and duotone effects without raster Photoshop exports. Applying mix-blend-mode inside an SVG canvas composites shapes directly on the GPU:

<svg viewBox="0 0 24 24" width="48" height="48">
  <!-- Base Vector Shape -->
  <circle cx="12" cy="12" r="10" fill="#3B82F6" />

  <!-- Highlight with Screen Blend Mode -->
  <path 
    d="M 6,6 Q 12,2 18,6" 
    stroke="#FFFFFF" 
    stroke-width="3" 
    style="mix-blend-mode: overlay; opacity: 0.8;" 
  />

  <!-- Shadow with Multiply Blend Mode -->
  <ellipse 
    cx="12" cy="18" rx="7" ry="2" 
    fill="#000000" 
    style="mix-blend-mode: multiply; opacity: 0.4;" 
  />
</svg>

Performance & Hardware Acceleration

Frequently Asked Questions