SVG画板尺寸

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

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

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

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

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

优点

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

缺点

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

方法2：裁剪到边缘

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

看起来像这样：

优点

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

缺点

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