SVG feConvolveMatrix: Edge Detection and Sharpening

SVG provides the <feConvolveMatrix> filter primitive to apply matrix convolutions to graphics and images. By recalculating the color value of each pixel based on its surrounding neighbors through a mathematical grid called a kernel, this primitive allows you to build custom effects such as directional edge detection, embossing, and sharpening entirely in code.

How <feConvolveMatrix> Works

A convolution matrix processes an image by sliding an \(N \times M\) grid (usually \(3 \times 3\)) over every pixel. The target pixel’s final color is calculated by multiplying each neighboring pixel’s value by the corresponding number in the matrix, adding the results together, dividing by a divisor, and adding a bias.

The core attributes used in <feConvolveMatrix> are: * order: Defines the dimensions of the matrix (e.g., order="3" creates a 3×3 matrix). * kernelMatrix: The list of numbers defining the weights of the neighboring pixels. * divisor: The value by which the sum of the matrix multiplication is divided. If omitted, it defaults to the sum of all kernel values (or 1 if the sum is 0). * bias: A value added to the final result, shifting the overall brightness (useful for edge detection to make lines visible against neutral backgrounds). * preserveAlpha: When set to true, the convolution only applies to color channels, preventing transparent backgrounds from turning opaque.

Sharpening Filters

Sharpening works by enhancing the difference between a pixel and its immediate neighbors, increasing local contrast along boundaries. The center value of the kernel is set to a high positive number, while the adjacent values are negative. The sum of the matrix should equal 1 (or use a divisor equal to the sum) to preserve the original image brightness.

Standard Sharpen Filter

<svg width="0" height="0">
  <filter id="sharpen">
    <feConvolveMatrix
      order="3"
      preserveAlpha="true"
      kernelMatrix="
         0 -1  0
        -1  5 -1
         0 -1  0" />
  </filter>
</svg>

Strong Sharpen Filter

To create a more aggressive sharpening effect, increase the weights of both the surrounding negative values and the central positive value:

<svg width="0" height="0">
  <filter id="super-sharpen">
    <feConvolveMatrix
      order="3"
      preserveAlpha="true"
      kernelMatrix="
        -1 -1 -1
        -1  9 -1
        -1 -1 -1" />
  </filter>
</svg>

Edge Detection Filters

Edge detection highlights areas where color or brightness changes abruptly while suppressing uniform areas. Because the sum of the kernel values typically equals 0, uniform regions evaluate to black.

Omnidirectional Edge Detection (Laplacian)

This kernel detects edges across all directions simultaneously:

<svg width="0" height="0">
  <filter id="edge-detect">
    <feConvolveMatrix
      order="3"
      preserveAlpha="true"
      kernelMatrix="
        -1 -1 -1
        -1  8 -1
        -1 -1 -1" />
  </filter>
</svg>

Edge Detection with a Brightness Bias

By adding a bias="0.5", neutral non-edge areas render as 50% gray instead of pure black, creating a sketch-like or embossed appearance:

<svg width="0" height="0">
  <filter id="edge-detect-bias">
    <feConvolveMatrix
      order="3"
      bias="0.5"
      preserveAlpha="true"
      kernelMatrix="
        -1 -1 -1
        -1  8 -1
        -1 -1 -1" />
  </filter>
</svg>

Directional Edge Detection (Sobel-style)

To detect edges only along specific orientations, balance positive and negative values along the desired axis.

Applying the Filter

You can apply these filters to SVG elements or standard HTML elements using CSS:

.sharpened-image {
  filter: url(#sharpen);
}

.edge-detected-element {
  filter: url(#edge-detect);
}