Lots of whitespace around icons

[jorisvervuurt]

First of all, thanks for creating Meteocons!

The icons have a lot of (transparent) whitespace around them, and some of them aren't even centered. Is there a reason for that? I'd much prefer them without any extra space around them, as it makes it so much easier to work with them...

It's now pretty much impossible to use the animated icons in a layout where I need to control the spacing between icons and other elements. For now, I can only use the static (non-animated) SVGs, but only if I first manually remove the whitespace. :(

Is there any way you could export the files without the whitespace? Thanks!

Here's an example:

[jorisvervuurt]

@basmilius any chance for a reply on this issue? 😄 Thanks!

[basmilius]

Hi!

From designing and animating the icons it's easier for me to have a 512x512 pixel canvas. I do however agree that the whitespace is a lot sometimes though.

I've been looking into node packages that can crop svg's, but haven't found anything that I can use. Another concern is that animations could get cut off when the svg's are cropped.

If you have any ideas for a solution, please let me know 🙏🏼

[jorisvervuurt]

Unfortunately, I don't really have a solution either. I'm currently manually cropping the static SVGs as cropping the animated ones doesn't work (I'm using Affinity Designer).

Is it hard to crop them just before exporting? :) I'd love to be able to use the animated SVGs (also tried the Lottie versions - same problem), but it's not an option due to the whitespace.

[basmilius]

Yes, it's hard to crop them before exporting because of some animations that are using elements that go out of their view box.

Cropping static versions of the icons could be an option, but I'd like them to be the same. I could look into providing whitespace information like so:

{
  "[icon-name]": {
    "top": 10,
    "left": 10,
    "right": 10,
    "bottom": 10
  }
}