1

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/>
Improve this question
4
  • If your image is a vector, then no. But if it's a normal image, then yes. Have a great day!
    – Amini
    Commented Jul 13, 2021 at 21:24
  • ah i see, so any photos stored in .png or jpeg which arent vector whill lose some quality when filter attribute is applied @AmirrezaAmini ?
    – karankumar89
    Commented Jul 13, 2021 at 22:58
  • This answer is not entirely correct. Please see my answer.
    – Paul LeBeau
    Commented Jul 14, 2021 at 4:27
  • I fear this will depend on the engine. In some browsers (at least some versions of Safari did act like this), the filter was applied once on the target, and then the resulting bitmap was scaled to match the output size. Other browsers will apply the filter as the final step (I believe this is the specced behavior), in that case no, the "quality" should not be affected. But IIRC I also saw browsers which would anyway not scale images in SVG correctly even without filters...
    – Kaiido
    Commented Jul 14, 2021 at 7:52

1 Answer 1

Reset to default
2

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.

Improve this answer
6
  • "But not any lower than it would be if no filter was applied" ... so applying the filter is not what affects the pixel density, or do you mean it will actually reduce the resolution less than if there were a filter?
    – Kaiido
    Commented Jul 14, 2021 at 7:48
  • @Kaiido Sorry... Imagine a 1000x1000 bitmap, in an SVG, is rendered at a size of 500x500 display pixels. It has lost half its resolution. That is already the case whether it has a filter applied to it or not. That is all I meant.
    – Paul LeBeau
    Commented Jul 14, 2021 at 8:22
  • I've updated my answer to clarify that unclear statement.
    – Paul LeBeau
    Commented Jul 14, 2021 at 8:26
  • 1
    Safari occasionally downscales the resolution of filtered content if the filter is using too much memory
    – Michael Mullany
    Commented Jul 14, 2021 at 12:12
  • Thanks Michael. I was not aware of that.
    – Paul LeBeau
    Commented Jul 14, 2021 at 15:38

Not the answer you're looking for? Browse other questions tagged or ask your own question.