Upgrade from v0.3.2 to v1.0.11 -> Changes?

[ti&m AG]

I used this in v0.3.2 in this way:

'svgsprite': {
  img: {
    options: {
      mode: {
        css: false
      },
      recursive: true
    },
    src: ['web/img'],
    dest: ['web/img/gen']
  }
}

In this way, I only a "sprite.svg" file is written into "web/img/gen" directory.

Now I upgraded to the latest version v1.0.11 and I want to have the same behavior: I do this in this way:

'svg_sprite': {
  img: {
    options: {
      mode: {
        css: false
      }
    },
    src: ['web/img/**/*.svg'],
    dest: ['web/img/gen']
  }
}

I see this in my command line:

grunt svg_sprite:img
Running "svg_sprite:img" (svg_sprite) task
Done, without errors
Process finished with exit code 0

The problem is, no "sprite.svg" will be generated. So sth. has changed, but what's needed to change?

[Joschi Kuphal]

Hi @ti-dev,

please try this one (untested):

'svg_sprite': {
  img: {
    options: {
      mode: {
        css: true // <-- this is the important thing
      }
    },
    src: ['web/img/**/*.svg'],
    dest: ['web/img/gen']
  }
}

As of version 1.x, the mode key controls which type of sprite(s) will be created (css, view, defs, symbol or stack — with css and view being traditional CSS sprites). This is not the type of CSS resource that will be created, which you would control via:

mode: {
  css: {
    render: {
      css: true, // <-- render CSS stylesheets
      scss: true // <-- render Sass stylesheets
    }
  }
}

Also, you might want to customize e.g. the sprite file name:

mode: {
  css: {
    sprite: 'my/custom/sprite/name.svg'
  }
}

Please let me know if this works for you!

Cheers,
Joschi

[ti&m AG]

Thank you for the quick reply.

With this configuration, it works to generate the file correctly:

'svg_sprite': {
  img: {
    options: {
      mode: {
        css: {
          bust: false, 
          dest: '.',
          sprite: 'sprite.svg'
        }
      }
    },
    src: ['web/img/**/*.svg'],
    dest: 'web/img/gen'
  }
}

The last problem is, that the id of every svg was before the library upgrade folder1-folder2-imagename. Now it is web--img--folder1--folder2-imagename. So I understand the difference between - and --, so --means directory and that's okay for me. But in the latest version it starts from web/img/ and not from the directory below the source.

I tried it with

cwd: 'web/img/'
src: ['**/*.svg'],
dest: '../gen'

But then I get a lot of >> Source file "folder1/imagename.svg" not found..

[Joschi Kuphal]

First of all, I don't think it's ideal to use "web/img/**/*.svg" as value for the src option, as this will also scan your output directory "web/img/gen" itself and include your generated sprite in the next run.

Second, as far as I understand, cwd (which is correct to use here by the way) doesn't apply to the dest directory. So I suppose you'd rather specify "web/img/gen" as dest.

Oh, and by the way, the "--" is configurable via shape.id.separator. ;)

[ti&m AG]

The dest has a ../ so it is not included into the srcpart. In reality it also does not include in the next svg_sprite task the previously created sprite file. So that's not a problem in my case.

Okay, I use cwdonly for src, so I have

cwd: 'web/img/'
src: ['**/*.svg'],
dest: 'web/gen'

But I get the same error message and the created sprite.svghas the content <svg width="0" height="0" viewBox="0 0 0 0" xmlns=[…]" xmlns:xlink="[…]"></svg>.

[Joschi Kuphal]

Could you please send me your very project files (and directory structure) along with conf complete configuration to [e-mail]? I'll try to figure out what's the problem.

[ti&m AG]

The problem occurs in svg_sprite.js:

var cwd = path.resolve(f.orig.cwd || '.');
// cwd = C:\Projects\myProject\web\img -> looks correct!

f.src.filter(function(filepath)) {
  if (!grunt.file.exists(filepath)) {
    grunt.log.warn('Source file "' + filepath '" not found.');
    // -> here is the output of my error. And filepath = "folder1\imagename.svg"
    // and it is not found because it is not the correct path name!
    // If I do not use cwd I get "web\img\folder1\imagename.svg" and the it works correctly.
    // so sth. is wrong with cwd and building up the filepath variable.
    return false;
  } else {
    return true;
})...

[Joschi Kuphal]

Ah, an important information: You're on Windows. That changes a lot. ;) I'll try to figure out the problem (which obviously is no problem under Linux ...)

[ti&m AG]

Yes, I am working on a Windows machine. That would be really nice if you can take a look into it.
Thanks in advance for your help!

[Joschi Kuphal]

Good news: I could tackle the problem (which affected all platforms, by the way). Thanks for reporting this, support for cwd was completely broken.

To get a quick fix, please replace grunt-svg-sprite's task file tasks/svg_sprite.js with the most recent one. I'll push out an official bugfix release as soon as possible (but want to stay in sync with the svg-sprite version number).

Cheers, Joschi

[ti&m AG]

It works great with your latest tasks/svg_sprite.js file. Thanks a lot!

[Joschi Kuphal]

Thanks for letting me know! Happy spriting! :)