Question

我试图通过将透明PNG分解为彩色和alpha图像来减少它们的下载大小。这种方法很好，对于我的客户的图像，尺寸减少了50％以上。

重构图像我正在试验SVG和画布。

SVG解决方案使用不透明蒙版，画布使用globalCompositeOperation。

问题是，SVG在缩小时错误地显示暗边（通过在CSS中指定大小或直接在SVG上指定）。当以与输入图像相同的尺寸渲染SVG时，不会出现这些暗边。画布很好用。这种情况发生在我测试过的所有浏览器中（Chrome，IE11，Firefox）

我相信的问题是，SVG将独立调整alpha图像和彩色图像的大小，然后应用不透明蒙版。但是这种方法不起作用。在图像处理中众所周知，要调整透明图像的大小，要么必须通过alpha预先乘以颜色分量，然后使用标准的调整大小算法，要么必须执行加权平均（因为大多数透明像素具有对最终颜色的影响较小）。请参阅示例this discussion

当应用SVG滤镜效果时，最初可以调整使用的中间分辨率，但是在使用SVG蒙版属性时我无法弄清楚如何执行此操作（Robert Longson正确地向我指出过滤器效果不再支持这个，since the filterRes attribute was deprecated）

这里是SVG代码（我们在任何符合HTML5标准的浏览器中run it directly from my website）

<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='1000' height='454' viewBox='0 0 2560 1162'>
    <defs>
        <mask id='mask'>
            <image color-interpolation='sRGB' image-rendering='optimizeQuality' width='2560px' height='1162px' xlink:href='first-A.png'></image>
        </mask>
    </defs>
    <image color-interpolation='sRGB' image-rendering='optimizeQuality' mask='url(#mask)' width='2560px' height='1162px' xlink:href='first-RGB.png'></image>
</svg>

有谁知道如何调整SVG蒙版效果，以便不出现这些边缘伪影？

非常感谢，

彼得

SVG不透明蒙版分辨率和缩放

0 个答案: