Библиотеки:
imagemin = require('gulp-imagemin')
+
$ = {
svgSprite : require('gulp-svg-sprite'),
svg2png : require('gulp-svg2png')
}
Имеется таск:
gulp.task('svgSprite', function() {
return gulp.src('путь до svg/*.svg', {cwd: ''})
.pipe(cache(imagemin({
interlaced: true,
progressive: true,
optimizationLevel: 3,
svgoPlugins: [{removeViewBox: false}]
})))
.pipe($.svgSprite(configSvg))
.on('error', function(error) {
new Elixir.Notification('SVG CRASHED >.<');
})
.pipe(gulp.dest('./'))
.pipe($.svg2png())
.pipe(gulp.dest('resources/assets/'));
});
Спрайт:
<svg fill="#000000" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M0 0h24v24H0z" fill="none"/>
<path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/>
</svg>
Да и любой другой, всегда генерит 400 на 300.
Получается мелкая картиночка на большом холсте и как эти png'шки в спрайт превращать? (исп.gulp.spritesmith получаются огромные картинки)
Пробовал перед .pipe($.svg2png()) добавить filter('/**/*.svg), но разницы нет, ведь потоком svg идут. Пробовал отдельно, менял местами, вообще ничего не понимаю. Думал дело в минификации, так же все равно, по докам я могу задавать ручками размеры у svg2png, но мне это не нужно. СВГшки имеют нужный размер, бывают мелкие, бывают чуть побольше. В чем проблема?
Уже пукан горит, все работает кроме этой ереси.
Спасиб.
