Last updated on: May 27, 2023
In this tutorial, I’m going to show you how to use vector images (.PDF files) in your iOS project.
Xcode doesn’t support .SVG files, instead, it uses .PDF because the .SVG files don’t contain any information about the dimensions like the .PDF format.
Having dimensions helps Xcode to generate the .PDF into the right .PNGs sizes during the building process
First, we have to convert the .PNG file to .SVG and then to .PDF
Contents
Converting PNG to SVG
Let’s say that you already have an icon in .PNG format in your iOS project and you want to convert it to .SVG
Take the highest resolution of your icon (which has to be the 3x icon), or if you have a backup of this icon on your computer in higher resolution, use that.
Below there’s a list of programs that convert .PNG to .SVG files.
I prefer Vector Magic (not sponsored), as you’ll see later, it works better than the others even in .PNG with low resolution.
Here’s is an example of converting a .PNG using the @3x size from the Image Assets of an Xcode project.
Disclaimer: The following results are from converting a 72px icon to .SVG files. This doesn’t mean that the results will be the same for images in higher resolution.
Converting .PNG to .SVG using Inkscape
Open your .PNG image in Inkscape.
File > Open > Choose your image and press Open
Press OK on the new window
Optional: If your image has white color, you might want to disable the white background to see the picture.
Go to File > Document Properties
Check the box Checkerboard background and close the window
Click on your image to select it, and go Path > Trace Bitmap …
On the new window, select the Multiple scans tab, choose Colors, press OK and close the window.
On the right side, you’ll see all the new layers of your image. Remove or hide the old layer of your .PNG image
Save it as .SVG file by going File > Save As…
Converting .PNG to .SVG using Photopea
Go to photopea.com and open your image
File > Open > Choose your image and press Open
…and export the image to .SVG
File > Export as > SVG
Press Save
Converting .PNG to .SVG using Vector Magic
Drag and drop your image inside the Vector Magic
Select Fully Automatic
Select the level of detail you want the .SVG to have, and press Next
Press Save As and export it to .SVG file
Converting .PNG to .SVG using Adobe Illustrator
Go File > Open > Choose your image and press Open
Choose Window > Image Trace
Save the image by going File > Export > Export As… and select the .SVG format
Converting .SVG to .PDF
Visit photopea.com and open your .SVG file
Go File > Open > Choose your image and press Open
Go Image > Image Size…
Change the image size to be 100x100px
Notice: If your image is not 1:1 ratio (e.g 72x72px) but has diffrent dimensions (e.g 72x150px), set the height to 100px
Now, go File > Export as > PDF
Press Save
Adding .PDF to iOS project
Open your Xcode project and go to Assets.xcassets and drag and drop your .PDF file inside.
On the right side, check the box Preserve Vector Data and change Scales to Single Scale
Using .PDF Images
The way to use .PDF images in your project are the same as the .PNG.
You can use it in your UIImageView in storyboard
or programmatically
override func viewDidLoad() {
super.viewDidLoad()
pdfImageView.image = UIImage(named: "icon-vector-magic")
}Code language: Swift (swift)You can find the final project here
If you have any questions, please feel free to leave a comment below