SVG and Grunt turning output partially black

Question

I've just installed Grunt and grunt-svgstore and am using it to compile my folder of SVG's into one application.svg where each icon has a unique id that I can reference using:

It works fine for some icons, but for others, part of their shapes turn black. In the case of the ruby logo I am linking to above, it shows like: http://cl.ly/image/0X2J0f3i0C1X/Screen%20Shot%202014-08-03%20at%2011.02.47.png

The actually SVG file can be found here: http://cl.ly/2k012T020d2S/ruby-logo.svg

If I open the ruby-logo.svg file in illustrator, it looks fine. I have rexported it, ensured all settings are correct and it still happens.

Any suggestions?

Thanks, Neil

Answer 1

Use the "style" option instead..

eg:

svgstore: {
  options: {
    prefix : 'icon-', // This will prefix each ID
    svg: {
      viewBox : '0 0 100 100',
      xmlns: 'http://www.w3.org/2000/svg',
      style: 'display:none;' // This line might help you!
    },
    cleanup: ['fill','stroke']
  },
  default: {
    files: {
      '<%= build_dir %>/assets/<%= pkg.name %>-<%= pkg.version %>.svg': '<%= app_files.svgIcons %>'
    }
  }
},

Answer 2

Solved by adding the following styles to the application.svg import at the top of my document:

width: 0;
height: 0;
visibility: hidden;