Using SVGs in asset catalogs

SVGs can now be used as assets for iOS, iPadOS, macOS, and watchOS apps. The most exciting part of this new feature is that there’s not much to say — it’s full SVG support, and it just works.

Xcode 12 is required, but deployment targets of iOS 13, iPadOS 13, macOS 10.15 or later are supported. I believe this is because CoreSVG (a private framework) was added to facilitate SF Symbols, but I’m not entirely sure. That means many of us can use SVG assets today, or will be able to use them reasonably soon. This is, quite honestly, one of my favourite announcements of WWDC 2020.

Unlike PDF assets, SVGs seem to always be bundled in their native format and rendered at runtime. As a result, many apps will be able to save a lot of space by moving appropriate assets over to SVGs.

The best candidates for SVG assets are solid colour glyphs, or anything where the styling is fairly simple. While it is possible to use gradients, shadows and other effects in SVGs, doing so can cause issues if the authoring design tool decides to embed a bitmap image in the SVG, rather than using actual SVG or CSS styling. So, if you plan to use SVGs for anything other than single colour icons, I’d recommend taking a look at the resulting code inside the SVG, and double check everything is rendering as anticipated.

Three icons of varying complexity

The only, very minor fault I’ve been able to find is the lack of wide gamut (Display P3) support. That’s not at all surprising, given SVGs are traditionally in the sRGB colour space, and wide gamut support on the web is still experimental and not well supported. Some CSS features that work in Safari can’t yet be used in asset catalogs.

Depending on your display, settings and browser, the red panels in the image below may look the same. When showing the SVG in the iOS Simulator, the red specified using color(display-p3 1.0 0 0) shows as black.

Safari showing two red panels, and the iOS Simulator showing the same SVG

There are work-arounds for now though. If you’d like to use SVGs for Display P3 solid colour icons, they could be treated as template images, and tinted using tintColor.

For custom icons, SVGs are a far better option than PDFs or SF Symbols. We’ll be using them extensively.

Update 10 July 2020: After more testing, it seems like using SVGs as assets in iOS, iPadOS, and watchOS apps behave in a similar way to using PDFs — Xcode renders the artwork to PNGs when building the app bundle. I will continue to improve and update this article as more testing is done. Please note that enabling “Preserve Vector Data” will mean the original vector files (PDFs and SVGs) are included in the bundle, but that’s typically alongside the PNGs as well. This is a real shame, because it means we still don’t have a true vector image format we can use for assets.

Published 2 July 2020.