Open In App

SVG <feConvolveMatrix> Element

Improve
Improve
Like Article
Like
Save
Share
Report

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

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

Syntax:

<feConvolveMatrix in="" order="" kernelMatrix="" divisor="" 
    bias="" targetX="" targetY="" edgeMode="" kernelUnitLength=""
    preserveAlpha="" />

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:




<!DOCTYPE html>
<html>
  
<body>
    <svg width="100%" height="220">
        <defs>
            <filter id="convolve">
                <feConvolveMatrix kernelMatrix=
                    "1 5 -1 -1 0 4 0 0 -1" />
            </filter>
        </defs>
  
        <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>
</body>
  
</html>


Output:

Example 2:




<!DOCTYPE html>
<html>
<title>SVG Filter</title>
  
<body>
    <svg width="100%" height="220">
        <defs>
            <filter id="convolve">
                <feConvolveMatrix kernelMatrix
                ="-7 -10 -15 -10 10 -1 0 0 -1" />
            </filter>
        </defs>
  
        <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>
</body>
  
</html>


Output:



Last Updated : 31 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads