SVG画板尺寸

有两种不同的（合理的）SVG画板尺寸调整方法。

这里的“画板”一词指的是Illustrator中的概念，基本上是文档的白色绘图区域。 最终，它引用实际SVG输出中的viewBox 。 这对前端开发人员非常重要，因为如果没有一致性，SVG的定位将永远是一次一次性的战斗，并且确实伤害了SVG成为有用系统的想法。

我最近在一次会议上遇到了开发人员Emma Arce，她在她的团队之间进行了非常有趣的对话，他们正试图标准化某些东西并实现这一目标。 这是我的情况。

方法1：将它们都设置为完全相同的大小

您可能会通过CSS应用大小调整，因此画板的大小无关紧要，但尺寸应相同。 看起来像这样：

优点

相对尺寸。 您可以在图标本身的设计中直接控制与其他图标相比的大小。 因此，如果稍后在CSS中将它们的大小全部设置为相同，则所有图标将保持该大小关系，并且看起来很好。

缺点

方向对齐。 由于在任何给定图标的任何给定侧面上都有任意数量的空格，因此很难将内容对齐到图标的边缘，也很难期望图标和相邻元素之间的空间一致。

方法2：裁剪到边缘

同样，画板的实际“大小”并不重要，因为无论如何您都可能会通过CSS应用大小调整，但是画板应该在所有侧面都与图稿的边缘相交。 在Illustrator中，这很简单：

看起来像这样：

优点

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

缺点

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

优胜者？

恐怕我不能选一个。 我真的很喜欢裁切后的图标的位置一致性，但是不一致的大小会使我发疯。 而且我敢肯定，如果我进行更改，它将完全相反。

其他注意事项

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

您总是可以一次性完成：假设您有一个非常长且细的箭头形状。 您总是可以只为那个做一些特殊CSS。 我不会基于少数异常值来更改整个系统。 这是关于整个系统的。

翻译自: https://css-tricks.com/svg-artboard-sizing/