10

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

введите сюда описание изображения

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

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

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

Пример SVG: gist

3
  • 2
    Тут не всё так просто...
    – Qwertiy
    14 фев 2017 в 12:28
  • @cronfy Поделитесь, пожалуйста, как продвигается дело с автоматизацией обработки иконок. Я думаю многим будет интересно 16 фев 2017 в 10:47
  • 1
    @Alexandr_T спасибо за вопрос! :) сподвиг меня на то, чтобы добить эту задачу. У меня получилось написать скрипт с использованием PhanomJS. Я добавил ответ, а также сделал репозиторий на github: github.com/cronfy/svg-padding-remover
    – cronfy
    16 фев 2017 в 12:28

4 ответа 4

6

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

<svg version="1" xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96"
 style="border:1px solid crimson" >
    <g fill="#00BCD4">
        <rect x="37" y="18" width="6" height="24"/>
        <rect x="29" y="26" width="6" height="16"/>
        <rect x="21" y="22" width="6" height="20"/>
        <rect x="13" y="32" width="6" height="10"/>
        <rect x="5" y="28" width="6" height="14"/>
    </g>
    <g fill="#3F51B5">
        <circle cx="8" cy="16" r="3"/>
        <circle cx="16" cy="18" r="3"/>
        <circle cx="24" cy="11" r="3"/>
        <circle cx="32" cy="13" r="3"/>
        <circle cx="40" cy="9" r="3"/>
        <polygon points="39.1,7.2 31.8,10.9 23.5,8.8 15.5,15.8 8.5,14.1 7.5,17.9 16.5,20.2 24.5,13.2 32.2,15.1 40.9,10.8"/>
    </g>
</svg>
Красная рамка вокруг иконки - это область видимости viewport. Вот эти отступы и сохраняются при вставке в html. Изменяя атрибуты viewportи viewBox можно убрать отступы.
В примере ниже сохраняется масштаб 1:1, но уменьшается область просмотра и отступы практически уменьшаются.

<svg version="1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"
 style="border:1px solid crimson" >
    <g fill="#00BCD4">
        <rect x="37" y="18" width="6" height="24"/>
        <rect x="29" y="26" width="6" height="16"/>
        <rect x="21" y="22" width="6" height="20"/>
        <rect x="13" y="32" width="6" height="10"/>
        <rect x="5" y="28" width="6" height="14"/>
    </g>
    <g fill="#3F51B5">
        <circle cx="8" cy="16" r="3"/>
        <circle cx="16" cy="18" r="3"/>
        <circle cx="24" cy="11" r="3"/>
        <circle cx="32" cy="13" r="3"/>
        <circle cx="40" cy="9" r="3"/>
        <polygon points="39.1,7.2 31.8,10.9 23.5,8.8 15.5,15.8 8.5,14.1 7.5,17.9 16.5,20.2 24.5,13.2 32.2,15.1 40.9,10.8"/>
    </g>
</svg>

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

7
  • Спасибо за разъяснения. Иконки, к сожалению, не совсем однотипные. Поэтому простая автозамена не подойдет.
    – cronfy
    14 фев 2017 в 12:56
  • @cronfy В той иконке, что Вы указали в шапке поста, совсем надо убрать отступы? Кстати обратите внимание на строку в моих примерах - style="border: 1px solid crimson;" Вот она и выявляет отступы. 14 фев 2017 в 13:01
  • Это не автоматический вариант. 14 фев 2017 в 13:22
  • @Alexandr_T да, нужно убрать совсем, абсолютно. Чтобы получилось так: gist.github.com/cronfy/e3b1df6b31c709910a9fd4ce8aab45f0 (тут я руками подправил viewbox и удалил width и height, и на всякий случай background).
    – cronfy
    14 фев 2017 в 13:31
  • @cronfy отлично! всё правильно сделали - viewBox="128 56.4 581 468" , надо еще убирать всю служебную информацию, которую люстра оставляет xml:space="preserve" она ни на что не влияет, и групповые теги<g> в текущем варианте лишние 14 фев 2017 в 13:45
6

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

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

Он требует 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
12
  • Но ведь наверняка в nodejs есть специализированные штуки для svg?
    – Qwertiy
    16 фев 2017 в 12:36
  • @cronfy я понял, что отступы убираются за счет увеличения размеров иконки. Не помешает в вашем проекте? 16 фев 2017 в 12:36
  • @Alexandr_T, так он это и хотел.
    – Qwertiy
    16 фев 2017 в 12:37
  • 1
    @Qwertiy наверняка, но я не нашел рабочих модулей npm, впрочем, я не очень в них разбираюсь. Если кто-то подскажет, какой модуль можно использовать, будет здорово, потому что тогда получится перевести скрипт на gulp.
    – cronfy
    16 фев 2017 в 12:40
  • 3
    @Alexandr_T собственно, задача была обработать иконки ДО использования в проекте. Чтобы можно было вставлять их в контейнер и растягивать на всю ширину, а не подгонять по отступам. И нормально центрировать. Конечно, если уже подогнанные иконки обработать скриптом, отображение поедет, нужно после обработки подправить css и убрать ненужные более смещения.
    – cronfy
    16 фев 2017 в 12:59
4

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

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;
}
<p>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="836.2px" height="581.1px" viewBox="0 0 836.2 581.1" enable-background="new 0 0 836.2 581.1" xml:space="preserve">
<g>
	<g>
		<g>
			<path d="M440.4,119.9h-1c-6.7,0-12.1,5.4-12.1,12.1s5.4,12.1,12.1,12.1h1c6.7,0,12.1-5.4,12.1-12.1     C452.5,125.3,447.1,119.9,440.4,119.9z"/>
			<path d="M657.2,249.3c-4.7-4.7-12.4-4.7-17.1,0l-7.8,7.8l-7.8-7.8c-4.7-4.7-12.4-4.7-17.1,0c-4.7,4.7-4.7,12.4,0,17.1l7.8,7.8     l-7.8,7.8c-4.7,4.7-4.7,12.4,0,17.1c2.4,2.4,5.5,3.5,8.6,3.5c3.1,0,6.2-1.2,8.6-3.5l7.8-7.8l7.8,7.8c2.4,2.4,5.5,3.5,8.6,3.5     s6.2-1.2,8.6-3.5c4.7-4.7,4.7-12.4,0-17.1l-7.8-7.8l7.8-7.8C661.9,261.7,661.9,254,657.2,249.3z"/>
			<path d="M576,249.3c-4.7-4.7-12.4-4.7-17.1,0l-7.8,7.8l-7.8-7.8c-4.7-4.7-12.4-4.7-17.1,0c-4.7,4.7-4.7,12.4,0,17.1l7.8,7.8     l-7.8,7.8c-4.7,4.7-4.7,12.4,0,17.1c2.4,2.4,5.5,3.5,8.6,3.5s6.2-1.2,8.6-3.5l7.8-7.8l7.8,7.8c2.4,2.4,5.5,3.5,8.6,3.5     c3.1,0,6.2-1.2,8.6-3.5c4.7-4.7,4.7-12.4,0-17.1l-7.8-7.8l7.8-7.8C580.8,261.7,580.8,254,576,249.3z"/>
			<path d="M666.3,149.5H517.7v-41c0-16.7-7.7-32-21.1-41.9c-13.4-9.9-30.3-12.9-46.3-8c-0.2,0.1-0.3,0.1-0.5,0.2l-76.5,27h-64.1     l-76.5-27c-0.2-0.1-0.3-0.1-0.5-0.2c-16-4.9-32.8-1.9-46.3,8c-13.4,9.9-21.1,25.2-21.1,41.9v41.3c-20.9,2.6-37.2,20.4-37.2,42     v290.5c0,23.4,19,42.4,42.4,42.4h496.4c23.4,0,42.4-19,42.4-42.4V191.9C708.7,168.5,689.7,149.5,666.3,149.5z M387.4,144.1h15.1     c6.7,0,12.1-5.4,12.1-12.1s-5.4-12.1-12.1-12.1h-15.1v-13.4l70.1-24.7c8.5-2.5,17.4-0.9,24.6,4.4c7.2,5.3,11.3,13.5,11.3,22.5     v46.9c0,9-4.1,17.1-11.3,22.5c-7.1,5.3-16.1,6.9-24.6,4.4l-70.1-24.7V144.1L387.4,144.1z M373.2,178.2l41.7,14.7l27.1,46.9     l-13.8-2.4c-5.8-1-11.4,2.3-13.5,7.8l-4.8,13.2l-46.3-80.2L373.2,178.2L373.2,178.2z M319.2,110h44v44h-44V110z M321.9,178.2     l-46.3,80.2l-4.8-13.2c-2-5.5-7.7-8.8-13.5-7.8l-13.8,2.4l27.9-48.3l37.7-13.3L321.9,178.2L321.9,178.2z M189,108.5     c0-9,4.1-17.1,11.3-22.5c4.9-3.6,10.7-5.5,16.6-5.5c2.7,0,5.4,0.4,8,1.2l70.1,24.7v13.4h-53c-6.7,0-12.1,5.4-12.1,12.1     c0,6.7,5.4,12.1,12.1,12.1h53v13.4l-70.1,24.7c-8.5,2.5-17.4,0.9-24.6-4.4c-7.2-5.3-11.3-13.5-11.3-22.5V108.5L189,108.5z      M684.4,482.4c0,10-8.1,18.2-18.2,18.2H169.9c-10,0-18.2-8.1-18.2-18.2v-35.3h532.7L684.4,482.4L684.4,482.4z M684.4,422.9H151.8     v-60.5h532.7L684.4,422.9L684.4,422.9z M684.4,338.2H151.8V191.9c0-9.4,7.2-17.1,16.3-18.1c3.5,9.2,9.5,17.4,17.8,23.5     c9.2,6.8,19.9,10.3,30.9,10.3c5.1,0,10.3-0.8,15.3-2.3c0.2-0.1,0.3-0.1,0.5-0.2l3.7-1.3l-26.7,46.3c-2.3,4.1-2.1,9.1,0.6,13     c2.7,3.9,7.4,5.8,12,5l29.4-5.1l10.2,28c1.6,4.4,5.6,7.5,10.3,7.9c0.4,0,0.7,0,1,0c4.3,0,8.3-2.3,10.5-6.1l59.1-102.5L402,292.9     c2.2,3.8,6.2,6.1,10.5,6.1c0.3,0,0.7,0,1,0c4.7-0.4,8.7-3.5,10.3-7.9l10.2-28l29.4,5.1c4.6,0.8,9.3-1.1,12-5     c2.7-3.9,2.9-8.9,0.6-13l-25.9-44.9c0.1,0,0.1,0,0.2,0.1c5.1,1.5,10.2,2.3,15.3,2.3c11,0,21.8-3.5,30.9-10.3     c8.3-6.1,14.4-14.3,17.8-23.6h151.9c10,0,18.2,8.1,18.2,18.2L684.4,338.2L684.4,338.2z"/>
		</g>
	</g>
