Difference of SVG Images VS normal images in Power Apps

SVG stands for Scalable Vector Graphics.

SVG is an XML-based vector image format for two dimensional graphics with support for interactivity and animation.

As SVG images are xml-based, we can scale them in size without loss of quality.

SVG files can be searched, indexed, scripted and compressed.

The SVG xml files can be created and edited with any text editors or vector graphics editors.

SVG allows three types of graphic objects:

a. Vector graphic shapes such as paths consisting of straight lines and curves

b. Bitmap images

c. Text

Normal Images in Power Apps

Scaling Image

In Power Apps, we can upload various types of images to Media section. The resolution of these images are fixed based on the size of the image that we uploaded to the Power App. If we upload higher resolution image with large file size, the image will show up great. If we upload any lower version image, the we may start experiencing pixels in the image when we display image in the Power App.

This is not the case with SVG images. The same SVG image code works for any size of the image without compromising the quality of the image.

Image Size

All the normal images must be uploaded to Media section in the Power App to use OR refer them externally. The size of the images impacts the load time of the app for the user.

But, in the case of SVG images, as the SVG image is in the form of code, the SVG image occupies very less storage compared to other image formats. This will improve the load time of the app significantly.

Interaction with Images

Interacting with images is not possible with normal images in the Power App.

But, we can dynamically pass values to SVG images and we can also perform animations with the SVG image based on the data. This gives flexibility to design more powerful applications. Of course, we need to keep the data size in mind when we load the app.

Here is an example of SVG Image and its code to show the image:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  Sorry, your browser does not support inline SVG.
</svg>