希拉里·克林顿（Hillary Clinton）的徽标有隐藏的缺口吗？

226

这个问题至少不是政治性的！

在查看此处找到的希拉里徽标的SVG版本时，我注意到H的两个垂直栏中都有槽口。箭头横杆覆盖了这些槽口，因此在查看徽标时看不到它们。但是我很好奇为什么设计师可能会加入这些缺口。有人知道吗

logo svg best-practice

— 肯尼迪
source

53

从技术上讲，这是一个漏洞规避方案。认为所有大学和2D渲染引擎的主流供应商都一遍又一遍地犯同样的错误，这有点令人惊讶和不安，尽管我们知道原因，但我们知道如何修复它，而不会对性能造成太大影响在现代计算机上。而且没有3D图形的人很少犯这个错误，并且已经知道了30多年了。

— joojaa

6

@NickT它的问题不是z争斗，而是将不透明度和覆盖范围混合在一起的问题，但是3D不仅仅是游戏。在3D中，我们一直使用多重采样来解决aa问题。多次采样（通常，即使结果不会那么明显）也不会计算覆盖率，因此不会犯错误的想法，认为50％的覆盖率是25％可见，而另外50％的覆盖率可见。虽然这可能是正确的，但answe也可以是50％可见或不可见。在这种情况下，为避免混淆，其他50％是手动移除的，我们可以修复3种情况，但不是全部。应该不需要。

— joojaa

5

遗憾的是，我清楚地意识到这是为了避免出现重叠边框的渲染错误。但是SVG仍然14岁，所以我希望这一天能解决。

— 弗朗西斯科·普雷森西亚

5

@FranciscoPresencia SVG并不是问题，这只是我们选择错误实现渲染方式的问题。不同的SVG渲染器对此问题的严重程度有所不同

— joojaa

12

@ DA01没有天真的修复程序非常简单，它的代码比当前算法少。无需进行基于覆盖率的计算，只需渲染就好像您根本没有在更高的分辨率上进行抗锯齿一样，然后将图像过滤到真实分辨率。这绝不会从下而上溢出，因为它不会犯错，而最前面的元素却完全掩盖了它。图形卡始终按照gfx卡设置中的x4 x8 x16 aa设置进行操作。

— joojaa

233

为了防止可能的渲染伪影。

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

您可以在此处查看示例和可能的伪像的说明：

几乎没有任何理由要使边缘完全对齐而导致类似的伪影，因此使用希拉里徽标中的“缺口”是一种很好的习惯。

— 蔡
source

6

实际上，这可能与打印问题一样大。在数字打印中，通常至少会将svg栅格化，然后再发送给打印机，并且可能会出现相同类型的伪像。（我的上一个雇主（大型商业打印机）的最后一个项目涉及编写软件，以帮助在昂贵的纸上写墨工作之前识别出这类事情。）

— Mindor先生，2016年

1

既然我们在谈论美国政治，您是说“文物”吗？

— Andrew Rasmussen

5

根据english.se，我的意思是人工制品，而不是人工制品。（但由于我是英国人，所以我的意思是指人工制品）

— 蔡君

几乎没有任何理由...只是好奇：有没有理由？

— Alois Mahdal

@AloisMahdal我非常怀疑。

— 蔡

61

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

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

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

沉积图层时，请注意其覆盖范围（通常存储在额外的通道，即alpha通道中），并使用它来将添加的颜色与已经存在的颜色混合。

如果您的新图层覆盖了50％的像素，并且是蓝色，则用蓝色对该像素的当前颜色进行平均，然后在该位置绘制颜色。

如果要创建具有透明度的图像，事情会变得有些复杂，但从根本上讲并不是这样。

栅格化是将多边形变成像素的过程。在这里，我们使用一些代数计算出多边形覆盖了给定像素的数量，然后计算了覆盖量。

如果多边形的两条边重合-恰好彼此重叠-但两条边都覆盖了给定的像素，则发生问题。

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

首先，我们将红色油漆。这与白色混合，导致50％白色50％红色。

然后，我们将其涂成蓝色。这与50％白色50％红色混合，我们得到25％白色25％红色50％蓝色。如果红色和蓝色在中间相遇，或者蓝色完全覆盖红色，则会发生相同的情况。

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

只要一个多边形的覆盖率达到100％，这不是问题。

现在，这个问题不是根本的。您可以使用类似射线追踪的方法（在点处以N ^ 2的倍数进行过度渲染）进行多边形渲染，甚至可以使用类似纯矢量的方法（从下面的形状的几何形状中减去块状形状）他们，将其删除）。在任何情况下，“隐藏”颜色都不会泄漏到输出图像。

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

因为您不知道矢量图像的输出方式，所以像这样的槽口可以使您制作出的图像对于不完善的打印/显示技术而言更加坚固。

— 雅克
source

1

您的描述适用于包含alpha通道的图形，或抗锯齿时绘制子像素的情况。OP实例将显示与预期相反的混合层的刻痕伪像。我建议该问题与打印中的注册错误有关。

— Pekka

2

@pekka是的，但是今天大多数渲染都抗锯齿。

— Yakk

如果顶层具有任何透明性，则该凹口将导致边缘逐渐退缩下层，从而影响抗锯齿和顶层颜色。一个更合适的响应将是在不需要混合的区域进行矩形折扣（尺寸难以估计）。您如何量化？

— 佩卡

@pekka如果顶层的透明度中等，则此问题的问题要少得多（无论如何您都可以看到蓝色下的红色）。当顶部的透明度接近不透明度时，请采用上述解决方案。随着它远离不透明性，请对其进行预合成。考虑到注册错误，堆积问题（太多层！），抗锯齿以及其他所有问题，通常的问题是棘手的：在某个时候，您想为每种输出格式编写自定义矢量，或者以某种方式修改矢量。我只是试图回答缺口解决的问题的确切技术原因。

— Yakk

1

@Pekka很难绘制矩形，然后在背景显示低谷的情况下，遇到相同问题的相反问题。刻痕是一种缺陷在许多其他缺陷之间的折衷（该缺陷用于屏幕渲染，而没有方腔，因此可以根据需要以最小的误差制作套印版）。但是，确实没有理由需要这样做，只是我们的渲染器工作不正确，仅此而已。通过切换栅格化方式，我们可以轻松解决所有3个问题。

— joojaa

48

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

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

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

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

如果我将其截屏并放大以显示栅格化，则可以更清楚地了解正在发生的情况：

理想的解决方案是使浏览器中的SVG光栅化器“更智能”，而不是呈现堆叠的内容，但是鉴于SVG元素可以在外部进行操作并实时运行（因为它只是XML文件），所以这不是一个实际的解决方案用于浏览器。

因此，设计师可以使用看到的凹口来做出决定。

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

— DA01
source

16

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

可以避免的问题是逆向陷印之一 -与预期图形的偏离会导致背景颜色的细线显示在垂直重合边缘的左侧。由于颜色具有很高的对比度，因此影响会很明显（尝试将虚线移动到垂直线的左侧甚至1个像素。

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

— 佩卡
source