</g>
</svg>
</p>

<button>Crop</button>

4
  • Отлично, алгоритм рабочий! А как можно это перевести под node?
    – cronfy
    14 фев 2017 в 13:36
  • @cronfy, ну как-то должно быть можно, но я не знаю :) В крайнем случае можно потыкать phantomjs.
    – Qwertiy
    14 фев 2017 в 13:48
  • Про phantomjs касательно генерации svg есть упоминание в этой статье: smashingmagazine.com/2014/05/… , кандидат на роль отправной точки.
    – cronfy
    14 фев 2017 в 15:14
  • Ну вот, вроде получилось. Посмотрите мой ответ.
    – cronfy
    16 фев 2017 в 12:30
0

Можно использовать плагины для 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/'))
});
4
  • 2
    Из документации: "remove viewBox attribute when possible (disabled by default)". Но ведь надо не удалить, а изменить.
    – Qwertiy
    14 фев 2017 в 12:20
  • 1
    Спасибо, но это не помогло. Я добавил в вопрос пример иконки. После обработки вашим кодом в dest оказывается точно такая же иконка, только минифицированная и без viewbox. Но отступы никуда не деваются :(
    – cronfy
    14 фев 2017 в 12:50
  • @cronfy извините, не ту опцию дал. Вот список всех доступных опций, посмотрите - github.com/svg/svgo#what-it-can-do. Возможно, вам нужна removeDimensions. 14 фев 2017 в 13:21
  • 1
    @Vadizar я смотрел этот список перед тем как задать вопрос :) remove dimensions просто удалит width и height, а для достижения цели нужно еще подправить viewbox.
    – cronfy
    14 фев 2017 в 13:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.