Skip to content

SwiftUI: Rendering Mode

Last updated on April 29, 2020

There are two types of rendering modes for your image assets:

  1. Original.
  2. Template.

The original mode will portray the image asset as it is. While the template mode will turn all the non-transparent parts of the image into one color that you can set. And the default color is black.

No overview available.

Apple Documentation

In this tutorial, you’ll learn what is Rendering Mode in SwiftUI. You’ll learn:

  • How to use Rendering Mode.


To follow along this tutorial, you’ll need some basic knowledge in:

  • A basic familiarity with Swift.
  • At least Xcode 11

Rendering Mode

Xcode does a pretty good job in helping you select the rendering mode when you add an image asset into your project. However, let’s see some of the differences of the rendering mode that can perhaps be useful to your project.

This is one way you could pick your rendering mode.

Another way is to programmatically set it as it is. Below is the effect of original where it is how it is.

Given the scenario that your designer would like the image the be in BLUE as a whole, and your designer has no time to do it for you. You may opt for the template option.

Now, you are both an iOS Developer and a designer.

Where to go From Here

If you feel like you are ready to take on more challenges, feel free to check out some other tutorials that we have created:

Published inSwiftUI

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *