Remove semi-transparent edges get when applying the gaussian blur with 'feComponentTransfer'

[jasomdotnet]

Add 'feComponentTransfer' into svg filter in order to remove semi-transparent edges:

  <filter id="blur" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
    <feGaussianBlur stdDeviation="20 20" edgeMode="duplicate" />
    <feComponentTransfer>
      <feFuncA type="discrete" tableValues="1 1" />
    </feComponentTransfer>
  </filter>

Now you fix it by this:

/* Add this CSS to remove transparent border around the image */
left: -10%;
width: 120%;

See this article.

[msurguy]

Thanks @jasomdotnet ! I will check out the article as time permits, but if possible, could you make a PR for these issues? I would really appreciate if you can get something together

[jasomdotnet]

"but if possible, could you make a PR for these issues?" I didn't get this. What is PR? PublicRelations? PRopaganda? :-)

[jasomdotnet]

Code before:

1. Add color-interpolation-filters="sRGB" for removal of color cascade Strange 'color cascade' when applying blur to image #7
2. Double the blur value for better blur Add double blur value into 'feGaussianBlur' #6
3. Add feComponentTransfer for removal of semi-transparent borders Remove semi-transparent edges get when applying the gaussian blur with 'feComponentTransfer' #5

Code after:

Generally, I recommend you to make background-blur able to generate same svg code as in article mentioned above, because @emilbjorklund, the author, seems to be more sophisticated user then me or you :-) when it comes to svg images.

@emilbjorklund uses also edgeMode="duplicate" or filterUnits="userSpaceOnUse" which I don't know what it does but it can backfire for some users with older browsers (IE8, IE9, IE7...) if omitted.

This is the complete svg code from an article:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1500" height="823" viewBox="0 0 1500 823"> <filter id="blur" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <feGaussianBlur stdDeviation="20 20" edgeMode="duplicate" /> <feComponentTransfer> <feFuncA type="discrete" tableValues="1 1" /> </feComponentTransfer> </filter> <image filter="url(#blur)" xlink:href="https://www.example.com/image.jpg" x="0" y="0" height="100%" width="100%"/> </svg>

[Jagathishrex]

how can i implement background, motion and zoom blur in svg without css