Как отформатировать svg спрайт?

Question

[HelpSophie]

Собираю svg спрайт с помощью gulp-svg-sprite. В stack mode, если это важно.
На выходе получаю минифицированный svg, т.е. в одну строку.
Есть какой-нибудь вариант настройки, чтобы код в результате был форматированным обычной "лесенкой" по вложенности тегов? В идеале с пустой строкой между элементами спрайта.

Comments

[Froggyweb]

А зачем тебе форматированный код спрайта?

[HelpSophie]

Froggyweb, проще id'шки и размеры смотреть :)

[Froggyweb]

HelpSophie,ты что-то не то делаешь. glivera-team.github.io/svg/2016/06/13/svg-sprites-... вот отличная статья.
Если нужны id внутри элемента проще смотреть исходник, а не спрайт

[HelpSophie]

Froggyweb, исходник - это папка с файлами. И статья 16го года. Сейчас в плагин встроен svgo, если я все правильно понимаю и cheerio вообще лишним стал. Я по крайней мере без него живу.

Делаю так

const configSVG = {
  mode: {
    stack: true // Create a «stack» sprite
  }
};
};

gulp.task("sprite", function () {
  return gulp.src(["source/img/svg-src/*.svg"])
    .pipe(svgSprite(
      configSVG
    ))
    .pipe(rename("sprite.svg"))
    .pipe(gulp.dest("source/img"));

});

Но не важно, в symbol mode тоже самое.

[HelpSophie]

xdevelx, супер, спасибо! В ответы напишете?

Может быть, вы еще и на этот вопрос знаете хороший ответ: Какой правильный плагин для группировки @media без конфликтов с sourcemap?

Answer 1

[xdevelx]

Если отключить svgo, то

const configSVG = {
  transform: [],
  mode: {
    stack: true // Create a «stack» sprite
  }
};

Если сконфигурировать svgo, то

const configSVG = {
  transform: [{svgo: {
    js2svg: {pretty: true}, // Отключаем минификацию svg.
    plugins: [
      {cleanupListOfValues: {floatPrecision: 0}},
      {inlineStyles: {onlyMatchedOnce: false}},
      {removeAttrs: {attrs: ['stroke', 'data-name']}},
      {removeAttributesBySelector: {selector: ':not([fill="none"])', attributes: ['fill']}}
    ]
  }}],
  mode: {
    stack: true // Create a «stack» sprite
  }
};

По конфигу svgo https://github.com/svg/svgo#what-it-can-do