Resolution for SVG to PNG image for UIButton iOS

Question

I have a UIButton in my Swift/iOS app with width of 20 and height of 20 with an image inside.

I have an SVG icon that I'd like to use for the image in the UIButton. When I convert this SVG into a PNG, what resolution should the 1x, 2x, and 3x be?

Right now I'm creating a 30x30, 60x60 and 90x90 PNG files but it is mostly guesswork.

Should I instead use, say, 100x100, 200x200 and 300x300 PNG files?

Would these larger resolutions look better, but perhaps they take more time to load?

Also, in the UIButton, what is the correct content mode to set? Scale to fill or aspect fill?

Answer 1

You should use exactly what you need, if you need to fill 20 point, you will have a set of 20, 40, 60 pixel. bigger images are unnecessary, look no difference, take more time to load, more time to render and increase app's size.

Each content mode has its own purpose: Difference between UIViewContentModeScaleAspectFit and UIViewContentModeScaleToFill?

Answer 2

The answer to your question is "it depends". Let's assume that you want the image to exactly fill the button. Then ask the button for its bounds and that will be the 1x size for your image. The 2x and 3x sizes would proceed from there.

As for the content mode, it depends on how the size of your image relates to the size of the button. If the image is 1:1 with the size of your button it makes no difference. If the image were smaller or larger than the button then the context modes would give you different looks.

What I suggest is that you create a test program with a number of buttons. Use some wide, short images, and some tall skinny images. Set those images on the buttons and try different content modes to see how the relationship changes.