Flutter Web Image Quality

Help
, ,
1

Its been some time since I had the need to deploy a web application. In the past I always used the HTML render engine as despite the higher initial loading time image quality was as expected. Fast forward today and I am left only with Canvas or WASM but I am still struggling with getting the quality of images to an acceptable spot. This only happens for images from assets png, webp or even svg.
Here is the code I use to display the images

SvgPicture.asset(
            width: 40.0,
            height: 40.0,
            fit: BoxFit.contain,
            'assets/images/abc.svg',
          ),

Image.asset(
            'assets/images/xyz.webp',
            width: 40,
            height: 40,
            fit: BoxFit.contain,
          )

I have also attached a screen from a web app deployed to Firebase…any suggestions are greatly welcome.
Screenshot from 2025-05-30 20-31-45

2

Weird. Try to increase or decrease the filterquality in Image? What is the resolution of those purple assets?

3

The first 3 images are actually svg’s…something is clearly wrong since this format should not show up as low quality pixelated images. I will declare the quality of the image and see if I get any better results.

4

Read the flutter_svg readme, you should precompile your svg assets.

5

Not sure why but I totally missed the svg optimization compiler part from the readme. This solved my issue, many thanks :slight_smile: