Convolute features
Once you know that SVG filters work with primitives, a succession of inputs and outputs, you can almost appreciate the logic of some functions just by going through the attributes.
Consider feFlood, or again feGaussianBlur. Even feMorphology for that matter.
<feMorphology operator="erode" radius="0.02" />Past the elaborate label and the fancy keyword in the operator attribute, the function is straightforward in terms of result, of what the filter returns — an image eroded around the edges.
Unfortunately, not all primitives share the same propensity for clarity. And there is perhaps no better example than feConvolveMatrix.
<feConvolveMatrix bias="0.01" preserveAlpha="true" kernelMatrix="0 0 0 1 0 -1 0 0 0" />The primitive operates on pixel values, but to understand how, it’s helpful to build the element in increments, sampling the attributes one at a time.
kernelMatrix points to a string of 9 values; positive and negative numbers which add up to a 3 by 3 matrix. But if this structure sounds overwhelming, you’ll be glad to know that the dimensions are not set in stone, and you can change the order with a fitting attribute.
<feConvolveMatrix order="1" kernelMatrix="1" />Set order to 1, rather daftly, and kernelMatrix asks for a single number. What the filter returns, then, depends on the only input.
Apply the filter to a square with a value of 0 the shape disappears, as if you were to turn the display off. Set the value to 1 and the shape is preserved.
Why is that? You can find the answer in another attribute, bias.
<feConvolveMatrix bias="0.25" order="1" kernelMatrix="1" />The attribute refers once again to a number, a quantity added after the matrix.
With a positive bias the square gains in intensity and becomes brighter, as if mixed with a touch of white. With a negative number the change is opposite. The shape loses intensity and is painted with a darker shade.
Based on the input color, feConvolveMatrix takes the values of the matrix and bias to update the different channels. Red, blue and green are shown in greater or smaller amounts, explaining the brighter and darker version.
You may wonder about the second version, however. The square looks darker, but also pallid. The reason? feConvolveMatrix changes the value of the color channels, and the alpha channel as well. With a negative offset the image becomes slightly translucent, and lets the dark background through.
And the concept explains the issue with the very first painting. The shape is set to 0 in color and opacity, and logically disappears from view.
It is quite likely that you want to update the colors alone, and retain the input opacity. To achieve this, set the preserveAlpha attribute to true.
The examples are close to trivial, but enough to prime you for more complex structures. Even the original snippet and a matrix of 9 values.
Think of a pixel P as surrounded by 8 neighbors, offset vertically, horizontally and diagonally. A, B, C and further in the alphabet until you reach H.
The values in the matrix refer to the weights for these pixels.
Mathematically, pixels and weights are included in a long formula. The values are weighed and measured to find a value for the new square.
The operation is technical, but it is possible to understand the effect relying on intuition and a few visuals.
Unfortunately, the single square has outlived its purpose. Since the shape has only one color, there is now little reason to update the graphic by itself. We can still make use of the polygon though, together with the rectangle making up the dark background.
Apply the filter to both shapes and consider once again the snippet, repeating the matrix in neat columns and rows.
<feConvolveMatrix
bias="0.25"
preserveAlpha="true"
kernelMatrix="
0 0 0
1 0 -1
0 0 0
"
/>The neighbors above and below are set to 0. In light of this, the color of the corresponding pixels has no influence on the center value. But the same is true for the center value itself, once again assigned to a value of 0. What does this mean? The pixel won’t be transparent, as we had the forethought of keeping preserveAlpha. And it won’t be not completely black either, given the positive bias. It will appear tinted in gray. If it weren’t for the values of the remaining neighbors, on the left and on the right.
To understand the influence of non-zero values focus on the specific row.
1 0 -1The left and right neighbors are set with opposite numbers. If the two pixels have the same value, the colors cancel each other out and there won’t be any change in the middle. Still gray.
If the two disagree, on the other end, the square in between does change. How?
The first pixel is added while the second is removed. You would think this would mean the pixel will be influenced by the value on the left over that on the right, but the result is exactly the opposite. But I promise you, this is the last confusing step of the sequence.
As detailed in the specification, the kernel matrix is rotated 180 degrees “to match convolution theory”. This means you need to look at the array of weights upside down.
In practical terms, and for our very small use case, the pixel gains in intensity. Influenced by the bright neighbor, the square becomes even brighter, per the effect of the bias.
In the opposite instance the effect is reversed. Where the pixel sits between a light and dark square, it becomes even darker.
The result is that the square is embossed, as if raised from the surface and lit from one side. A subtle, but notable change.
feConvolveMatrix is far from approachable, but you can already see how the element opens the door to interesting patterns. Hopefully, you can also appreciate the contributions of the attributes, and the result of a feature less cryptic in nature.