如何缩小/规范化 SVG 使其适合特定的视图框

Question

我在我当前的应用程序中使用了几十个 SVG，它们都是内联的，并且都是标准化的..这意味着它们都有一个 0 0 24 24 的视图框，并且图标非常适合在中间

然后这位设计师给了我多个新的 SVG，它们不是标准的..他们的视框为 0 0 1024 1024, 0 0 400 400, 0 0 72 72

我想对它们进行标准化，以便它们都有一个 0 0 24 24 的视图框。

我尝试在 vectr.com 中打开它们，然后合并路径，然后缩小它们并再次导出 SVG，果然它们现在小得多，但是它们不完全适合 0 0 24 24 .. 我需要反复试验例如 0 0 1024 1024 现在是 0 0 48 40

我确信有一个编辑器/工具可以完美地缩小它并以适合它的方式居中 0 0 24 24

我怎样才能轻松简单地实现这一目标？

谢谢

Answer 1

我从来没有想过这样的用例，但如果你只有一个路径作为 svg 内容，我自己的库pathfit可以以这种方式重写路径。这是一个 node.js 脚本：

const Pathfit = require('pathfit');

function shrinkPath (path, viewBox, targetWidth, targetHeight) {
    const pathfitter = new Pathfit({viewBox}, undefined, path);

    return pathfitter.scale_with_aspect_ratio(targetWidth, targetHeight);
}