SVG 描边大突破？你不知道的方法

SVG 描边的局限性

然而，SVG 还提供了一种更为高级的方法来实现图形的内外描边，这在之前的文章中并未提到。在深入探索这一主题之前，我们强烈建议您回顾之前的文章，以获得必要的背景知识，这将有助于您更好地理解接下来要介绍的内容。

高阶？描边的局限性

• operator：指定要执行的形态学操作的类型，可以是“dilate”（膨胀）或“erode”（侵蚀）；

• radius：定义操作的强度，即扩大或收缩形状的程度。这个值越大，形状的变化就越明显；

• in：指定滤镜应用于的输入图像。

那么，什么是膨胀和侵蚀呢？

• 膨胀（Dilate）：这一操作会扩大形状的边界，使其更宽。这在创建粗笔划或不规则边框时非常有用，可以为图形添加更加醒目和动态的外观。

• 侵蚀（Erode）：与膨胀相反，侵蚀操作会收缩形状的边界，使其变窄。这适用于创建细笔划或从形状中删除细节，为图形带来更加精致和细腻的效果。

通过调整这些属性，我们可以控制 feMorphology 滤镜的行为，并创造各种视觉效果。

下面，我们将通过一个具体的 SVG 示例，来展示如何利用 feMorphology 滤镜为文本添加描边效果，并进一步讨论这种方法的优缺点。

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">  <defs>    <filter id="dilate" x="-10" y="-10" width="120" height="120">      <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="1"/>    </filter>    <filter id="erode" x="-10" y="-10" width="120" height="120">      <feMorphology in="SourceAlpha" result="ERODE" operator="erode" radius="1"/>    </filter>  </defs>  <text x="90" y="50" font-size="48">Hello</text>  <text x="90" y="150" font-size="48" filter="url(#dilate)">Hello</text>  <text x="90" y="250" font-size="48" filter="url(#erode)">Hello</text></svg>

首先，让我们仔细分析上面的 SVG 代码示例。这个示例定义了两个滤镜：dilate 和 erode，它们分别用于实现文本 “Hello” 的膨胀描边和侵蚀描边效果。

• 膨胀描边 (dilate)：通过设置 operator="dilate" 和适当的 radius 值，feMorphology 滤镜能够扩展文本的边缘，从而创建出一种加粗的效果。这种效果非常适合于需要强调文本的场景。

• 侵蚀描边 (erode)：相对地，将 operator 设置为 "erode" 可以让文本边缘向内收缩，创造出一种细线或空心的视觉效果。这种效果可以用来制作精细的装饰性文本或在需要减少视觉干扰时使用。

在实际应用中，调整radius属性是控制描边粗细和样式的关键。radius值越大，膨胀或侵蚀的效果就越明显。然而，正如下图所示，过大的radius值可能会导致文本笔画过粗或过细，影响可读性。

• 膨胀效果：如果 radius 设置得过大，文本的笔画可能会变得异常粗大，使得文本难以辨认，甚至在某些情况下会导致完全看不到文本内容。

• 侵蚀效果：同样，如果 radius 过大，文本的笔画可能会变得非常细，甚至在某些笔画处断开，这同样会降低文本的可读性。

在探索 SVG 的高级应用时，我们经常会遇到需要为图形或文本添加描边效果的场景。feMorphology 滤镜作为一种强大的工具，能够通过扩展或收缩对象的边界来实现描边效果。然而，正如我们所讨论的，这种方法虽然功能强大，但也存在一些局限性。

首先，feMorphology滤镜本身并不支持颜色填充。这意味着，如果我们想要为膨胀或侵蚀的边缘添加颜色，就需要采用额外的步骤。具体来说，我们可以通过叠加使用 feFlood、feComposite 和 feMerge 滤镜来实现这一目标。feFlood 滤镜用于创建一个颜色层，feComposite 滤镜则将这个颜色层与原始图形的边缘相匹配，最终通过 feMerge 滤镜将描边和原始图形合并在一起。

然而，使用多个 SVG 滤镜可能会对渲染性能产生负面影响。这一点在处理复杂或大量的图形时尤为明显。滤镜的叠加不仅增加了浏览器的计算负担，而且可能导致渲染速度变慢，影响用户的体验。

此外，这种方法的过程相对繁琐，且难以实现精确控制。对于设计师和开发者来说，这可能意味着需要花费更多的时间和精力来调整滤镜参数，以达到预期的效果。在某些情况下，这可能会导致工作流程变得复杂，降低开发效率。

因此，寻找更优的解决方案，以简化 SVG 描边效果的实现，同时保持性能和可读性，成为了一个值得进一步研究的方向。

不必麻烦了

使用 VGG 矢量图形规范创建的外部、中心和内部描边矢量图形

完整属性规范请参考：

https://docs.verygoodgraphics.com/specs/vectorgraphics/border-position

VGG 的这些特性对于创建复杂的数据可视化和信息图表尤为有利。它不仅提供了更多的设计自由度，还能够帮助设计师和开发者创造出更加专业和吸引人的视觉内容。在这些场景中，清晰地展示数据点和连接线是非常重要的，而 VGG 的描边控制能力使得这一点变得更加容易实现。

如果你是一个对图形设计和数据可视化感兴趣的开发者，那么 VGG 无疑是一个值得尝试的工具。它不仅能够提供更多的设计自由度，还能帮助你创造出更加专业和吸引人的视觉内容。

在探索 VGG 的过程中，你可能会发现自己的创造力得到了释放，因为你不再受限于传统的描边规则。尝试使用 VGG，你可能会惊讶于它能够带来的新可能性。不要害怕实验，因为正是这些实验和探索，才能推动我们不断前进，创造出更加精彩的作品。

关于 VGG

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

• 官网: https://verygoodgraphics.com

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

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

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