SvgComponent getting blurred and pixelized

[realvotum]

Current bug behaviour

SvgComponent renders blurry image.

On physical iPhone X device, image seems to be brightened and pixelized, like it was first rendered and then scaled up. Top image is from flutter_svg, bottom image is from SvgComponent;

On iPhone SE simulator, the results are similar; flutter_svg renders fine, SvgComponent blurries image.

Expected behaviour

I expected SvgComponent to render sharp, razor-edged paths, just like flutter_svg.

Steps to reproduce

Clone the project and run on a physical device https://github.com/realvotum/flame_svg_example

Flutter doctor output

[✓] Flutter (Channel stable, 3.0.0, on macOS 12.3.1 21E258 darwin-arm, locale pl-PL)
    • Flutter version 3.0.0 at /Users/mateusz/fvm/versions/3.0.0
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ee4e09cce0 (9 weeks ago), 2022-05-09 16:45:18 -0700
    • Engine revision d1b9a6938a
    • Dart version 2.17.0
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at /Users/mateusz/Library/Android/sdk
    • Platform android-32, build-tools 32.1.0-rc1
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] Connected device (3 available)
    • iPhone SE (3rd generation) (mobile) • D306D4C0-F556-4FD0-BAFC-66BB43E9A4A8 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-4 (simulator)
    • macOS (desktop)                     • macos                                • darwin-arm64   • macOS 12.3.1 21E258 darwin-arm
    • Chrome (web)                        • chrome                               • web-javascript • Google Chrome 103.0.5060.114

[✓] HTTP Host Availability
    • All required HTTP hosts are available

More environment information

* Flame version: 1.1.1
* Flame SVG version: 1.2.0
* Flutter SVG version: 1.1.0
* Platform affected: ios, not tested on others
* Platform version affected: ios 15

[alestiago]

@realvotum thanks for opening an issue.

Can you provide a minimal reproductive sample?

Also, have you tried doing so for your component?

paint.filterQuality = FilterQuality.high;

[spydon]

Can you provide a minimal reproductive sample?

There is already a MRE in the issue.

[realvotum]

@alestiago Thank you for your response.

There's a link to github repo with minimal reproductive sample in the "Steps to reproduce" section above. As for paint.filterQuality = FilterQuality.high; , I'm using the SvgComponent from the flame_svg-1.2.0 package to render my .svg image. The SvgComponent neither takes Paint as a parameter nor exposes Paint field anywhere. I may miss something though.

[spydon]

This issue would be a good Hacktoberfest issue, so we need to make sure that we render the SVG properly and don't render it first and then scale it.

[idlehart]

I could take a look at this issue :)

[erickzanardo]

I could take a look at this issue :)

Sounds good! I will assign you to the issue. Feel free to reach us for any questions.

[idlehart]

Have anyone looked at repro sample? I've run on several simulators, iPhone 11, 12, SE(3rd gen) / Google Pixel / Web / MacOS. All SVGs look pretty sharp to me.

This is from Iphone X, are my eyes deceiving me?

[spydon]

Thanks a lot for your investigation @idlehart! As we spoke about on discord, another person will take over this one and you can focus on some other issues. :)

[trunghq3101]

Hi @spydon, I can take a look at this. I just found another performance issue related to how SVG is drawn. If I try to solve that issue, this one might be solved too. So, please count me in 😄