Gulp.js - это инструмент для автоматизации задач веб-разработки. Он позволяет объединять и минимизировать файлы, генерировать спрайты и многое другое. Одним из популярных плагинов для работы с SVG-спрайтами в Gulp.js является gulp-svg-sprite.
Одной из особенностей SVG-спрайтов является то, что они создаются путем объединения нескольких отдельных SVG-файлов в один. В процессе объединения может возникнуть необходимость в некоторых преобразованиях SVG-кода, чтобы он корректно отображался в спрайте.
Один из распространенных случаев удаляения атрибута stroke-width в gulp-svg-sprite связан с тем, что при объединении SVG-файлов в спрайт может возникнуть ситуация, когда атрибут stroke-width имеет разные значения в разных файловых брех. Например, у одного файла stroke-width="1", а у другого - stroke-width="2".
В результате будет подобная структура спрайта:
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-1">
<path d="M0 0h24v24H0z" stroke="black" fill="none" />
</symbol>
<symbol id="icon-2">
<path d="M0 0h24v24H0z" stroke="black" fill="none" />
</symbol>
</svg>
Если элементы спрайта имеют различные значения атрибута stroke-width, то статично установить stroke-width с определенным значением будет невозможно. В таком случае оставить stroke-width="-" было решено из-за того, что считается, что спрайт - это набор символов, а каждая форма там находится в своем мире, определяющем свои стили.
Однако, если вы не хотите, чтобы gulp-svg-sprite удалял атрибут stroke-width, возможностей для настройки этого есть несколько:
1. Задайте значение stroke-width явно в каждом SVG-файле перед объединением. Таким образом, все элементы спрайта будут иметь одно и то же значение stroke-width, и gulp-svg-sprite не будет его удалять.
2. Используйте альтернативный плагин для работы с SVG-спрайтами в Gulp.js, который не удаляет атрибут stroke-width. Например, svg-sprite или gulp-svgstore.
3. Измените настройки gulp-svg-sprite таким образом, чтобы он не удалял атрибут stroke-width. В секции конфигурации файла gulpfile.js добавьте опцию removeStyleElement и установите ее в значение false:
gulp.task('svg-sprite', function () {
return gulp.src('src/svg/*.svg')
.pipe(svgSprite({
removeStyleElement: false
}))
.pipe(gulp.dest('dist'));
});
Обратите внимание, что изменение этой настройки может повлиять на другие атрибуты и стили в SVG-файлах, поэтому рекомендуется тестировать результаты после внесения изменений.
В конце концов, причина, по которой gulp-svg-sprite удаляет атрибут stroke-width, связана с тем, что этот плагин стремится к созданию компактного и оптимизированного спрайта, управляемого общими стилями, а не индивидуальными атрибутами для каждого элемента спрайта.