Are SVG assets faster than PNG when rendered or not?

I recently was thinking about which is the best format to use for my little icons in the app, and was considering the performance of PNG versus SVG . I know that PNG decoders are hardware accelerated and parallelized, and the rendering is as simple as placing the pixels on the screen.

On the other hand, SVG requires computation to determine the placement of pixels based on mathematical equations.

Considering this, my current assumption is that PNG is faster to render than SVG. However, if SVG is also hardware-accelerated, it could alter the situation, although this may not be the case.

Accepted Reply

SVG assets added to your asset catalog are typically rasterized at a few expected sizes, but if they have to be rasterized at runtime that first use may be significantly slower. SVG isn't directly hardware accelerated (which is partially because its a text format, so there is no help to decoding it).

In general we would recommend using assets in the format that makes the most sense to your use case (e.g. it wouldn't make sense to rasterize 100 sizes from an SVG to avoid a first use cost without putting a lot of consideration into doing so).

Replies

SVG assets added to your asset catalog are typically rasterized at a few expected sizes, but if they have to be rasterized at runtime that first use may be significantly slower. SVG isn't directly hardware accelerated (which is partially because its a text format, so there is no help to decoding it).

In general we would recommend using assets in the format that makes the most sense to your use case (e.g. it wouldn't make sense to rasterize 100 sizes from an SVG to avoid a first use cost without putting a lot of consideration into doing so).