SVG渐变实现

平面设计 svg 坡度
2021-12-30 01:02:25

是否可以在 SVG 中重新创建这种模糊渐变?

在此处输入图像描述

3个回答

是和不是。

可以在 Inkscape 中创建渐变网格,并将其保存为 SVG。然而,浏览器中使用的 SVG 标准还不支持渐变网格。这可能会在未来改变,但目前没有。

在此处输入图像描述

另一种在浏览器中有效的方法是添加几个实体对象,将它们模糊,然后将它们放在剪贴蒙版中。这仍然是一个纯矢量解决方案,它没有被光栅化。

在此处输入图像描述

如果您需要,这是适用于浏览器的版本的 SVG。

编辑:上面指向 SVG 的链接不再可用,所以我删除了它。

它可以在 Illustrator 和 Inkscape 中制作为渐变网格。在旧版 Illustrator 中保存为 SVG 时,它会转换为位图图像。显然,Illustator 大约在 6 年前就知道了,但 SVG 语言却不知道。

当在 Inkscape 中保存为普通 SVG,而不是 Inkscape SVG 时,它保持为渐变网格,并使用文本编辑器打开 SVG 文件显示有命令 meshgradient。查看代码片段

在此处输入图像描述

因此,在不了解标准的情况下,我可以说“至少在 Inkscape 的普通 SVG 中实现了它”。

希望有人知道 SVG 开发状态的程序员能说出确切的信息。

如果您的目标是拥有轻量级、可扩展的网格渐变,那么您可以尝试以下方法:

https://peterhrynkow.com/performance/2019/01/13/blowing-up-images-to-make-them-small.html

它不是矢量,但也可能是因为文件大小非常小并且图像可以无限缩放。