Loading SVG based image assets for iOS app

Question

I purchased an icon from thenounproject as an SVG image. I then use a macOS program called Gapplin to export this SVG into a PNG image. It comes out as a 100x100 pixel image.

I then open this PNG image with Preview program and go Tools -> Adjust Size and create 10x10, 20x20 and 30x30 images. I then load these images as 1x, 2x, 3x in Xcode.

Is this the correct method?

Thorin

Possible duplicate of How do vector images work in Xcode (i.e. pdf files)? – Prayerful

Answer 1

No, it's not the optimal solution.

Your current solution works, of course, but it's far from ideal. You are losing (precious!) image quality in doing so (see here for more details). You can improve your worklflow by:

• exporting all 3 resolutions from the original SVG file, ensuring you get the best possible PNG bitmap from a vector based image source (using Gapplin or some other image app);

• or converting your SVG to PDF and then importing the PDF vector image file in Xcode (last time I checked, Xcode 8 still didn't have direct support for SVG files so we are stuck with good old PDF for now).

Both methods, image quality wise, should produce very similar results and are an improvement from your current workflow.

Regarding app file size, you shouldn't again see a difference from neither method. Even using the last method, Xcode still generates the required assets at build time and, as such, your app will be carrying around the same image/icon set as the first method.

Telegraphic

So your saying to export the SVG file directly into 10x10, 20x20 and 30x30 PNG files? Also, does 1x have to be 10x10, 2x 20x20, etc? Or can I increase the size? – Thorin

@Thorin Yes, export directly from SVG to the desired resolutions! Regarding the actual size, it really depends on where your icon will be used. Please [see here][developer.apple.com/ios/human-interface-guidelines/graphics/… for some examples. – Telegraphic

Thanks a lot! For some reason, the program I'm using Gapplin does not allow me to export directly to the desired resolutions. Do you know any other free programs for Mac that can? – Thorin

@Thorin I love Acorn! I think they have a free trial... – Telegraphic

I'm using the images as part of a UIButton with width of 20 and height of 20. Do you know the correct png resolutions I should export the SVG image into for 1x, 2x, and 3x? I've been using 30x30, 60x60, 90x90 but it is guesswork. Should I use larger images, like 100x100, 200x200, 300x300? Would this give better quality but maybe takes longer to load? – Thorin

@Thorin For pixel perfect results, you should be using 20x20, 40x40, 60x60. The 1x resolution maps 1-to-1 points to pixels. As such, a width of 20 points should need 20 pixels at 1x scale. See here to better understand why... – Telegraphic

Answer 2

I know this answer comes long after the question. But as of Xcode 12, and using deployment targets of macOS 10.15 or later, iOS 13 or later, and iPadOS 13 or later, you should be able to use an SVG image directly in your asset catalog. From the Xcode 12 release notes:

Asset Catalogs
New Features

• Added support for Scalable Vector Graphic (SVG) image assets. These preserve their vector representation with deployment targets of macOS 10.15 or later, iOS 13 or later, and iPadOS 13 or later. (18389814)

I haven't had a reason/chance to use one myself yet, but it sounds like it should work.

Herculaneum