svg下图像标签中的过滤器会降低图像质量吗？

Posted 2023-03-28

【中文标题】svg下图像标签中的过滤器会降低图像质量吗？

【英文标题】：does the filter in image tag under svg reduce the quality of the image?

【发布时间】：2021-09-22 22:10:39

【问题描述】：

我在<svg> 组件下有一个<image />。如果我将滤镜属性添加到图像以增加/减少对比度和亮度，这会影响图像的质量（像素密度）吗？

示例：

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

【问题讨论】：

如果您的图像是矢量，则不是。但如果它是一个正常的图像，那么是的。祝你有美好的一天！

啊，我明白了，所以任何存储在 .png 或 jpeg 中的非矢量照片在应用过滤器属性时会失去一些质量@AmirrezaAmini ？

这个答案并不完全正确。请看我的回答。

我担心这将取决于引擎。在某些浏览器中（至少某些版本的 Safari 确实如此），过滤器在目标上应用一次，然后缩放生成的位图以匹配输出大小。其他浏览器将应用过滤器作为最后一步（我相信这是指定的行为），在这种情况下不，“质量”不应该受到影响。但是 IIRC 我也看到浏览器即使没有过滤器也无法正确缩放 SVG 中的图像......

【参考方案1】：

这会影响图像的质量（像素密度）吗？

您在这里的意思并不完全清楚。答案通常是是的。但让我再详细说明一下。

过滤器只能用于位图。因此，当您将过滤器应用于任何 SVG 元素时 - 无论是位图还是矢量形状 - 它将以当前显示分辨​​率转换为位图。然后将对其应用过滤器。

因此，如果您的意思是“原始位图的像素密度”，那么通常会更改像素密度。当然，除非它与显示像素以 1:1 的比例显示（例如，一个 100x100 的位图在屏幕上以 100x100 的比例显示）。如果原始图像被缩小以显示在您的 SVG 中，那么它无论如何都会失去分辨率。然后它是否应用了过滤器。过滤器将使用较低的分辨率，但通常不会进一步降低它。当然，除非过滤器是为此而设计的。

【讨论】：

"但不会比没有应用滤镜时的效果低" ...所以应用滤镜不会影响像素密度，或者你的意思是与有过滤器相比，实际上会更少降低分辨率吗？

@Kaiido 抱歉...想象一下 SVG 中的 1000x1000 位图以 500x500 显示像素的大小呈现。它已经失去了一半的分辨率。无论是否应用了过滤器，情况都是如此。这就是我的意思。

我已经更新了我的答案以澄清那个不清楚的陈述。

如果过滤器占用过多内存，Safari 有时会降低过滤内容的分辨率

谢谢迈克尔。我没有意识到这一点。