Figma 模糊效果导出为 SVG 竟然会失效？

引言

在数字设计中，SVG 因其强大的可伸缩性和跨平台兼容性，成为网页和移动应用设计中存在感极强的图形格式。它不仅提供清晰的矢量图形，还能通过各种属性和效果增强视觉表现力。随着 Figma，Sketch 等设计工具的普及，设计师们可以轻松地创造出包含渐变、阴影和模糊效果的图形。然而，SVG 在实现这些高级视觉效果时却显得力不从心。当设计作品需要转化为 SVG 格式时，常常会失去原有的高级效果。这不仅违背了设计的初衷，也给开发者带来了额外的挑战。

本文将深入探讨这一问题，分析背景模糊在现代 UI 设计中的重要性，讨论 SVG 在实现背景模糊方面的局限性，并探索更好的解决方案。

模糊效果的关键作用

不同的模糊效果在 UI 设计中有着不同的作用，它们往往能够显著增强视觉层次。

高斯模糊作为最基础也是应用最广泛的模糊效果，它的应用能够很大程度上提升用户体验。下面这个例子中，当用户执行操作时，比如鼠标悬停或点击，高斯模糊可以作为一种即时的视觉反馈，向用户传递出他们的操作已经被系统接收和处理的信息。这种快速的反馈让用户感到系统灵敏且反应迅速，增加使用的流畅感和满意度。

Design by Nick Qurle on the Figma Community

背景模糊可以让用户通过区分前景和背景，快速识别出哪些元素更为重要，使界面看起来更加有组织，易于理解。模糊背景的设计可以自然地将用户的注意力引导到清晰的前景元素上，例如重要信息或操作按钮，从而确保关键内容不会被忽略。

Design by Nick Qurle on the Figma Community 

在扁平化设计的 UI 中，背景模糊尤其重要。它通过创造一种深度的错觉，使界面看起来更加丰富和立体，不再单调。这种视觉深度不仅提升了设计的吸引力，还让界面显得更加生动有趣。

Design by kristof eka on the Figma Community

总体而言，模糊效果不仅可以美化界面，还能显著提升用户的使用体验。它在增强视觉层次感、提供即时反馈和增加界面深度方面具有不可替代的作用，是 UI 设计中一类重要的技术手段。

意料之外的效果

假设下图是一张你在 Figma 中添加了背景模糊效果的图形，你打算让朋友们来猜一下后面是什么水果。当你想将这张图片导出发送给其他人进行这个游戏时，你会发现这个游戏难以进行，因为“谜面”在导出后就已然消失。

在 Figma 和 SVG 中不同的渲染效果（1)

让我们切换回真实的工作场景。设计师为一个设计稿精心添加了多种效果，比如渐变、阴影和模糊效果。设计师自认为一切就绪，只需点击导出按钮，将其导出为 SVG 即可交付给开发者。

然而，当导出操作完成后，现实却是尴尬且残酷的。Figma 中导出背景模糊图层为 SVG 时，所有的模糊效果都失效了。原本预期中的柔和背景在 SVG 格式下变得不复存在。这不仅破坏了设计的美感，也给设计师和前端开发者带来了额外的工作量，他们需要重新实现这些效果，以确保最终的网页或应用能够忠实地反映设计师的意图。

在 Figma 和 SVG 中不同的渲染效果（2)

许多开发团队在将背景模糊组件导出到 SVG 时也遇到了相同的问题——模糊效果不适用，他们能做的就是导出为 PNG 和其他位图格式的图片，但这对前端开发人员来说非常不便。这一切究竟是为什么呢？

SVG 对于模糊效果的局限性

目前，没有任何主流的浏览器支持了 SVG 滤镜中的 in="BackgroundImage" 特性。这种支持的缺失就是为什么从 Figma 导出为 SVG 文件时使用这个特定属性的模糊效果无法正常工作的原因。

用通俗的话来讲，就是 SVG 标准本身并不直接支持背景模糊效果。开发者需要通过创造性的方法来模拟背景模糊的效果，比如feGaussianBlur、feOffset 和 feMergeNode 等滤镜元素。但严格来说，它们不能完全模拟背景模糊效果，如在设计工具中看到的那种效果。背景模糊通常涉及对整个背景区域的模糊处理，而不仅仅是单个元素。除了背景模糊之外，还有其他常见的模糊类型，如缩放模糊和运动模糊，导出为 SVG 后也同样面临失效和通过模拟的方式才有可能实现的情况。

