Loading SVG based image assets for iOS app

JK140 picture JK140 · May 1, 2017 · Viewed 47.1k times · Source

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?

Answer

Paulo Mattos picture Paulo Mattos · May 1, 2017

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.