Vertical centering of output svg
leejordan opened this issue · comments
Hi, some of the svgs that are being generated need a bit of manual tweaking. Can you recommend the best way of doing this? I've tried to use illustrator but the paths that are output from illustrator after saving are much more verbose and are displayed very small when I update my LESS variables with them.
For reference, I have created a LESS mixin which accepts a path argument, and I am using that to output my svgs in my css. This isn't really related to the problem though, It's just to provide some context.
My problem is that some of the font awesome svgs that are output are not rendering vertically centered for me. Here's an example with red background to illustrate the problem. I'm using the same CSS that you've got in your example folders to render these.
Sounds like you're missing a document size / viewbox argument after stripping.
I just double checked and my markup and svg data is exactly the same as on the test page. In fact, I see the same issue on your test page. Here's a screenshot after I've made the icons 2em high/wide and given them a background color:
When using these icons in buttons or next to text, the icons are not center aligned. In the example above, I would expect those chevrons to be placed in the vertical center rather than slightly below center as they currently are.
Hopefully this illustrates the problem a bit better.
Sorry if it seems like I'm complaining I think this is a really neat tool you've built here, it would just be nice if it could either output the svgs vertically centered, or maybe somebody can recommend me a way of manually tweaking the svgs myself. I don't seem to be able to get illustrator to output a path that doesn't end up making the icon tiny or otherwise broken when used via css.
Ack. This came about from fighting with the centering originally, oddly enough.
Just pushed a change that fixes centering for most icons... and breaks it for a few others. Most notably the batteries and payment icons.
If you want those centered, you'll want to play with the centering code accordingly, or rip from a previous version.
Since svgpath needs to work out all the points anyway, I wonder if we could get boundaries from it.
I was actually halfway through manually vertically centering these with inkscape with good results but I'll pause that for now, try your newly generated paths and manually fix the ones that are still not quite right.
Thanks for the update.
Yes this is much better now, but some are still not quite right as you said but I can tweak these manually.
Thanks very much for your update and the useful tool you've created.