SVG <feConvolveMatrix> Element (original) (raw)

Last Updated : 31 Mar, 2022

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.

The SVG filter primitive changes pixels in the input image with neighboring pixels to produce a resulting image.

Syntax:

Attributes:

• in - It stores input for the given primitive.
• order - It tests the size of the matrix to be used by the filter element. By default, it is 3 X 3.
• kernelMatrix - It defines the list of numbers that form the kernel matrix.
• divisor - It defines the sum of values of the kernel matrix. By default, it is set to 1.
• bias - It sets the range of the filter. By default, it is set to 0.
• targetX - It shifts the convolution matrix horizontally. (Range - 0 <= targetX < orderX).
• targetY - It shifts the convolution matrix vertically. (Range - 0 <= targetY < orderY).
• kernelUnitLength - It tells the intended distance between successive columns and rows in the kernelMatrix. The intended distance is represented in current filter units. The default value is 1.
• preserveAlpha - It value is either true or false. It indicates whether the convolution will only apply to the alpha and color channels. The default value is false.

Example 1:

html `

    <rect x="40" y="40" width="100" 
        height="100" 
        filter: url(#convolve) style=
            "stroke: #000000;
            fill: darkgreen;" />

    <g fill="#FFFFFF" stroke="black" 
        font-size="10" font-family="Verdana">

        <text x="50" y="90" 
            filter="url(#convolve)">
            GeeksForGeeks
        </text>
    </g>
</svg>

`

Output:

Example 2:

html `

    <rect x="1" y="1" width="198" 
        height="118" 
        style="stroke: #000000; 
                fill: none;
                filter: url(#convolve);" />

    <circle cx="100" cy="60" r="55" 
        stroke="black" stroke-width="3" 
        fill="Lightgreen" 
        filter: url(#convolve) />

    <g fill="#FFFFFF" stroke="black" 
        font-size="10" font-family="Verdana">
        <text x="60" y="62" filter="url(#convolve)">
            GeeksForGeeks</text>
    </g>
</svg>

`

Output: