Sprites stacking on top of each other

[isobar-ranesco]

Hey guys,

I have found that the first and fourth image stack on top of each other (see attached image), i have no idea why this is happening. This never happened previously. Can any1 give me any advice?

This is my grunt setup:

    'svg-sprites': {
        icons : {
            options: {
                spriteElementPath: '<%= SOURCE_PATH %>/svgs',
                spritePath: '<%= TEMP_PATH %>/images',
                cssPath: '<%= TEMP_PATH %>/styles',
                cssPrefix: 'tmp',
                template: 'source/node_modules/grunt-dr-svg-sprites/templates/stylesheet.hbs',
                sizes: {
                    small: 24,
                    medium: 36,
                    large: 48
                },
                refSize: 'large',
                cssPngPrefix: '.no-svg',
                layout: 'vertical',
                unit: 12,
                svgo: {
                    plugins: [
                        { removeUselessStrokeAndFill: false }
                    ]
                }
            }
        }
    }

[mechanicalduck]

The reason for this is that either width/height and/or viewBox attributes of the affected svg element are missing or empty, all of them are required to have a value. As the first element is always positioned at 0,0, it is probably the 4th one then.

[phloe]

I think it might have something to do with attributes (most likely transform here) moved from groups () to elements (and the groups maybe even removed) by on of the svgo plugins... I think it's time to disable a couple of plugins by default in dr-svg-sprites (removeUselessStrokeAndFill being one of them) ;)

[phloe]

Ok - it's definitely groups (any element other than path really) that don't get the transforms transferred: https://github.com/svg/svgo/issues/250

I'm adding some config for svgo so that the most incriminating plugins (moveGroupAttrsToElems, collapseGroups, removeUselessStrokeAndFill) are disabled at default. It's live now in dr-svg-sprites version 0.9.14!

[isobar-ranesco]

Thanks for the replies guys! As per rasmusfl0e suggestions i added in a bunch of svgo configurable options and this seemed to work. So my grunt task looks like the following:

    'svg-sprites': {
        icons : {
            options: {
                spriteElementPath: '<%= SOURCE_PATH %>/svgs',
                spritePath: '<%= TEMP_PATH %>/images',
                cssPath: '<%= TEMP_PATH %>/styles',
                cssPrefix: 'tmp',
                template: 'source/node_modules/grunt-dr-svg-sprites/templates/stylesheet.hbs',
                sizes: {
                    small: 24,
                    medium: 36,
                    large: 48
                },
                refSize: 'large',
                cssPngPrefix: '.no-svg',
                layout: 'vertical',
                unit: 12,
                svgo: {
                    plugins: [
                        { removeViewBox: false },
                        { removeUselessStrokeAndFill: false },
                        { convertColors: false },
                        { convertPathData: false },
                        { moveGroupAttrsToElems: false },
                        { cleanupIDs: false},
                        { cleanupAttrs: false },
                        { convertColors: false },
                        { removeUselessStrokeAndFill: false },
                        { mergePaths: false }
                    ]
                }
            }
        }
    },

I just find it weird that i have the same setup on another co-workers machine and it wasn't happening on his. Like i said previously it was working fine when i first installed it, oh well at least its fixed now.

[phloe]

@isobar-ranesco must have had something to do with the package.json of dr-svg-sprites and grunt-dr-svg-sprites not using strict versions for dependencies; the svgo udate slipped in with the bugs :(

I'll look into locking versions or shrinkwrapping maybe.