Artifacts/Pixelated Issues on iOS with changed colors of SVG when using impeller

[VirtualAstronaut]

Hello, I am facing artifacts on iOS when using impeller and changed colours of SVG. One interesting is that when you use some height like 200 it does not show artifacts.

flutter_svg version - ^2.0.5

With Impeller

Without Impeller

SVG:

Flutter Doctor:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.10.5, on macOS 13.4 22F66 darwin-x64, locale
    en-GB)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.2)
[✓] VS Code (version 1.79.0)
[✓] Connected device (3 available)
[✓] Network resources

• No issues found!

here is sample code. Code:

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blueAccent),
        useMaterial3: true,
      ),
      home: const _SvgTest(),
    );
  }
}

class _SvgTest extends StatelessWidget {
  const _SvgTest({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SvgPicture.asset(
          'assets/activity.svg',
          colorFilter: const ColorFilter.mode(
            Color(0xff0231C8),
            BlendMode.srcIn,
          ),
        ),
      ),
    );
  }
}

[vscmaster]

Hello, facing same issue here, pixelated images on ios only.

[VirtualAstronaut]

@vscmaster You can try disabling impeller for iOS with a flag tho. seems fine for now maybe when it is fixed we can enable it again. try flutter run with this flag --no-enable-impeller

[beingsalmanshaikh]

I'm experiencing the same issue!

[cogivn]

I using flutter_svg: ^2.0.7 and facing this issue too.

[freethinkel]

You can try wrapping SvgPicture widget with Transform.scale(scale: 0.9999, child: child)

[vscmaster]

Hi @VirtualAstronaut, would you consider my investigation about another point that might cause the issue?

Some icons those have bigger size other than physical look pixelated.

Like this <svg width="72" height="72" viewBox="0 0 72 72" fill="none" and this <svg width="37" height="40" viewBox="0 0 37 40" fill="none"

will look differently, the first one will have pixelated.

[VirtualAstronaut]

Hello @vscmaster, so what are you saying is my SVG's dimension should be less than viewBox constraints? if i am not mistaken.

[jonas-zebari]

Should this issue potentially also be reported to the Flutter team? It could end up being related to Impeller and not so much an issue on the part of this package.

[pavlo-zin]

Looks like the issue is already fixed on Flutter master branch.

[GruppeGAM]

I think not, because when I version 3.13.0-0.1.pre is with me, the error nevertheless. But if I set the flag --no-enable-impeller it works.

[wiigolas]

@pavlo-zin I have tested this on - as seen in my report. Flutter 3.12.0-11.0.pre.32 • channel master • https://github.com/flutter/flutter.git Framework • revision 7dbdacff46 (10 hours ago) • 2023-06-26 22:05:23 -0400 Engine • revision f320b8c36f Tools • Dart 3.1.0 (build 3.1.0-246.0.dev) • DevTools 2.24.0 It was working as intended.

When upgrading today from 3.10.6 to 3.13.0 the issue still exists.

[GiacomoPignoni]

Hello, I just want to raise up again this issue because it still exists after almost 1 year, even it seems more rare then before. In my experience it still present on some svg, I can give another example

This svg has the problem

But this one not

[Badar25]

Its still occuring

[maxAtIppen]

Same issue https://github.com/dnfield/flutter_svg/issues/975