SVG: удалить отступы по краям автоматически

#css #вёрстка #svg

Столкнулся с проблемой при верстке сайта. У меня есть ряд иконок SVG, которые выглядят
примерно так:



Проблема в том, что вокруг самого изображения есть отступы до краев. Мне бы хотелось,
чтобы этих отступов не было, потому что с ними каждую иконку при размещении в элементе
приходится подгонять по размеру и позиционированию в css.

Я знаю, как убрать эти отступы с помощью Inkscape. Но это ручная работа, а иконок много.

Есть ли какая-то утилита, которая может убрать эти отступы автоматически? Предпочтительно
под Linux (node, python подойдет).

Пример SVG: gist
    

Ответы

Ответ 1

Короткий ответ

Вот такой скрипт.

Он требует 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


Ответ 2

Можно быстрее убрать отступы используя viewportи viewBox
Например есть такая иконка  







Красная рамка вокруг иконки - это область видимости viewport. Вот эти отступы и сохраняются
при вставке в html. 
Изменяя атрибуты  viewportи viewBox можно убрать отступы.
В примере ниже сохраняется масштаб 1:1, но уменьшается область просмотра и отступы
практически уменьшаются.  








Если надо просто подвинуть иконку внутри viewport можно воспользоваться первыми двумя
атрибутами viewBox="12 0 48 48" -сдвиг влево.
Более подробно: тут и тут
Если у вас иконки однотипные, то поэкспериментировав с атрибутами viewport viewBox
на одной иконке, далее можно сделать авто-замену атрибутов всего пакета иконок, например
в notepad++


Ответ 3

Простейший вариант будет примерно таким:



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");
});
p {
  border: 1px solid blue;
}

svg {
  display: block;
  height: 10em;
  width: auto;
  border: 1px solid red;
}







Ответ 4

Можно использовать плагины для Gulp - gulp-imagemin и imagemin-svgo: 

var
    gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),
    imageminSvgo = require('imagemin-svgo');

gulp.task('imagemin', function() {
    gulp.src('./img/**/*')
        .pipe(imagemin([
            imageminSvgo({
                plugins: [
                    {removeViewBox: true}
                ]
            })
        ]))
        .pipe(gulp.dest('./public/img/'))
});