drdk / grunt-dr-svg-sprites

Grunt plugin to create SVG sprites with PNG fallbacks at needed sizes
113 stars 19 forks source link

Sprites stacking on top of each other #31

Closed isobar-ranesco closed 10 years ago

isobar-ranesco commented 10 years ago

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 }
                    ]
                }
            }
        }
    }

icon

mechanicalduck commented 10 years ago

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 commented 10 years ago

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 commented 10 years ago

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 commented 10 years ago

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 commented 10 years ago

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