New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

sprite error for svgs created with sketch #21

Closed
bencooling opened this Issue Jun 5, 2014 · 7 comments

Comments

Projects
None yet
4 participants
@bencooling
Copy link

bencooling commented Jun 5, 2014

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

@rasmusfl0e

This comment has been minimized.

Copy link
Contributor

rasmusfl0e commented Jun 5, 2014

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

This comment has been minimized.

Copy link

bencooling commented Jun 7, 2014

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
@rasmusfl0e

This comment has been minimized.

Copy link
Contributor

rasmusfl0e commented Jun 7, 2014

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

This comment has been minimized.

Copy link
Contributor

benfrain commented Jun 10, 2014

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.

@rasmusfl0e

This comment has been minimized.

Copy link
Contributor

rasmusfl0e commented Jun 25, 2014

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... svg/svgo#180

@hiulit

This comment has been minimized.

Copy link

hiulit commented Apr 1, 2015

Isn't this issue already fixed?

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

@rasmusfl0e

This comment has been minimized.

Copy link
Contributor

rasmusfl0e commented Apr 3, 2015

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

@rasmusfl0e rasmusfl0e closed this Apr 3, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment