Open In App

SVG <feConvolveMatrix> Element

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
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