// здесь нужно указать путь до картинки
var fs = require('fs');
var url = 'file://' + fs.absolute('1.svg');
// открываем файл svg как документ
var page = require('webpage').create();
page.open(url, function () {
// Вызов нашей функции, которая будет выполнена
// в контексте открытого документа.
// Она изменит документ (svg) необходимым нам образом.
page.evaluate(svgPaddingRemover);
// вывод нового содержимого документа
console.log(page.content);
// выход
phantom.exit();
});
// Функция, которая изменяет документ.
// В данном случае - корректирует viewBox, удаляет width и height.
var svgPaddingRemover = function () {
var svg = document.querySelector("svg");
var svgall = svg.querySelectorAll("*");
var l = Infinity, t = Infinity, r = -Infinity, b = -Infinity;
for (i = 0; i < svgall.length; i++) {
var elem = svgall[i];
var bb = elem.getBBox();
if (bb.width && bb.height) {
l = Math.min(l, bb.x);
t = Math.min(t, bb.y);
r = Math.max(r, bb.x + bb.width);
b = Math.max(b, bb.y + bb.height);
}
}
svg.setAttribute("viewBox", l + ' ' + t + ' ' + (r - l) + ' ' + ' ' + (b - t));
svg.removeAttribute("width");
svg.removeAttribute("height");
};
document.querySelector("button").addEventListener("click", function () {
var svg = document.querySelector("svg");
var l = Infinity, t = Infinity, r = -Infinity, b = -Infinity;
for (var elem of svg.querySelectorAll("*")) {
var bb = elem.getBBox();
if (bb.width && bb.height) {
l = Math.min(l, bb.x);
t = Math.min(t, bb.y);
r = Math.max(r, bb.x + bb.width);
b = Math.max(b, bb.y + bb.height);
}
}
svg.setAttribute("viewBox", `${l} ${t} ${r-l} ${b-t}`);
svg.removeAttribute("width");
svg.removeAttribute("height");
});
viewport你可以使用and快速去除缩进viewBox例如有这样一个图标viewport。这些缩进在插入到 html 中时会被保留。通过更改属性viewport,viewBox您可以删除缩进。下面的示例保持 1:1 的比例,但缩小了视口,填充也几乎减少了。
如果只是需要移动里面的图标
viewport,可以使用前两个属性viewBox = "12 0 48 48" -shift to left。更多细节:这里和这里如果你的图标是相同类型的,那么通过试验
viewportviewBox一个图标的属性,然后你可以自动替换整个图标包的属性,例如,在记事本++简答
这是这样一个脚本。
它需要 PhantomJS 并像这样工作:
长答案
您可以使用 PhantomJS 在命令行上模拟浏览器。相应地,同时所有可能的浏览器方法都可用于操作SVG (请读者在评论中提供更好的链接)。
我使用Qwertiy 的答案(感谢您的想法!)来编写这样的命令行脚本。
如果脚本尽量简化(去掉命令行参数的解析,错误处理),只留下运行原理,会变成这样:
去除器.js
运行脚本:
最简单的选择是这样的:
您可以使用 Gulp 插件 gulp-imagemin 和 imagemin-svgo: