Fails to generate sprite with SVGs from Illustrator

[WillsB3]

Am I doing something wrong here?

Things work (kind of..) if I export as SVG from sketch (apart from paths with boolean operations seem to cause problems, but that's perhaps a different issue), however whenever I try to export from illustrator the SVG is just blank. If i look at the source of the SVG there several occurrences of "NaN".

Here's the export settings I'm using:

Here's my gruntfile config (using grunt-load-config YAML syntax):

options:
  prefix: 'sprite'

sprite:
  options:
    spriteElementPath: '<%= src.assets %>/icons'
    spritePath: '<%= tmp.assets %>/icons/sprite.svg'
    cssPath: '<%= tmp.css %>/sprite.css'

The generated CSS looks like this:

.sprite-test {
    width: NaNpx;
    height: NaNpx;
    background-position: 0 0;
}

.sprite-test {
    background-size: NaNpx NaNpx;
    background-repeat: no-repeat;
    background-image: url("../assets/icons/sprite.png");
}

.svg .sprite-test {
    background-image: url("../assets/icons/sprite.svg");
}

If I open the very same SVG which Illustrator saved and then re-export it with sketch, it works.

Here's some test SVGs:

• Working, exported via Sketch: http://cl.ly/233d2p0u1h3Z
• Not working, exported via Illustrator: http://cl.ly/3f0u1e2f390C

[phloe]

Looks like width and height attributes are omitted from the illustrator svg. Maybe because of the Responsive option?

Illustrator:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 53.5 53.5" enable-background="new 0 0 53.5 53.5" xml:space="preserve">

Sketch:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="54px" height="54px" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">

[WillsB3]

That fixed it. Thanks!

Do you want me to fork and add this tidbit to the readme?

[phloe]

@WillsB3 A Troubleshooting section might be a good idea :) - though I would prefer it being added to the dr-svg-sprites readme. This repo is basically just a thin Grunt wrapper ;)

[WillsB3]

Incase anyone else experiences this problem. The option that needs to be disabled is here:

[WillsB3]

@rasmusfl0e Done. See https://github.com/drdk/dr-svg-sprites/pull/29.

Thanks for this great utility :+1:

[phloe]

Good stuff - merged! :)