The edgeMode attribute for SVG 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.
<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> The edgeMode attribute for SVG 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.
<svg 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>
<svg 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>
<svg 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>