Discrepancy in size between generated SVG and PNG sprite

[benfrain]

Currently experiencing an issue where every generated PNG sprite is slightly bigger than the SVG. This is compounded the larger the sprite. As an example:

Generated SVG: 1860 x 60px Generated PNG: 1970 x 64px

As you can imagine, this manifests in the background images being in the wrong position when the fallback PNG is called. Is this a known issue?

[phloe]

Hmmm, do any of the source svg's have width/height and viewbox attributes that don't match values? eg, width="400" height="300" viewbox="0 0 800 500" instead of something sane like width="400" height="300" viewbox="0 0 400 300".

[benfrain]

@rasmusfl0e no, just checked all 30 individual images that make up the sprite and they all match e.g. width="17" height="28" viewBox="0 0 17 28"

[benfrain]

Just created a test making the sprites two ways: once with grunt-dr-svg-sprites and then also dropping the individual images on http://iconizr.com/ (makes vertical sprites by default so not an exact apples to apples test).

While the sprites mismatch in size with grunt-dr-svg-sprites they do not with Iconizr – with that tool they are an exact 1:1 match with the same background-size: setting.

[phloe]

Do you have any idea of how long this has been happening? v0.5.5 is 1-2 months old now... Either it has a bug since then - or there's a bug caused by a dependency. I'm wondering if it's something to do with the PhantomJS dependency (used for making the fallbacks). Could I get you to drill all the way down into node_modules/grunt-dr-svg-sprites/node_modules/dr-svg-sprites/node_modules/phantomjs/package.json and check the version at the top (should say something like "1.9.7-3")?

[benfrain]

Yes, I have "version": "1.9.7-3", – it's possible it has been happening for some time as I have only just started looking carefully at the PNG versions on older devices. That's where I saw positioning was off and then took to creating a reduction case.

[phloe]

It seems like I'm happily avoiding this bug any which way I try...

It could be anything like combinations of config variables that trigger a bug, svg source containing something the sprite builder doesn't handle correctly or maybe just a math error when telling phantomjs what size to render at...

Is there a way I could take a look at your reduced case?

[benfrain]

Hi @rasmusfl0e – yes, I think you are correct. However, it could merely be my misunderstanding of the settings. I have set up a test repo here which, if you open the index.html file you will see the difference between the two images. https://github.com/benfrain/grunt-dr-svg-spriteTest

However, I can now also make them 'work' by making sure I don't have an odd number refSize. For example, if I set this:

"svg-sprites": {
    "ui-separate": {
        options: {
            spriteElementPath: "img",
            spritePath: "img/ui",
            cssPath: "",
            sizes: {
                std: 18
                //,small: 13
            },
            refSize: 17,
            unit: 20
        }
    }
}

I get the issue. However if I set an equal refSize like this:

"svg-sprites": {
    "ui-separate": {
        options: {
            spriteElementPath: "img",
            spritePath: "img/ui",
            cssPath: "",
            sizes: {
                std: 18
                //,small: 13
            },
            refSize: 18,
            unit: 20
        }
    }
}

The two variants are a exact 1:1 size. Is that what you would expect to happen? Is it sub-pixel rendering or something similar in Phantom? Anyway, at least I can workaround it and I apologise for any wasted time!

[phloe]

Good news: v0.9.0 doesn't require options.sizes and options.refSize. So if your SVG elements already have the correct dimensions you're good to go :)