fbpx
How to use vector images in your iOS project

How to use vector images in your iOS project

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

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")
        
}
You can find the final project here

If you have any questionsplease feel free to leave a comment below

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments