Can't get horizontal alignment to work

[justineberger]

Hi there
Thank you for this grunt svg sprite, i've been searching around and right now i feel like it's the best one among all the similar existing plugins.

However i haven't been able to understand how extended alignment works.
I want to align my svgs horizontally within the sprite. But i'm so lost with the documentation, do we actually use the strings "vertical" or "horizontal" somewhere ? I have to admit i have no idea how Yaml works and why it's needed here, so a full example would really help.

Thanks a bunch !

[Joschi Kuphal]

Hi @justineberger,

I'm happy to help you with that. Before we start, just to make sure: You did read the alignment docs of svg-sprite, right?

And just to get the prerequisites: What you want to achieve is sprite where all the shapes are one below each other ("vertical" layout) and centered horizontally (like this example in the docs). Is that correct?

Cheers,
Joschi

[justineberger]

Hey Joschi, thank you for the quick response.

Yes, i did read that page several times but it just didn't click, sorry...
Hmm no i want the exact opposite of your example : all the shapes aligned next to each other, but centered vertically (yeah i might have gotten confused. The shapes should be aligned horizontally, but centered vertically. As they don't have the same height.).

Thank you

Justine

[Joschi Kuphal]

Anyway, that's super easy. All you need is a (YAML) file with exactly this content (Important: there are two spaces at the beginning of the second line; That's YAML syntax ...):

"*"             :
  "%s"          : .5

Save it wherever you like, provide it as shape.align option (see here for details) and set you sprite layout to "horizontal":

var config = {
    shape: {
        align: 'path/to/file.yaml'
    },
    mode: {
        css: {
            layout: 'horizontal'
            /* ... */
        }
    }
}

This should give you what you want. Pls let me know if it works for you!

Cheers,
Joschi

[justineberger]

Ah, perfect ! i got it to work, thank you :)

Here is a suggestion, if i may, to make it even better (i keep it in this thread because it's still related to alignment). Maybe this has already been implemented but i couldn't find exactly what i was looking for. Ideally, i would like to automate the following steps:

1. I have a bunch of svg with different widths and heights.
   
2. Resize the svg proportionnally, so they all have either the same width or the same height.
   [ this works nicely with your plugin, but only if the original svg is bigger than the size i want.
   I would be nice if we could set a Height or a Width, not just a maxHeight or maxWidth.]
   
3. Align the shapes relatively to each other
   [ yay, you've got this covered :) ]
   
4. Include all shapes in a square transparent box, for which we can set a size too.
   This would eliminate the need for padding, i guess. Because the problem width padding on shapes that don't have the same proportions is that you can't give the same size to all your icon container in css :
   

This problem would be solved by including them in a square box :

What are your thoughts on this ?

Anyway, thank you for your help !

[Joschi Kuphal]

Sounds like a nice addition, indeed! Thanks for the suggestion(s). I could imagine a "boxed" spacing mode — will think about implementing it into one of the next releases. :)

I will close this issue for now and open another one with the feature suggestion. Please feel free to re-open it in case you still have troubles.

Cheers,
Joschi