Question 74634 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter SVG vs PNG performace manner

There are a lot of images I have to show in the Flutter mobile application. What is the best choice? When showing images, use PNG or SVG. Could I know when the comparable difference accepts I searched for a lot, but I didn’t get a considerable amount of results in this manner.

PS: I don’t use network images or any assests.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    With more research on these, I have found the following:

    • SVG files are known to be slower because the library needs to read the XML file. The actual drawing process is fine, but since the XML file needs to be parsed, it can cause delays. The parsing result is cached, so the delay typically happens only in the first frame of rendering the shape.
    • If the markers are simple, then the CustomPainter code should be written to directly draw the shapes, rather than reading from a file, which would be faster. However, there is likely no caching of the result unless a caching system is implemented.
    • PNG files, on the other hand, use a codec that is written in native code and utilizes Skia to draw the RAW color information, just like CustomPaint. PNG files can also cache this information, so consecutive calls to draw the same file do not require using the codec again, and Skia can directly draw the image.
    • CustomPaint can be used to paint PNG files onto a canvas. Ultimately, everything uses Skia to render to the screen, and Skia is hardware-accelerated, so any time loss usually occurs before reaching Skia, such as when reading the image from storage or the network or communicating with Skia through Dart.
    • As with everything in programming, it's best to test when in doubt. Unless there are hundreds or thousands of markers on the screen, performance differences between SVG and PNG files are unlikely to be significant.

    For someone who looking in this manner I think this will be somehow useful.


  2. 0

    When adding images to our flutter app, we usually use .png, .jpeg, jpg, or .svg images. Each format has its own style.
    But most designers and developers prefer .png images or .svg files. Besides their transparent background, there are many other differences between these two image formats as listed below.

    1. PNG (Portable Network Graphics)
      Images in PNG format are high-resolution, lossless compressed, and transparent.
      In most cases, raster-based files are the best choice for adoption.

    2. SVG (Scalable Vector Graphics)
      This type of file is vector-based, which means it is rendered based on mathematical algorithms. They can also be scaled up or down without losing quality. Furthermore, they also assist with Search Engine Optimization (SEO).

    Each format comes with its own advantages. If we need a high-resolution image that can handle multiple colours then .png would be the best choice, whereas if we are dealing with logo design, or want to play around with the same image of different sizes without being pixelated then .svg would be the format to consider.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search