Cleanup svg

cleanup-svg.js

  cleanupSvg(svg) {
    return [
      // some useless stuff for us
      // that svgo doesn't remove
      /<title>.*<\/title>/gi,

      // remove hardcoded dimensions
      / +width="\d+(\.\d+)?(px)?"/gi,
      / +height="\d+(\.\d+)?(px)?"/gi,

      // remove fill
      / +fill=\"(none|#[0-9a-f]+)\"/gi,

      // Sketch.app shit
      / +sketch:type=\"MSShapeGroup\"/gi,
      / +sketch:type=\"MSPage\"/gi,
      / +sketch:type=\"MSLayerGroup\"/gi,
    ]
      .reduce((acc, re) => {
        return acc.replace(re, "")
      }, svg)
      .trim()
  }

If you need mine:

var fileString = file.contents.toString()

      _.each([
        /<title>.*<\/title>/gi,
        /<desc>.*<\/desc>/gi,
        /<!--.*-->/gi,
        /<defs>.*<\/defs>/gi,
        / +sketch:type=\"MSShapeGroup\"/gi,
        / +sketch:type=\"MSPage\"/gi,
        / +sketch:type=\"MSLayerGroup\"/gi,
        / +fill=\".*\"/gi
      ], function( regex ) {
        fileString = fileString.replace(regex, '')
      })

@kud we've also got svgo loader which handles most of it

@bloodyowl answered on gitter.

SVGO is much better for this job

@kud You fill replacement is buggy and might remove some tags

@ai svgo doesn't remove those values since it's really opinonated from our usage (fill/width/height from css only)

@kud I've added some of your removal

Like I said to Kud, "xmlns:sketch" isn't mandatory, you can remove it too ;)

<title> is important for accessibility though