下面我们将通过一个简单的例子一窥在 SVG 中是如何通过模拟的方式实现背景模糊的。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">  <defs>    <filter id="blur-filter">      <feGaussianBlur in="SourceGraphic" stdDeviation="10" />      <feOffset dx="5" dy="5" result="offsetblur" />      <feMerge>        <feMergeNode in="offsetblur" />        <feMergeNode in="SourceGraphic" />      </feMerge>    </filter>  </defs>  <rect x="10" y="10" width="180" height="180" style="fill: red; filter: url(#blur-filter);" /></svg>

SVG 通过滤镜组合模拟实现的背景模糊效果代码

首先，使用 feGaussianBlur 元素将输入图像模糊化，模糊程度由 stdDeviation 控制。接下来，feOffset 元素将模糊图像在 x 轴和 y 轴上进行偏移，从而模拟阴影效果。最后，通过 feMerge 元素将偏移后的模糊图像与原始图像合并，得到最终的模糊阴影效果。

SVG 通过滤镜组合模拟实现的背景模糊效果

尽管使用 feGaussianBlur 等一系列滤镜在 SVG 中可以在一定程度上实现模糊效果，但它们存在的一些局限性和缺点很可能成为实现 UI 正确效果的阻碍：

1. 单一元素限制：SVG 的滤镜功能通常限制在对单个图形元素进行模糊处理，而不支持整个背景区域的模糊。要实现背景模糊，需将背景分割成多个元素，并分别对它们应用滤镜，这无疑增加了工作量并可能引发性能问题，特别是在处理大型或复杂图形时。

2. 性能影响：应用复杂滤镜可能会显著影响 SVG 的渲染性能。在处理大型图形或高分辨率图像时，这种性能损耗尤为明显，可能导致页面加载缓慢和用户交互延迟。

3. 代码复杂性：在 SVG 中实现背景模糊等效果，需要编写包含多个 SVG 元素和属性的复杂滤镜代码。这种嵌套使用和属性调整不仅增加了代码的复杂度，也使得后期的维护和更新变得更加困难。

4. 维护难度：随着 SVG 代码复杂性的增加，其可维护性相应降低。在需要频繁迭代的设计项目中，复杂的 SVG 代码可能成为开发流程中的瓶颈，影响开发效率和项目进度。

5. 迭代挑战：对于需要快速迭代的设计项目，SVG 滤镜的复杂性可能导致开发过程中的挑战。每次设计的微小调整都可能需要对滤镜代码进行相应的修改，这不仅耗时而且容易出错。

VGG 如何无缝支持背景模糊

让我们再来看一下 VGG 是如何支持背景模糊的。以前文中提到的从 Figma 中导出 SVG 时失效的背景模糊为例。在VGG 中，实现背景模糊的方法更为直接和高效。我们可以从代码层面看出，VGG 提供了更为简洁的语法和原生支持，使得背景模糊效果的实现不再复杂。而且从渲染层面，我们也得到了与 Figma 中完全一致的效果。

使用 VGG 还原的背景模糊效果代码（片段）

使用 VGG 还原的背景模糊图形

与 SVG 规范相比，VGG Specs 在模糊效果的支持上展现了显著的优势。SVG 虽然提供了基础的高斯模糊功能，但这种支持相对有限，主要局限于图层模糊，而难以满足现代 UI 设计中对多样化模糊效果的需求。VGG Specs 则突破了这一局限，不仅支持传统的高斯模糊，还扩展到了背景模糊、运动模糊和缩放模糊等更为丰富的模糊类型，这些都是主流设计软件中常见的效果。

VGG 支持的部分模糊类型，来源于VGG Docs

对于设计师来说，VGG Specs 的原生模糊支持极大地提高了工作效率。设计师可以更加自由地实现创意，而不必在技术限制和实现方式上花费额外的精力。VGG Specs 使得从设计到实现的过程更加无缝，减少了在不同设计工具和开发环境之间转换时的兼容性问题。设计师可以期待他们的设计在不同平台和设备上保持一致的视觉效果，而无需担心效果的丢失或变形。

对于开发者而言，VGG Specs 的优势在于简化了模糊效果的实现过程。开发者不再需要编写复杂的 SVG 滤镜代码来模拟各种模糊效果，而是可以直接利用 VGG Specs 提供的原生支持快速实现。这种方法不仅减少了代码量，降低了维护难度，还提高了页面的性能表现。开发者可以将更多的精力投入到创造更优的用户体验和提升应用性能上，而不是纠结于实现细节。

此外，VGG 对于矢量图形的实现还具有更好的兼容性和可扩展性。随着 UI 设计趋势的不断演变，VGG 能够更好地适应新的设计需求和技术发展，为设计师和开发者提供了更多的灵活性和可能性。这种前瞻性的支持，为未来的 UI 设计和开发工作奠定了坚实的基础。我们后续还会陆续输出一系列内容讨论 SVG 作为矢量图形存在的问题，并展示 VGG 的图形能力以及相比于 SVG 的优点。请持续关注，也欢迎大家一起参与 VGG 开源社区的建设～

👏扫码添加小助手进交流群，欢迎社区小伙伴参与共建

<李宇伦，VGG 开源社区 maintainer>

• GitHub: https://github.com/verygoodgraphics

• 官网: https://verygoodgraphics.com

• 博客: https://blog.verygoodgraphics.com

• Discord: https://discord.com/invite/89fFapjfgM

• Twitter: https://twitter.com/VGG_Design