Repository: flutter
Issue: [flutter_svg] Images pixelated (CanvasKit)
Labels: package,p: flutter_svg

_Imported from https://github.com/dnfield/flutter_svg/issues/668_

Original report by @KevMCarp on Feb 18, 2022

When running on web using the canvaskit renderer images are pixelated.
canvaskit
![canvaskit](https://user-images.githubusercontent.com/88255595/154757349-e85a87a5-1b3f-41e1-a035-e4d54b6de0d9.png)
html
![html](https://user-images.githubusercontent.com/88255595/154757354-76fed787-75a7-4287-94fb-82b3153adb37.png)


```dart
void main() {
  runApp(const TestApp());
}

class TestApp extends StatelessWidget {
  const TestApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SvgPicture.asset(
            'tick.svg',
            height: 100,
          ),
        ),
      ),
    );
  }
}

```

![tick](https://user-images.githubusercontent.com/88255595/154758685-36be9f3b-f6f6-451d-ac8c-ae430a2632fa.svg)


---
Comment by @philqc on Feb 19, 2022
I also get the same issue using Flutter Web with canvaskit. Here is how the SVG is rendered:
![qd_web_rendering](https://user-images.githubusercontent.com/19807706/154806835-be568577-f218-4756-8e5a-2188c23e29c7.png)

And here is the SVG file:
![Qd](https://user-images.githubusercontent.com/19807706/154806833-5b63d3c3-632a-4ad4-b186-fbca57cfc01e.svg)

Code:
```dart
SizedBox(
  child: Align(
    alignment: Alignment.center,
    child: SvgPicture.asset(
      "assets/svgs/playing-cards/Qd.svg",
      width: 96,
    ),
  ),
),
```


---
Comment by @jonbhanson on Apr 26, 2022
I'm seeing the same thing in my app: slightly aliasing when rendered in canvaskit.

---
Comment by @doppio on Jun 3, 2022
Same issue here with my brand logo. Unfortunately, I'll need to use a PNG instead since the loss of quality isn't worth the file size reduction.

Could this be related to https://github.com/flutter/flutter/issues/77485?

---
Comment by @MarcAnProv on Jun 3, 2022
Same thing is happening for me.

---
Comment by @dom3lek on Nov 9, 2022
Any progress of this problem? 

---
Comment by @LeonardoRosaa on May 19, 2023
Same problem here 😢 

---
Comment by @curt-weber on Jun 9, 2023
For CanvasKit - we use a supersampling technique that improves quality:
```
   Transform.scale(
      filterQuality: FilterQuality.medium,
      scale: 0.5,
      child: Transform.scale(
         scale: 2,
         child: SvgPicture(...),
      ),
   )
```
Keep in mind this is rendering the icon at 2X, so probably only suitable for smaller icons...

---
Comment by @RobertApikyan on Jun 30, 2023
> For CanvasKit - we use a supersampling technique that improves quality:
> 
> ```
>    Transform.scale(
>       filterQuality: FilterQuality.medium,
>       scale: 0.5,
>       child: Transform.scale(
>          scale: 2,
>          child: SvgPicture(...),
>       ),
>    )
> ```
> 
> Keep in mind this is rendering the icon at 2X, so probably only suitable for smaller icons...

Fixed for iOS, I had the same pixelated image for iOS devices, Flutter 3.12.0, now it is fixed, thanks a lot!

---
Comment by @aytunch on Jun 30, 2023
@RobertApikyan I am confused. Is this issue fixed with the latest Flutter & flutter_svg or with the above workaround?

---
Comment by @RobertApikyan on Jul 1, 2023
> @RobertApikyan I am confused. Is this issue fixed with the latest Flutter & flutter_svg or with the above workaround?

@aytunch the issue is fixed with the workaround.

---
Comment by @blingkonnerth on Oct 11, 2023
any updates on this? Still experiencing this issue on iOS. @curt-weber fix is working for some icons, however it is cutting of images, unless I specifically set `height` and `width` together `Boxfit.contain`. 

---
Comment by @curt-weber on Oct 11, 2023
If the clipping is only happening on iOS, it could very likely be a bug related to Impeller. You should probably open a flutter issue showing a difference between skia/impeller. It's usually best to set a specific height and/or width so the icon has size (before it's fully loaded, or use placeholder). We found that was the cause of test flakes, attempting to tap an icon that has yet to be encountered (random test order) and thus having no size. cc @dnfield 

---
Comment by @Adam-Langley on Oct 23, 2023
@curt-weber thanks for the super-sampling suggestion.
In cases where the upscale causes partial rendering off-screen, the upscaled image is clipped before it's downscaled again resulting in effects like this:

(note the bottom grey icon is clipped because the pre-scaled (2x) version would bleed off-screen. I've put a red square behind the svg to demonstrate the region where the SVG should be)
<img width="141" alt="image" src="https://github.com/dnfield/flutter_svg/assets/16373742/4eb8d91f-410f-4888-b596-6adeff2991cd">



Is there a way to force flutter to render the entire widget even when the pixels aren't visible? Or another way to resolve this issue with super sampling?

---
Comment by @curt-weber on Oct 24, 2023
There is likely an ancestor widget that is adding clipping (such as a scrollview). You can't pop that clip using `OverflowBox`, but you could perform this same supersampling strategy using `CustomPaint` (or a custom RenderObject) since it doesn't add clipping until you ask it to. You could use [PictureInfo](https://pub.dev/documentation/flutter_svg/latest/svg/Svg-class.html) to obtain a picture for drawing.

---
Comment by @hunterwilhelm on Oct 30, 2023
I am running into the clipping issue too when using the transform on iOS. I will have to resort to using png's until this issue is fixed. 

---
Comment by @curt-weber on Oct 30, 2023
Does this only reproduce on iOS(Impeller)? Testing with a parent clip (scrollview) doesn't reproduce on web (canvaskit) for me. FWIW this technique isn't needed for iOS and you could create a wrapper widget that performs the supersampling just on web, but passes through to the regular SvgPicture elsewhere. There is also a parameter [clipViewbox](https://pub.dev/documentation/vector_graphics/latest/vector_graphics_compat/VectorGraphic/clipViewbox.html) that is available to the lower-level `VectorGraphic` but not exposed to `SvgPicture` - all you would have to do to test is switch to using `VectorGraphic` (clipViewbox=false) and report back your findings.

---
Comment by @gabrielginter on Mar 14, 2024
Supersampling workaround doesn't seem to be working anymore on the new Flutter version (issue https://github.com/dnfield/flutter_svg/issues/1013).

Is there another way to solve this?

---
Comment by @curt-weber on Mar 14, 2024
This is captured within the flutter repo and you can follow for updates here: [#139028](https://github.com/flutter/flutter/issues/139028)

---
Comment by @lilran14 on Aug 30, 2024
has anyone been successful in resolving this issue? 🤔