Images are an important part of the UI of a mobile app. Because there are lots of different mobile phones, all having very different screens - width, height or pixel density - using images made of pixels (called "raster images") is often a bad idea to get a great result.
I'm gonna tell you why it's very important to use vector image. I will first give you advices of when to use raster or svg images, then i will show you how to easily use vector images (SVG) in your apps on iOS, Android and Windows UWP.
pic from marketblog.envato.com
Raster images are made of pixels. For example, 4K images contains 3840x2160 pixels. In terms of memory it requires 7.9MiB. If you are displaying 10 images in your app, it will use 79MiB of memory. Often apps are limited to 256MiB of memory on low end devices. So displaying 10 raster images will require a lot of memory allocation and CPU while loading, which will slow down the device and your app.
Some image libraries like FFImageLoading will downscale the images while loading them, to adapt to the device's screen and largely lower the memory footprint. Those libraries also dispose the memory in an intelligent and fast way, so the app won't suffer of memory leaks or garbage collecting too much.
Vector images, in contrary, are built by a sequence of simple mathematics operations: lines and curves defining shapes, and fill, stroke and filters defining how these shapes are drawn. Comparatively, vector images have a very small size (5 KiB) when raster images are more around 100KiB.
But because vector images are built mathematically, they can not replace all raster images. Especially "real" pictures of our world are only available as raster images. But icons, gradients, shades, emoji, and all "simple" shapes are a perfect fit for vector images.
Because vector images are built mathematically, they can not replace all raster images.
You may think that doing mathematical operations to display an image will take much more CPU than displaying a small raster icon. In reality, the CPU usage is less than the one required to downscale a raster image, because these mathematics operations are all optimized either by the GPU or by C++ native code from the operating system of the device.
Another good reason for using vector images in Xamarin Forms is the enormous gain of work to add or update an image to an app. It is as easy as adding one file in one project for both iOS and Android. The gain in both time and effort is so big that you should always make sure you are using vector images in your app.
To compare with raster images, let's remember how you add one to a Xamarin Forms iOS and Android app. First Android. You need one version of the raster image per screen density: mdpi, ldpi, hdpi, xhdpi, xxhdpi. Then you have to add them to the matching folder of the Android project. On iOS you must add an image asset catalog to the project, one catalog per raster image. In each asset catalog you must add different resolutions of the same image, one for each target device screen size. Well on iOS you can use a PDF containing a vector image in the asset catalog, but you still need one asset catalog per image, which is quite difficult to do with Visual Studio.
It's a lot of efforts for 1 image ! So please, use as much vector images as possible to keep your developers free for more important things. Don't let their mental workload accumulate.
<aside> 🙃 It's a lot of efforts for 1 image ! So please, use as much vector images as possible
</aside>
Some libraries provide a control to display a vector image. But first there is something very important to understand.
<svg:SvgImage Svg="res:images.logo" HeighRequest="32" />
XamSvg.Shared.Config.ResourceAssemblies = new [] { typeof(App).Assembly };