Option 1: Deleting ViewBox Source Files
Use the gulp-imagemin and imagemin-svgo plugins to remove the ViewBox:
var gulp = require('gulp'), svg-sprites = require('gulp-svg-sprites'), imagemin = require('gulp-imagemin'), imageminSvgo = require('imagemin-svgo'); gulp.task('svg-sprites:build', function () { return gulp.src(options.theme.img_svg_src + '*.svg') .pipe(imagemin([ imageminSvgo({ plugins: [ {removeViewBox: true} ] }) ])) .pipe(svgSprite()) .pipe(gulp.dest(options.theme.img_src + 'dict')) .pipe(filter(options.theme.img_src + 'dict/svg/*.svg')) .pipe(gulp.dest(options.theme.img_src + 'dict')); });
Option 2: replace the SVG sprite with the icon font
It would be preferable to use the iconic font instead of sprites. And this method has several advantages:
- Lower font weight than sprite;
- CSS styling flexibility;
- Less weight CSS.
To generate an icon font, I would advise this combination:
// Generate icon font gulp.task('iconfont', function() { var fontName = 'icon-font', cssClass = 'i'; // Исходные SVG-файлы gulp.src(['./fonts/icon-font/*.svg']) .pipe(iconfontCss({ fontName: fontName, cssClass: cssClass, path: './styl/mixins/icon-font.styl', targetPath: '../../styl/components/font/icon-font.styl', fontPath: '../fonts/' })) .pipe(iconfont({ fontName: fontName, prependUnicode: true, normalize: true, formats: ['svg','ttf','woff','woff2'] })) .pipe(gulp.dest('./public/fonts/')); });
Bowls for styles that come from this line path: './styl/mixins/icon-font.styl' will look like this:
@font-face font-family "<%= fontName %>" src: url('<%= fontPath %><%= fontName %>.woff2') format('woff2'), url('<%= fontPath %><%= fontName %>.woff') format('woff'), url('<%= fontPath %><%= fontName %>.ttf') format('truetype'), url('<%= fontPath %><%= fontName %>.svg#<%= fontName %>') format('svg') [class*="i-"] position relative display inline-block width 1em height 1em &:before font 14px '<%= fontName %>' font-size inherit text-rendering auto speak none font-variant normal text-transform none color inherit position absolute top 50% left 50% transform translate(-50%, -50%) <% _.each(glyphs, function(glyph) { %> .<%= cssClass %>-<%= glyph.fileName %>:before content "\<%= glyph.codePoint %>" <% }); %>
After generating the font, all you need to do is connect the generated CSS to your site or ingress it to the main CSS file, and then use it like this:
<span class="i-<<имя исходного SVG-файла>>"></span>
If I generate a png-sprite from the final svg (gulp-svg2png plugin) and connect it instead of svg, then it is displayed normally in all browsers. those. I understand that this is due to the interpretation of the browser.
