Add margin option.

[phallguy]

Instead of adjusting the size of individual sprites, the margin option simply increases the y/x offsets between each sprite, retaining the original image size.

[jkphl]

Hi @phallguy,

first of all: thanks for your contribution!

Before I merge your PR, however, I would like to understand it's goals — which I don't so far. This might also result from the fact that you describe your changes using the term "sprite" in a somewhat misleading way (as long as sprite is defined as numerous small images or icons combined into a larger image). I suspect that your aim is what the padding option already accounts for, although one might find it's function somewhat counterintuitive. Did you try to achieve your goals by using padding before?

Cheers, Joschi

[phallguy]

Yep, it's very similar to padding and serves the same basic purpose. But padding actually changes the width of the images that are composed to make the sprite. So in our scss/less when trying to calculate a target width for an image it's always off by some small amount because to the padding. And due to some bugs in Safari we can't have fractional heights in our target images so backing out the padding in the css won't work. Using the margin option, the original width of the source image is retained, while still adding spacing around the sprite so they don't bleed into each other.

This is a part of the generated template that we use

.chrome-svg( @height: 100 ) {
  @scale: @height / 100;
  background-size: floor( 405px * @scale), floor( 1000px * @scale );
  background-image: image-url('chrome-sprite.svg');
}

.chrome-app-menu( @height: 100 ) {
  .chrome-svg( @height );

  @scale: @height / 100;
  background-position: 0 floor( 0px * @scale );
  width: floor( 100px * @scale );
  height: floor( 100px * @scale );
}

I can then create a css class to create a 32px version of the icon and a 44px version of the icon from the same source image in the sprite.

.app-icon-32
{
  .chrome-app-menu( 32 );
}

.app-icon-44
{
 .chrome-app-menu( 44 );
}

[jkphl]

Hi @phallguy,

I just published the next major release of svg-sprite. It's rewritten from scratch and has the padding option reworked — now supporting a spacing.box option that works similar to CSS's box-sizing. Could you please check if this suffices your needs? I'll close the issue for now, but please feel free to re-open it in case you've still got problems.

Cheers & a happy new year,
Joschi

[phallguy]

Thanks for the hard work. I've just read the docs but so far this looks great.