feConvolveMatrix
The edgeMode SVG attribute 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.
Value
Default
duplicate
none
<svg height="100%" width="100%" 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/HappyFace.svg" width="100%"/>
</svg>
wrap
<svg height="100%" width="100%" 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/HappyFace.svg" width="100%"/>
</svg>
Internal
External
feGaussianBlur
The edgeMode SVG attribute 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.
Value
Default
duplicate
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="myid1">
<stop/>
<stop offset="1" stop-color="red"/>
</linearGradient>
<filter id="myid2">
<feGaussianBlur edgeMode="duplicate" stdDeviation="10"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="url(#myid1)" filter="url(#myid2)" r="50vh"/>
</svg>
none
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="myid1">
<stop/>
<stop offset="1" stop-color="red"/>
</linearGradient>
<filter id="myid2">
<feGaussianBlur edgeMode="none" stdDeviation="10"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="url(#myid1)" filter="url(#myid2)" r="50vh"/>
</svg>
wrap
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="myid1">
<stop/>
<stop offset="1" stop-color="red"/>
</linearGradient>
<filter id="myid2">
<feGaussianBlur edgeMode="wrap" stdDeviation="10"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="url(#myid1)" filter="url(#myid2)" r="50vh"/>
</svg>
Internal
External