Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP


Optimise SVG (WIP) #6

kud opened this Issue · 15 comments

3 participants


We need to optimise svg-symbols.svg. It shouldn't have <desc> tag for SEO context.

(bad) example:


Just a memo for a future PR.

var gulp       = require('gulp')

var through2   = require('through2')

var plumber    = require('gulp-plumber')
var svgSymbols = require('gulp-svg-symbols')
var filter     = require('gulp-filter')
var imagemin   = require('gulp-imagemin')

module.exports = function() {

  var cssFilter = filter('**/*.css')
  var svgFilter = filter('**/*.svg')

  return gulp.src('src/frontend/glyphicons/**/*.svg')
    .pipe( plumber() )
    .pipe( through2.obj(function ( file, enc, cb ) {

      var fileString = file.contents.toString()

      var titleRegex = /<title>.*<\/title>/gi
      var descRegex = /<desc>.*<\/desc>/gi
      var commentRegex = /<!--.*-->/gi
      var defsRegex = /<defs>.*<\/defs>/gi
      var mSShapeGroupRegex = / +sketch:type=\"MSShapeGroup\"/gi
      var mSPageRegex = / +sketch:type=\"MSPage\"/gi

      fileString = fileString.replace(titleRegex, '')
      fileString = fileString.replace(descRegex, '')
      fileString = fileString.replace(commentRegex, '')
      fileString = fileString.replace(defsRegex, '')
      fileString = fileString.replace(mSShapeGroupRegex, '')
      fileString = fileString.replace(mSPageRegex, '')

      file.contents = new Buffer( fileString )

        this.push( file )

    }) )
        svgId: 'pmd-Svg--%f',
        className: '.pmd-Svg--%f',
        fontSize: 32,
        css: true
    .pipe( cssFilter )
    .pipe( gulp.dest('build') )
    .pipe( cssFilter.restore() )
    .pipe( svgFilter )
    .pipe( gulp.dest('web/assets/images') )


We also should work on dest folder for svg and css. It should be an option, not a filter like I did.


If I understand what you're trying do to, I can make optional the <title> generation.
For the other optimisations it should be made with SVGO, no?

Although for the CSS generation, I'm thinking of implementing the same solutions as the asset-manifest of the gulp-rev plugin.
This ticket has be reopen for that reason :)


Yeah title should be optional.

Plus, SVGO didn't work for me on svgsymbols. (tried with imagemin)


Ok for the title options (see #7)

this plugin use SVGO before combining them.
If you can provide a simple test file and the expected result, I will try to figure out what happen :)


Yes sure, thank you ;)


For the title, can you test with the branch accessibility ?

npm install git:// --save-dev

you can set the option accessibility to false to remove the tag of the SVG.


It's now ok on the 0.1.5 version.
Tell me if there is some other issues with SVGO


Okay I'll check it if it works well, thanks ;)


Ok Now I see what you really want to do :)
We can :

  • remove or merge all <defs> in the same place
  • remove or merge every <styles> (Yes I have encounter this issue quite recently)
  • I'm mot enough used to Sketch, so I don't know what kind of useless thing it puts in the SVG…

I have to dig in grunt-svgstore to see what kind of problems/optimisations they have fixed/done.




I would like to urge you to remove SVGO from this plugin. SVGO has a lot of issues in their most recent release that breaks very foundational things. It would be better to allow people to use something like if they like, or at least allow them the option to turn SVGO off.


I will begin migration this week-end.
I will do this in an another branch so if you have time, you'll be able to test.


@Hiswe I can definitely help testing


@VinSpee you can play with that:

It should do the work & fix @kud issues.

I'm not sure about the api & providing some presets but I still want this to be easy for common users.
I still need to:

  • update the test
  • handle defs
  • handle id

Also, I've seen that gulp-svg-store is doing the same thing as this plugin… don't know if I should maintain this one.


working perfectly here. Please do let us know if you decide to stop maintaining this.

kud commented


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.