Align size/center of mass

[dy]

Hey @danleech , awesome project, I use it in a couple of websites.

But I noticed a small problem - some of the icons are a bit displaced or have lesser visual mass, as in the example for my friend's site:

G+ and twitter look smaller than others.

Recently I created optical-properties tool for balancing alignment/mass of graphical symbols.

It worked really well in font-atlas-sdf.

It could be used to align the whole icon set - making sure the visual center and mass of icons is same.

What are your thoughs?

Cheers!

[birjj]

Started implementing a test at birjolaxew/simple-icons/optical-sizing, but there are some issues:

• optical-properties doesn't currently work on NodeJS, and fails to find bounds on images containing black pixels.
• optical-properties seems to return different radius' if run multiple times^[1]. I still haven't tracked down why.
• The difference in radius returned by optical-properties between G+ and Instagram is minimal (308.13 vs. 306.79 at 512px size)

In short I don't think optical-properties can help us - the G+ icon is just as wide as the Instagram icon, so it'll have the same "radius". The problem here is that your design assumes that the height of icons is identical, while simple-icons assumes that the containing square of the icons is identical.

A solution here would be for simple-icons to have a viewbox as small as possible, with the longest side being 16 units, instead of a 16x16 viewbox (so the G+ icon might have a viewbox of 16x8 or similar). Users can then use CSS/similar to decide whether they want the height, the width or both of the icons to be identical.

---

[1] Output of current tool below:

~/dev/simple-icons » tools/visual-sizing.js googleplus
308.1280494616977 - googleplus.svg    <--
Average: 308.1280494616977
~/dev/simple-icons » tools/visual-sizing.js instagram googleplus 
306.7921026585487 - instagram.svg
309.1083239613655 - googleplus.svg    <--
Average: 307.9502133099571

[birjj]

Pinging @danleech for opinion on above solution.

[dy]

@birjolaxew ok, I will try to tackle these issues down this weekend.

• make work in nodejs
• take alpha/custom channel
• concave by height before detecting radius

[davidklebanoff]

Any progress @dfcreative? This sounds very useful.

[styfle]

have lesser visual mass

I noticed this myself. On my website, I used the StackOverflow and Keybase icons from simple-icons and they look a little thinner than the other icons.

[PeterShaggyNoble]

Closing this out due to inactivity. If anyone would like to continue working on this then please feel free to open a new issue or PR.