sprite error for svgs created with sketch

[bencooling]

I have created multiple svg files in bohemian codings sketch app. I run the grunt-dr-svg-sprites task but it generates a sprite file that renders:

This page contains the following errors: ... Namespace prefix sketch for type on path is not defined

Is there a way around this? Thanks

[phloe]

Looks like Sketch SVG's use a sketch namespace in them... Unfortunately the spritebuilder removes the namespace declaration but doesn't remove any use of the namespace in elements. I doubt it has any value in a sprite though - they can be safely removed.

Until I get a fix in for this you could manually remove the cruft from your SVG's. Look for stuff like sketch:type="MSShapeGroup":

<path stroke="#979797" fill="#D8D8D8" sketch:type="MSShapeGroup"

[bencooling]

Thanks for the quick response. I wrote a sketchSVG task to cleanup my svg file if anyone else comes across this:

grunt.config('replace', {
  sketchSVG: {
    src: ['public/assets/images/sprite.svg'],
    overwrite: true,
    replacements: [
      {from: /(sketch:type=".+?)"/g, to: ''},
      {from: /<use xlink:href="#a"\/>/g, to: ''},
      {from: /xlink:href="#a"/g, to: ''}
    ]
  }
});
grunt.loadNpmTasks('grunt-text-replace');

Also of note is once the sketch namespace was removed I got this error:

Namespace prefix xlink for href on use is not defined

[phloe]

Yeah, it's actually any namespace that will get clobbered currently - so xlink is affected too.

Maybe I should make a note in the README about unsupported stuff ;)

[benfrain]

The latest changes to the plugins of SVGO aren't in https://github.com/sindresorhus/grunt-svgmin as that update hasn't been pushed to NPM. Another solution (what I have been doing) is to head over to the SVGO repo and copy the _collections.js (which includes the namespace updates for Sketch) file: https://github.com/svg/svgo/blob/master/plugins/_collections.js

Now, browse to the node modules folder of this project and replace the existing _collections.js file (inside the svgo/plugins folder) with the one you just copied.

[phloe]

FWIW used namespaces (like xlink) won't get clobbered in the new 0.9.7 version :)

dr-svg-sprites also uses SVGO internally (there's also options.svgo available now) - If only they would update the module on npm the sketch namespaces wouldn't be a problem (in the sprites) any more... https://github.com/svg/svgo/pull/180

[hiulit]

Isn't this issue already fixed?

I'm using Sketch for creating the SVGs and I don't have any problem using this plugin...

[phloe]

Yeah - I think the to features I added (namespace-support and options.svgo) did the trick :)