Столкнулся с проблемой при верстке сайта. У меня есть ряд иконок SVG, которые выглядят примерно так:
Проблема в том, что вокруг самого изображения есть отступы до краев. Мне бы хотелось, чтобы этих отступов не было, потому что с ними каждую иконку при размещении в элементе приходится подгонять по размеру и позиционированию в css.
Я знаю, как убрать эти отступы с помощью Inkscape. Но это ручная работа, а иконок много.
Есть ли какая-то утилита, которая может убрать эти отступы автоматически? Предпочтительно под Linux (node, python подойдет).
Пример SVG: gist
Ответ
Короткий ответ
Вот такой скрипт
Он требует PhantomJS и работает следующим образом:
phantomjs svg-padding-remover.js path/to/image.svg > new.svg
Длинный ответ
Можно использовать PhantomJS для эмуляции браузера в командной строке. Соответственно, при этом для манипуляций с SVG доступны все возможные браузерные методы (читающим это просьба дать в комментариях ссылку получше).
Я использовал ответ Qwertiy (спасибо за идею!), чтобы написать такой скрипт командной строки.
Если скрипт максимально упростить (убрать разбор аргументов командной строки, обработку ошибок), и оставить только сам принцип работы, получится вот это:
remover.js
// здесь нужно указать путь до картинки
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");
};
Запуск скрипта:
phantomjs remover.js > cropped-image.svg
Комментариев нет:
Отправить комментарий