SVG into iOS Images Package in PNG

Hello there,
Last year when I was making an app for my company, I was having trouble trying to import SVG directly into XCode. Maybe this is not the case now. So at that time, I made a small script that converts SVG into iOS Images Package in PNG’s and I used that in my project.

For all the fellow iOS developers, I published the script here:
https://w3goodies.com/export-images/svg-to-ios.html

It simply works like this:

  1. You upload your SVG.
  2. You provide the base size. Which becomes the “normal” version of your SVG. Let’s suppose you provided 32px.
  3. The page will then give you back single zip file containing these files:
Folder and file Image size
your_file.png 32px (base)
your_file@2x.png 64px
your_file@3x.png 96px

The script makes the resolution of image very high before converting so the quality of exported images will be very good.
Normally, you could simply drag the contents of zip file into your XCode’s “images.xcassets” folder.

I hope this tool makes the work of my fellow iOS Developers some easy. Happy coding!


If you also code for Android I posted similar post on AndroidDev sub reddit: https://forums.raywenderlich.com/t/svg-to-android-drawables-package-in-png/37965

1 Like

Hi w3goodies,
that is a very useful service that you have. A lot of us developers that had started out with Xcode 3 and iPhone3 prior to the iPad releases, can tell you how important it is and how helpful it could have been if there was an official method to manage the assets for all sizes than including MB’s or graphics at all sizes.

When Apple introduced vector graphics with PDF, it sounded too good to be true, and it was, it was not as efficient as required to be.

Plus the requirement to create the asset in several sizes is a task that requires a full time graphic artist.

I cam across this wonderful tool called Paint Code and a poor cousin called Quartz Code and several other siblings scattered across the Mac App Store. These allow you to create the asset in vector and instead of saving it as raster, you can render it to the size on the fly.

For those that cannot afford PaintCode, your web service can help them generate the assets. For those that are interested in PaintCode, there is an article on the website at https://www.raywenderlich.com/92972/paintcode-tutorial-for-developers-getting-started by Felipe Laso Marsetti.

This topic was automatically closed after 166 days. New replies are no longer allowed.