以防止可能的渲染伪影。

如果没有凹口，您可能会看到底部形状的边缘与重叠形状的边缘相交（无论如何，在屏幕上，打印时这不是真正的问题）。

您可以在此处查看可能的人工制品的示例和说明：

• 转换为 SVG 时图像看起来有浮雕

• 如何将一个对象同时放在另一个对象的前面和后面？

几乎没有任何理由拥有完美对齐的边缘会导致这样的伪影，因此使用希拉里徽标中的“缺口”是一个很好的习惯。

了解光栅化和画家的算法可能会有所帮助。

将矢量图形（由多边形定义的图形，而不是像素定义的图形）渲染为像素的一种方法是在运行画家算法时栅格化多边形。

画家的算法是一个自下而上的过程，您首先放下背景，然后在该背景上绘制每一层颜色，直到到达顶层。

当您放置一个图层时，您要注意它的覆盖范围（通常存储在一个额外的通道中，即 alpha 通道中），并使用它来将添加的颜色与已经存在的颜色混合。

如果您的新图层以 50% 覆盖一个像素，并且它是蓝色的，则您将该像素的当前颜色与蓝色进行平均，然后将其绘制在那里。

如果您要创建具有透明度的图像，事情会变得有点复杂，但不是从根本上说。

光栅化是将多边形转换为像素的过程。在这里，我们使用一些代数计算出多边形覆盖给定像素的程度，然后计算覆盖量。

如果你有一个多边形的两条边重合——正好在彼此的顶部——但它们都覆盖了一个给定的像素，那么发生的事情就是一个问题。

假设底部多边形是红色，顶部是蓝色，背景是白色。

首先我们画红色。这与白色混合，导致 50% 的白色和 50% 的红色。

然后我们画蓝色。这与 50% 白色 50% 红色混合，我们得到 25% 白色 25% 红色 50% 蓝色。如果红色和蓝色在中间相遇，或者蓝色完全覆盖红色，也会发生同样的事情。

但是“实际上”蓝色多边形完全覆盖了红色多边形，那么我们为什么会看到它呢？因为算法忘记了亚像素定位细节。

只要一个多边形的覆盖率为 100%，这不是问题。

现在，这个问题不是根本性的。您可以使用类似光线跟踪的方法（在点处过度渲染 N^2 倍）或什至类似纯矢量的方法（从下方形状的几何形状中减去块状形状）来进行多边形渲染他们，把他们剪掉）。在这两种情况下，“隐藏”颜色都不会泄漏到输出图像中。

画家的算法并不是“隐藏”几何图形可以泄漏的唯一情况。如果您使用不透明介质进行打印，有时颜色层未完全对齐。因此，当顶层应该完全覆盖它时，底层会泄漏。

由于您不知道您的矢量图像将如何输出，因此像这样的凹口可以让您制作的图像对不完美的打印/显示技术更加稳健。

蔡是对的。我想我也会添加一个视觉答案。

发生这种情况的原因是它是 SVG。与您控制每个渲染像素的光栅图像不同，SVG 的光栅化发生在浏览器中......因此浏览器做出这些决定。

浏览器必须做出的决定之一是何时进行抗锯齿处理。当一条线上的一个点落在一个像素上时，它通常会这样做。然后它将对该像素进行反锯齿处理。由于它会渲染 SVG 的所有层，它会对每一层执行此操作，这就是您可以开始获得边缘伪影的地方。当您使用 SVG 的缩放时尤其如此，因为这将导致它与不同的屏幕像素重叠。

这是 Chrome 中绿色框与红色框重叠的屏幕截图。顶部是 100% 的页面缩放，底部是放大的。注意渲染边缘的区别：

如果我截屏并放大以显示光栅化，您可以更清楚地了解正在发生的事情：

这里的理想解决方案是让浏览器中的 SVG 光栅化器“更智能”，而不是渲染堆叠的东西，但鉴于 SVG 元素可以在外部进行操作和实时（因为它只是一个 XML 文件），这不是一个实用的解决方案对于浏览器。

因此，相反，设计师通过使用您看到的凹口做出决定。

顺便说一句，这在概念上类似于如何使用陷印处理印刷中的套准。

以多种颜色打印需要准确配准以避免难看的间隙，并且当工件由多个来源组成时，这是一个问题。即使在有限精度算术必然会引入错误的数字产品中，也会出现类似的问题。

需要避免的问题是反向陷印- 与预期图形的偏差可能导致在垂直重合边缘左侧显示背景颜色的细线。由于颜色对比强烈，影响会很明显（尝试将虚线移动到垂直左侧 1 个像素。

该方法无意影响油墨的混合。屏幕上一致的坐标避免了这个问题，而半色调用于管理颜色。