SVG 画板大小

SVG 画板大小有两种不同的（合理的）方法。

这里的“画板”指的是 Illustrator 中的概念，基本上是您用于文档的白色绘图区域。 最终它指的是实际 SVG 输出中的 viewBox。 对于前端开发人员来说，这一点非常重要，因为如果缺少一致性，SVG 的定位将永远是一场小规模的战斗，并且会严重损害 SVG 作为有用系统的理念。

我最近在一次会议上遇到了开发者 Emma Arce，她转述了她的团队在试图标准化某些内容并使其正确时进行的一段非常有趣的对话。 这是我对这种情况的看法。

方法 #1：使它们完全相同的大小

您可能会通过 CSS 应用大小调整，因此画板的大小并不重要，但尺寸应该相同。 这就是它的样子

优点

相对大小。 您在图标设计本身中控制图标相对于其他图标的大小。 因此，如果您稍后在 CSS 中将它们全部调整为相同的大小，所有图标都将保持该大小关系，并且看起来很好。

缺点

方向对齐。 由于任何给定图标的任何一侧都有任意数量的空白，因此很难将事物与图标边缘对齐或期望图标与相邻元素之间有始终一致的空间。

方法 #2：裁剪到边缘

同样，实际的“画板大小”并不重要，因为您很可能仍然会通过 CSS 应用大小调整，但画板应该在所有侧边都与艺术作品的边缘相接。 在 Illustrator 中，这是一个简单的操作

这就是它的样子

优点

对齐和定位。 如果您想将图标放置在元素的右上角，它将移到那里并看起来很好对齐。 不会有一些奇怪的任意数量的空白来进行补偿。

缺点

大小不一致。 现在所有图标都具有不同的纵横比。 这对于复杂性来说不是一个大问题，因为您仍然可以使用具有固定宽度/高度的 CSS 来调整它们的大小，并且它们将在该区域内居中（假设默认 preserveAspectRatio）。 但是，这会影响它们的大小。 任何给定图标的纵横比越接近正方形，它看起来就越大（它将填满给定的空间）。 更高或更宽的图标需要缩小以适应空间，并且看起来更小。 因此，一致的大小和其他图标的相对大小变得更加困难。

获胜者？

我担心我不能选择一个。 我非常喜欢裁剪图标的定位一致性，但大小不一致可能会让我发疯。 当然，如果我改变了，它会产生完全相反的效果。

其他注意事项

通过框实现一致性： 如果在使用 SVG 的每个实例中，您都将图标放置在一个视觉上定义的框中，则对齐将不再是问题，因为您可以对齐框，并且它们看起来很好。

您始终可以进行一次性操作： 假设您有一个非常长而细的箭头形状。 您始终可以对该特定箭头进行一些特殊 CSS。 我不会因为少数异常值而改变整个系统。 这是关于整个系统的。