CSS values being set as NaNpx

[sidhuko]

For some reason the CSS output is returning NaNpx, like below

.action-voted {
    width: NaNpx;
    height: NaNpx;
    background-position: -NaNpx 0;
}

[shakyShane]

using illustrator cc?

[thomaswelton]

Makes sure your svgs have width and height attributes

On 18 Jun 2014, at 13:47, James Sidhu [email protected] wrote:

For some reason the CSS output is returning NaNpx, like below

.action-voted { width: NaNpx; height: NaNpx; background-position: -NaNpx 0; } — Reply to this email directly or view it on GitHub.

[thomaswelton]

You can do it in illustrator. But you could also just open the svg in a text editor adding the width and height to the same node that contains the view box

On 18 Jun 2014, at 13:51, Shane Osbourne [email protected] wrote:

using illustrator cc?

— Reply to this email directly or view it on GitHub.

[sidhuko]

Thanks, would you like a PR for this to the README as wasn't obvious error, it just outputted blank images?

[thomaswelton]

You could put one together. @shakyShane would have to merge it though. A better PR or feature would be a warning thrown when running gulp that would say which images are missing dimension attributes and a link to show how to properly export them

On 18 Jun 2014, at 17:14, James Sidhu [email protected] wrote:

Thanks, would you like a PR for this to the README as wasn't obvious error, it just outputted blank images?

— Reply to this email directly or view it on GitHub.

[shakyShane]

@thomaswelton - yeah that would be better.

@jamessidhu - happy to accept a PR on the readme :)

[sidhuko]

I don't think that was the only problem. It seems to be messing up the SVG and unable to provide a PNG fallback

[bhongy]

It might be a good idea to have the plugin looks for width and height from the viewBox attribute. Then, we can have the svg extend to fit its container's width and will be able to set different height for each icon.

[VinSpee]

I agree with @bhongy here. I prefer to strip width and height from all of my SVGs and and treat them as such:

[class*=icons__] {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
}

so they fill whichever container they're in.

[shakyShane]

Can you try v1.0.0 and see if this problem still exists

[reaganfirespotter]

Still seeing this in 1.3.1.

Using "css" mode on gulp-svg-sprite, I'm combining 2 SVGs exported from latest Illustrator using "internal css" setting. I notice that Illustrator puts width and height into the <use> tag. I tried a bunch of different combinations of export settings to try to add it in other places with no success. Also tried adding width and height manually to the file, but still getting the NaN.

Attaching ZIP of 2 input SVGs, 1 input SCSS template, 1 output SCSS map, 1 SVG sprite, and 1 PNG: input_and_output.zip

Really loving this tool so far -- thanks for making it!