Search code examples
javascripthtmlimagesvgsvg-filters

does the filter in image tag under svg reduce the quality of the image?


I have an <image /> under <svg> componenent. If I add the filter property to the image which increases/reduces contrast and brightness, does this effect the quality (pixel density) of the image?

example:

<svg ...>
<image filter='url(..)' src='..' ... />
<svg/>

Solution

  • does this effect the quality (pixel density) of the image?

    It's not exactly clear what you mean here. The answer is generally yes. But let me elaborate firther.

    Filters can only work on bitmaps. So when you apply a filter to any SVG element - whether it's a bitmap or vector shape - it will be converted to a bitmap at the current display resolution. Then the filter will be applied to that.

    So if you mean "pixel density of the original bitmap", then the pixel density will typically be changed. Unless of course it is being displayed at 1:1 with the display pixels (for example, a 100x100 bitmap being displayed at 100x100 on screen). If the original image is being scaled down to be displayed in your SVG, then it has lost resolution anyway. Whether or not it then has a filter applied. The filter will use that lower resolution, but it normally won't reduce it further. Unless of course the filter is designed to do that.