Xcode 12 introduced support for using Scalable Vector Graphic (SVG) image assets in iOS, macOS, and iPadOS. It’s one of those changes that you might have missed during WWDC 2020 as it’s quite a small addition.
Up until Xcode 12, we were able to use single scale resources by using PDF assets. It takes away the need to generate individual images for each scale using the @1x, @2x, and @3x postfix. This saves you time and also takes away potential mistakes like accidentally generating a @3x asset with the @1x image size (we all did that once, right?).
What is a Scalable Vector Graphic asset?
Scalable Vector Graphics, also known as SVG, defines two-dimensional graphics defined in Extensible Markup Language (XML). It’s mostly used for icons and symbols and allows platforms to scale up the asset for the current active resolution.
When should I use Single Scale Assets?
SVG assets can not be seen as a replacement for all your assets. Rich assets like images with lots of details should still be defined as individual scales. If you have a logo, icons, or symbols, you can most likely look into replacing them with an SVG asset.
Supported platforms
It’s important to point out that SVGs are only supported on macOS 10.15 or later, iOS 13 or later, and iPadOS or later. If your app supports any older version you should not use single scale SVGs.
Considering SFSymbols as an alternative
Before you start replacing all your assets with SVGs you might want to consider using SFSymbols instead. SFSymbols have the same platform version availability and are available as system images. This takes away some extra space in your app bundle.
You can learn more about SFSymbols in my blog post SF Symbols: The benefits and how to use them guide.
How can I use an SVG in Xcode?
Using SVGs in Xcode is fairly simple. You simply drag the file into your Assets Catalog after which you have to change the Scales option to “Single Scale”:
After that, you can use your SVG Image Asset just like any other asset.
PDF vs SVG assets
Single scale PDFs are introduced in Xcode 6 and are supported since iOS 8 and OS X 10.9. This could already be a reason to use PDFs instead of SVG if your app is supporting targets lower than iOS 13, iPadOS 13, or macOS 10.15. Both PDF and SVG have the same outcome when used as single scale assets.
Considering the file size of assets
Comparing the file size of the same asset exported as SVG or PDF results in different winners based on the type of image, resource details, and export configuration. If you’re focused on having a small app size you might want to consider exporting to both PDF and SVG to be able to pick the smallest version.
In most cases though, SVGs are smaller in size. On top of that, you can also find lots of resources on the web for optimizing SVGs as they’re a popular type of asset to use during web development.
Conclusion
SVG support is a great addition introduced in Xcode 12 during WWDC 2020. It allows single scale assets with an often smaller size resource file. SVGs are not always the right choice as they’re only supported from iOS 13 and later, iPadOS 13 and later, and macOS 10.15 and later. In those cases you can fallback on using PDFs instead.
If you like to improve your Xcode knowledge, even more, check out the Xcode category page. Feel free to contact me or tweet to me on Twitter if you have any additional tips or feedback.
Thanks!