The feConvolveMatrix element for SVG specifies a matrix convolution filter effect.
A convolution combines pixels in the input image with neighboring pixels to produce a resulting image. A wide variety of imaging operations can be achieved through convolutions, including blurring, edge detection, sharpening, embossing and beveling.
colorX,Y = (
sum i=0 to [orderY-1] {
sum j=0 to [orderX-1] {
sourceX-targetX+j,Y-targetY+i * kernelMatrixorderX-j-1,orderY-i-1
} } ) / divisor + bias * alphaX,Y
Specifies addition to each component after applying the kernelMatrix to the input image and after applying the divisor.
Specifies division from the number yielded after applying the kernelMatrix to the input image.
(sum of all values in kernelMatrix or 1 if sum is 0) Specifies how to extend the input image as necessary with color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image.
Specifies the input for the filter primitive.
If no value is provided and this is the first filter primitive, then this filter primitive will use SourceGraphic as its input. If no value is provided and this is a subsequent filter primitive, then this filter primitive will use the result from the previous filter primitive as its input.
SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference> SourceGraphic (or result) Specifies the list of numbers that make up the kernel matrix for the convolution.
Values are separated by space characters and/or a comma. The number of entries in the list must equal orderX times orderY.
Specifies the number of cells in each dimension for kernelMatrix.
The values provided must be integers greater than zero. The first number, orderX, indicates the number of columns in the matrix. The second number, orderY, indicates the number of rows in the matrix. If orderY is not provided, it defaults to orderX.
Specifies whether the convolution will preserve the alpha channel.
Specifies the positioning in X of the convolution matrix relative to a given target pixel in the input image.
The leftmost column of the matrix is column number zero. The value must be such that: 0 <= targetX < orderX.
Specifies the positioning in Y of the convolution matrix relative to a given target pixel in the input image.
The topmost row of the matrix is row number zero. The value must be such that: 0 <= targetY < orderY.
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feConvolveMatrix divisor="8" kernelMatrix="1 0 0 0 0 0 0 0 -1"/>
</filter>
</defs>
<image filter="url(#myid)" height="100%" href="/assets/svg/Happy100.svg" width="100%"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feConvolveMatrix edgeMode="duplicate" kernelMatrix="1 0 0 0 0 0 0 0 -1"/>
</filter>
</defs>
<image filter="url(#myid)" height="100%" href="/assets/svg/Happy100.svg" width="100%"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feConvolveMatrix edgeMode="none" kernelMatrix="1 0 0 0 0 0 0 0 -1"/>
</filter>
</defs>
<image filter="url(#myid)" height="100%" href="/assets/svg/Happy100.svg" width="100%"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feConvolveMatrix edgeMode="wrap" kernelMatrix="1 0 0 0 0 0 0 0 -1"/>
</filter>
</defs>
<image filter="url(#myid)" height="100%" href="/assets/svg/Happy100.svg" width="100%"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feConvolveMatrix in="BackgroundAlpha" kernelMatrix="1 0 0 0 0 0 0 0 -1"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feConvolveMatrix in="BackgroundImage" kernelMatrix="1 0 0 0 0 0 0 0 -1"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feConvolveMatrix in="FillPaint" kernelMatrix="1 0 0 0 0 0 0 0 -1"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feConvolveMatrix result="myresult" kernelMatrix="-1 0 0 0 0 0 0 0 1"/>
<feConvolveMatrix in="myresult" kernelMatrix="1 0 0 0 0 0 0 0 -1"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feConvolveMatrix in="SourceAlpha" kernelMatrix="1 0 0 0 0 0 0 0 -1"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feConvolveMatrix in="SourceGraphic" kernelMatrix="1 0 0 0 0 0 0 0 -1"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feConvolveMatrix in="StrokePaint" kernelMatrix="1 0 0 0 0 0 0 0 -1"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feConvolveMatrix kernelMatrix="1 0 0 0 0 0 0 0 -1"/>
</filter>
</defs>
<image filter="url(#myid)" height="100%" href="/assets/svg/Happy100.svg" width="100%"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feConvolveMatrix kernelMatrix="1 0 -1" order="1 3"/>
</filter>
</defs>
<image filter="url(#myid)" height="100%" href="/assets/svg/Happy100.svg" width="100%"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feConvolveMatrix kernelMatrix="1 0 0 0 0 0 0 0 -1" preserveAlpha="false"/>
</filter>
</defs>
<image filter="url(#myid)" height="100%" href="/assets/svg/Happy100.svg" width="100%"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feConvolveMatrix kernelMatrix="1 0 0 0 0 0 0 0 -1" preserveAlpha="true"/>
</filter>
</defs>
<image filter="url(#myid)" height="100%" href="/assets/svg/Happy100.svg" width="100%"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feConvolveMatrix kernelMatrix="1 0 0 0 0 0 0 0 -1" order="9 1" targetX="8"/>
</filter>
</defs>
<image filter="url(#myid)" height="100%" href="/assets/svg/Happy100.svg" width="100%"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feConvolveMatrix kernelMatrix="1 0 0 0 0 0 0 0 -1" order="1 9" targetY="8"/>
</filter>
</defs>
<image filter="url(#myid)" height="100%" href="/assets/svg/Happy100.svg" width="100%"/>
</svg>