关于裁剪 SVG

SVG 不是一张带边框的图片。它是一幅图加上一个 viewBox —— 四个数字，说明这个文件显示的是坐标空间里的哪一块。

留白就是这四个数字造成的。一个按 512 × 512 导出、图形居中的图标，四面都是空的，而且怎么缩放都去不掉：把文件缩小，留白也跟着一起缩小。logo 照样浮在自己那个盒子中间，照样和旁边的文字对不齐。

这个工具只改 viewBox，别的什么都不动。 它算出图形真正的起止位置，把盒子收紧到刚好包住它，然后把 SVG 还给你 —— 同样的路径、同样的渐变、同样的分组，只是换了一个合身的盒子。

它看的是画面，不是代码

要找出 SVG 的边界，最直接的办法是向浏览器要所有图形的外接框。但这个办法在两种再普通不过的情况下是错的，而人们来找这类工具，恰恰就是因为这两种情况：

所以这个工具先把 SVG 画出来，再去看结果 —— 和你的眼睛做的是一回事。白色矩形被读作「空」，投影被读作「内容」并保留下来。你看到什么，量的就是什么。

透明或白色（一般选这个）—— 凡是你会称作「空白」的东西都会被去掉：完全透明的像素和白色像素一视同仁。在白色画板上导出的图标，或者带白色底板的 logo，都该用这个。
只算透明 —— 白色被当作画面的一部分。当白色本身就是设计时用它：白色字标、必须保留的白色背景，或者本来就要放在深色页面上的图。

容差决定「多接近空白」还算空白。导出的文件很少是纯粹的：背景可能是 #fefefe，边缘可能有一点点半透明。如果什么都没裁掉，就把容差调高；如果画面里比较浅的部分被切掉了，就调低。

保留的边距会在四边各还回来你指定的一段空间，单位是 SVG 自己的单位 —— 也就是 viewBox 用的那套数字。

填 0 会得到尽可能紧凑的盒子。按钮里的图标、网格里的 logo，这类间距应该由排版来决定的场合，0 就是正确答案。有两种情况值得加一点边距：图形有描边，裁得太紧会被切掉；或者这个文件接下来还会被再裁一次。

如果这个 SVG 原本有 width 和 height 属性，它们会按和盒子相同的比例缩放，并保持原来写的单位。一幅在 100 mm 画布里宽 40 mm 的图，出来还是宽 40 mm。

这一点很重要：裁剪不会改变图形本身的大小，消失的只有周围的空白。原本没有 width 和 height 的 SVG 出来也不会有，所以它会继续跟着容器自适应。

文件是在你的浏览器里读取、绘制和重写的，绝不会到达服务器。如果这个文件是还没发布的 logo、客户的品牌标识，或者签了保密协议的作品，这一点正是关键。

这也意味着不用等上传、没有大小限制，而且页面加载完之后断网也能用。