[iOS] Pixelated svg icons #975

Primo85 · 2023-08-09T10:22:31Z

Since we are using 'color' parameter there is a problem with svg rendering on iOS (on android it works fine).
The problem is in tab bar only if there are 2 items there. For 3 and more elements it works fine.
Tested on iPhone 7 iOS 15.7, iPhone 8 iOS 16.3.0 and iPhone 8 iOS 16.3.1.

Expected results/Screenshot

Actual results/Screenshot

main.dart

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(primarySwatch: Colors.blue),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage();

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int index = 0;

  void _setIndex(int index) {
    setState(() {
      this.index = index;
    });
  }

  List<BottomNavigationBarItem> getTabs(BuildContext context) {
    return [
      BottomNavigationBarItem(
        icon: Assets.home,
        label: "item 1",
      ),
      BottomNavigationBarItem(
        icon: Assets.homeColor,
        label: "item 2",
      ),
      // BottomNavigationBarItem(
      //   icon: Assets.homeColor,
      //   label: "item 3",
      // ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Some title")),
      body: const Center(
        child: Text("Some screen"),
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        onTap: (int index) {
          _setIndex(index);
        },
        currentIndex: index,
        items: getTabs(context),
      ),
    );
  }
}

class Assets {
  static Color filterColor = Color.fromRGBO(0, 0, 0, 1);

  static Widget home = SvgPicture.asset("assets/home.svg");

  static Widget homeColor = SvgPicture.asset("assets/home.svg",
      color: filterColor);
}

home.svg

Doctor output

Doctor summary (to see all details, run flutter doctor -v):
[!] Flutter (Channel master, 3.11.0-14.0.pre.6, on macOS 13.1 22C65 darwin-x64, locale en-PL)
    ! Warning: `dart` on your path resolves to /usr/local/Cellar/dart/2.18.7/libexec/bin/dart, which is not inside your current Flutter SDK checkout at /Users/pbiskup/fvm/versions/3.10.1. Consider adding /Users/pbiskup/fvm/versions/3.10.1/bin to the front of your path.
[!] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.1)
[✓] VS Code (version 1.79.2)
[✓] Connected device (3 available)
[✓] Network resources

maksym-letiushov · 2023-08-12T12:03:14Z

Hi,
I was faces with the same issue with flutter_svg: 2.0.7 and would like to add some additional info:

results on real iOS device much worse than on iOS Simulator
results depends on the size of the output image
My svg has parameters width="24" height="24" and viewBox="0 0 24 24" and I received the worst results for sizes 20, 60, 100.

Results on real iOS Device

Results on iOS Simulator

Svg file

Demo code

Widget _buildContentForDemo(BuildContext context, String assetName, String package) {
    const List<double> sizes = [16, 20, 24, 30, 40, 50, 60, 80, 100, 120];
    const colorFilter = ColorFilter.mode(Colors.green, BlendMode.srcIn);

    return SafeArea(
      child: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(24),
          child: Column(
            children: sizes.map((size) {
              return Padding(
                padding: const EdgeInsets.only(bottom: 24),
                child: Row(
                  children: [
                    SizedBox(width: 50, child: Text('$size')),
                    SvgPicture.asset(
                      assetName,
                      package: package,
                      colorFilter: null, // without color
                      width: size,
                      height: size,
                    ),
                    const SizedBox(width: 24),
                    SvgPicture.asset(
                      assetName,
                      package: package,
                      colorFilter: colorFilter, // with color
                      width: size,
                      height: size,
                    ),
                  ],
                ),
              );
            }).toList(),
          ),
        ),
      ),
    );
  }

Flutter doctor

[✓] Flutter (Channel stable, 3.10.6, on macOS 13.3.1 22E772610a darwin-x64, locale en-UA)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.3)

Also I think this issue is very similar to #927

Please take a look

neronovs · 2023-08-15T09:17:13Z

Same for me. I use the latest 2.0.7 version.
Android is rendering as expected:

iOS lags:

It would be super to fix this kind of issue!

dnfield · 2023-08-15T18:14:52Z

CAn you try this on the beta of Flutter?

This is a bug in impeller that I think exists on stable but not beta.

maksym-letiushov · 2023-08-16T10:28:51Z

@dnfield thank you for response

I've checked on beta and even on master channel and the problem still exists.

result on beta channel

doctor on beta

[✓] Flutter (Channel beta, 3.13.0-0.4.pre, on macOS 13.3.1 22E772610a darwin-x64, locale en-UA)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.3)

result on master channel

doctor on master

[✓] Flutter (Channel master, 3.14.0-5.0.pre.27, on macOS 13.3.1 22E772610a darwin-x64, locale en-UA)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.3)

Primo85 · 2023-08-16T10:32:33Z

@dnfield thank you for response, sorry for the delay.
I have checked it too, on the master, the problem still occurs.

aytunch · 2023-09-06T15:35:22Z

Hi,
The moment I remove the colorFilter: ColorFilter.mode(color, BlendMode.srcIn) field, this problem goes away.
But of course, when we do this, the SVGs fallback to their natural color rendering the app useless.
The svgs have such jagged lines that the whole app looks really bad.
Is this issue caused by Impeller or this plugin? Should we open up an issue in Flutter/engine repo?

cliftonlabrum · 2023-09-28T03:05:31Z

Any progress with this one?

dnfield · 2023-09-28T03:23:08Z

I don't have a good reproduction case for this. I need one htat I can reproduce locally to be able to work on this.

cliftonlabrum · 2023-09-28T05:56:53Z

Here is a reproduction of the issue. I am using Xcode 15 with an iPhone 15 Pro simulator on Flutter 3.13.5.

pubspec.yaml

name: flutter_svg_rendering_bug
description: A new Flutter project.
publish_to: 'none'
version: 1.0.0+1
environment:
  sdk: '>=3.1.2 <4.0.0'
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  flutter_svg: ^2.0.7
dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0
flutter:
  assets:
    - assets/menu.svg
    - assets/add.svg

main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Center(
        child: SizedBox(
          width: 200,
          height: 200,
          child: Column(
            children: [
              Row(
                children: [
                  SvgPicture.asset(
                    'assets/menu.svg',
                    colorFilter: const ColorFilter.mode(Colors.orange, BlendMode.srcIn),
                    width: 20,
                    height: 16,
                  ),
                  const SizedBox(width: 30),
                  SvgPicture.asset(
                    'assets/add.svg',
                    colorFilter: const ColorFilter.mode(Colors.orange, BlendMode.srcIn),
                    width: 24,
                    height: 24,
                  ),
                ],
              ),
              const SizedBox(height: 30),
              Row(
                children: [
                  SvgPicture.asset(
                    'assets/menu.svg',
                    //colorFilter: const ColorFilter.mode(Colors.red, BlendMode.srcIn),
                    width: 20,
                    height: 16,
                  ),
                  const SizedBox(width: 30),
                  SvgPicture.asset(
                    'assets/add.svg',
                    //colorFilter: const ColorFilter.mode(Colors.orange, BlendMode.srcIn),
                    width: 24,
                    height: 24,
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Attached are the two SVG assets to include.

The screenshots attached show that the orange icons have a colorFilter property set, and the blue ones do not (the blue color is from the SVG itself).

Hopefully you can see how the edges of the orange icons are jagged and distorted. Let me know you need anything else. Thanks for your help!

Primo85 · 2023-09-28T06:07:25Z

Hi.
Another example of reproduction is in my first post, in the main.dart tab. I'm using Xcode 14.3 and Flutter 3.10.6(and also Channel master, 3.11.0-14.0.pre.6).
Thank you.

armandsLa · 2023-10-02T07:52:19Z

Having the same issue.

When adding icon to a CupertinoButton and it's pressed down, icon renders correctly. When it's released, it goes back to jagged state.

simonNEON · 2023-10-05T10:53:12Z

Are there any updates on this? Im having the same problems and not yet found a solution...

SivaramSS · 2023-10-26T08:10:39Z

Facing the same issue with flutter 3.13.9.

Pomis · 2023-10-27T10:36:17Z

Flutter 3.13.8 with Impeller, all color-filtered SVGs look jagged

Using jovial_svg as an alternative for now, it allows coloring by substituting svg file text content

armandsLa · 2023-11-02T14:29:40Z

I've found a temporary fix. Wrapping SvgPicture in Opacity and setting the opacity to 0.99 fixes the issue. Opacity reduction of 1% is visually unnoticeable.

Opacity(
  opacity: 0.99,
  child: SvgPicture.asset("asset/img_check.svg",
    colorFilter: ColorFilter.mode(
      Colors.red,
      BlendMode.srcIn,
    ),
  ),
);

LeonardoRosaa · 2023-11-11T00:02:52Z

I've found a temporary fix. Wrapping SvgPicture in Opacity and setting the opacity to 0.99 fixes the issue. Opacity reduction of 1% is visually unnoticeable.
Opacity(
  opacity: 0.99,
  child: SvgPicture.asset("asset/img_check.svg",
    colorFilter: ColorFilter.mode(
      Colors.red,
      BlendMode.srcIn,
    ),
  ),
);

Not sure about this solution. After some hours of debugging this issue, I noticed that the issue could be in the colorFilter parameter (the new way to set colors).

Wrapping the icon with the Opacity widget made all icons more "pixelated" in my case.

RicharC293 · 2023-11-24T20:02:05Z

Same issue here

felipecastrosales · 2023-12-01T19:08:19Z

Same issue here using 3.16.2 version, with this fix: flutter/flutter#138598.

dimazelinskyi · 2023-12-10T12:00:10Z

It looks like related issue psk907/fluttermoji#35

HardikKotadiya · 2024-01-01T11:54:10Z

Facing the same issue with flutter 3.16.5. I had tried lots of solution but not worked, please let me know if anyone get solution.

I had already post issue in stackoverflow too at below link

https://stackoverflow.com/questions/77741764/flutter-svg-icons-get-pixelated-in-bottom-bar-in-flutter

kienvtqhi · 2024-01-08T02:34:12Z

I got the same issue

haomun0731 · 2024-01-10T07:38:04Z

This issue occurs on my iOS simulator. I temporarily fixed it by disabling impeller rendering in iOS debug mode. I added the following lines to Info-Debug.plist:

<key>FLTEnableImpeller</key>
<false />

For more information, please refer to: https://docs.flutter.dev/perf/impeller#ios

capsulekenny · 2024-01-23T09:45:08Z

Any updates on this?

armandsLa · 2024-02-27T20:24:36Z

This was clearly an issue with Flutter itself. Just run the test with 3.19.0 version and icons look good.

vase4kin · 2024-02-28T07:15:51Z

I can confirm. It is gone. The flutter version I tested with is 3.19.1.

felipecastrosales · 2024-02-29T19:02:58Z

I can confirm, in latest Flutter versions (3.19.x) this issue isn't present. I think also that this issue can be closed.

This was clearly an issue with Flutter itself. Just run the test with 3.19.0 version and icons look good.

ghost · 2024-03-25T09:57:23Z

And how fix this issue in 2024?

flutter_svg: ^1.1.6

In my case help not use color property:

SvgPicture.asset(
  SvgAssetName.chat,
  // color: AppColors.bottomBarAppIcon,
)

LeonardoRosaa · 2024-04-03T22:00:06Z

The issue is back in the Flutter version 3.19.4. Some icons are pixelated in this Flutter version and only when I ran the app in the release mode.

Kal-Elx · 2024-04-15T10:14:30Z

I can also confirm that the issue is back in later Flutter versions.
@dnfield Do you know if this is currently being worked on?

armandsLa · 2024-05-03T08:03:41Z

Fortunately, the patch is still working.

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

class SvgIcon extends StatelessWidget {

  final String path;
  final Color color;

  final double? width;
  final double? height;

  SvgIcon({
    required this.path,
    required this.color,
    this.width,
    this.height,
  });

  @override
  Widget build(BuildContext context) {
    if (Platform.isAndroid) {
      return _buildImage();
    }
    return Transform.scale(
      scale: 0.99,
      child: _buildImage(),
    );
  }

  Widget _buildImage() {
    final colorFilter = ColorFilter.mode(
      color,
      BlendMode.srcIn,
    );
    return SvgPicture.asset(path,
      colorFilter: colorFilter,
      width: width,
      height: height,
    );
  }

}

L1u6 · 2024-05-22T14:18:50Z

Still present with Flutter 3.22.0

EgorK0rshun · 2024-05-23T10:22:48Z

Still present with Flutter 3.22.1

felipecastrosales · 2024-06-05T14:42:36Z

Hey guys, I see that @dnfield has been inactive on GitHub for a while now. So, I don't think he's seen the latest on this issue.

Another person I see who collaborates on the package and is very close to the Flutter team is @jonahwilliams, who could possibly give us some guidance on what to do here - or check what might have caused the error to happen again.

@Primo85, please reopen the issue so that this can be given some priority.

johnthiriet · 2024-06-06T05:27:51Z

Hello, I can also confirm that the issue is present in Flutter 3.22.1
It's not reproduced on the main channel though.
The scale hack still works

maxAtIppen · 2024-06-28T09:25:19Z

I reproduced that issue with flutter_svg 2.0.10+1 and flutter 3.22.2

maxAtIppen · 2024-07-11T14:29:04Z

Fortunately, the patch is still working.

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

class SvgIcon extends StatelessWidget {

  final String path;
  final Color color;

  final double? width;
  final double? height;

  SvgIcon({
    required this.path,
    required this.color,
    this.width,
    this.height,
  });

  @override
  Widget build(BuildContext context) {
    if (Platform.isAndroid) {
      return _buildImage();
    }
    return Transform.scale(
      scale: 0.99,
      child: _buildImage(),
    );
  }

  Widget _buildImage() {
    final colorFilter = ColorFilter.mode(
      color,
      BlendMode.srcIn,
    );
    return SvgPicture.asset(path,
      colorFilter: colorFilter,
      width: width,
      height: height,
    );
  }

}

This workaround works for me in debug mode but not in release mode. Does it work for you all in release mode?

bahadurh · 2024-07-11T15:00:13Z

Fortunately, the patch is still working.
import 'dart:io';

import 'package:flutter/material.dart';

import 'package:flutter_svg/svg.dart';

class SvgIcon extends StatelessWidget {

final String path;

final Color color;

final double? width;

final double? height;

SvgIcon({
required this.path,
required this.color,
this.width,
this.height,
});

@OverRide

Widget build(BuildContext context) {
if (Platform.isAndroid) {
  return _buildImage();
}
return Transform.scale(
  scale: 0.99,
  child: _buildImage(),
);
}

Widget _buildImage() {
final colorFilter = ColorFilter.mode(
  color,
  BlendMode.srcIn,
);
return SvgPicture.asset(path,
  colorFilter: colorFilter,
  width: width,
  height: height,
);
}

}
This workaround works for me in debug mode but not in release mode. Does it work for you all in release mode?

Play with transform, for me 1.02 scale worked fine 👍🏻👍🏻

maxAtIppen · 2024-07-12T08:19:36Z

I tried 0.99, 1.01 and 1.02 but all of them still look pixelated.

Joan1211 · 2024-07-15T21:44:13Z

Same issue with flutter 3.22.2
Issue only on iOS.

Even values for the size (height:24, width: 24) : issue is not visible
Odd values for the size (height:23, width: 23) : issue is visible

SimoneScaglia · 2024-07-23T14:27:47Z

Same issue.

I solved it removing colorFilter parameter and specifying the color directly in svg code.

emirhankolver · 2024-07-28T10:24:11Z

I encountered an issue where icons appeared pixelated when using the ColorFilter parameter with the SvgPicture.asset widget. Initially, I tried using Transform.scale, but unfortunately, the icons still looked pixelated. Then, I added the filterQuality: FilterQuality.low parameter, which resolved the issue and the icons started to look great again.

Here's my Flutter details:

Flutter 3.22.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 761747bfc5 (8 weeks ago) • 2024-06-05 22:15:13 +0200
Engine • revision edd8546116
Tools • Dart 3.4.3 • DevTools 2.34.3

Here’s my codebase:

class IconView extends StatelessWidget {
  final IconAssetData? asset;
  final double? size;
  final Color? color;

  const IconView({
    super.key,
    this.asset,
    this.color,
    this.size = 24,
  });

  @override
  Widget build(BuildContext context) {
    if (asset == null) {
      return SizedBox(width: size, height: size);
    }
    final iconColor = color ?? context.theme.colorScheme.onSurface;
    if (Platform.isAndroid) {
      return _renderSVG(iconColor);
    }
    return Transform.scale(
      filterQuality: FilterQuality.low,
      scale: 0.9999,
      child: _renderSVG(iconColor),
    );
  }

  Widget _renderSVG(Color iconColor) {
    return SvgPicture.asset(
      asset!.path,
      width: size,
      height: size,
      colorFilter: ColorFilter.mode(iconColor, BlendMode.srcIn),
    );
  }
}

Previews:

filterQuality: FilterQuality.none
filterQuality: FilterQuality.high

qwertylolman · 2024-08-01T19:22:05Z

it's still present in the package :(
I have to replace colorFilter with colorMapper

beingsalmanshaikh · 2024-08-23T14:21:07Z

The issue is still present. Even the workaround is not working for some reason.

Workaround I tried:

return Transform.scale(
      filterQuality: FilterQuality.low,
      scale: 0.9999,
      child:  SvgPicture.asset(
      asset!.path,
      width: size,
      height: size,
      colorFilter: ColorFilter.mode(iconColor, BlendMode.srcIn),
    );
    );

Primo85 closed this as completed Aug 9, 2023

Primo85 reopened this Aug 10, 2023

aytunch mentioned this issue Sep 6, 2023

[Impeller] Text widget is rendered pixelated on iPhone XR when wrapped with Opacity widget. flutter/flutter#127386

Closed

dnfield closed this as completed Feb 29, 2024

maxAtIppen mentioned this issue Jul 11, 2024

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

Open

stuartmorgan mentioned this issue Nov 13, 2024

[flutter_svg] Artifacts/Pixelated Issues on iOS with changed colors of SVG when using impeller flutter/flutter#158755

Closed

[iOS] Pixelated svg icons #975

[iOS] Pixelated svg icons #975

Comments

Primo85 commented Aug 9, 2023 • edited Loading

maksym-letiushov commented Aug 12, 2023

neronovs commented Aug 15, 2023

dnfield commented Aug 15, 2023

maksym-letiushov commented Aug 16, 2023

Primo85 commented Aug 16, 2023 • edited Loading

aytunch commented Sep 6, 2023

cliftonlabrum commented Sep 28, 2023

dnfield commented Sep 28, 2023

cliftonlabrum commented Sep 28, 2023 • edited Loading

pubspec.yaml

main.dart

Primo85 commented Sep 28, 2023

armandsLa commented Oct 2, 2023 • edited Loading

simonNEON commented Oct 5, 2023

SivaramSS commented Oct 26, 2023

Pomis commented Oct 27, 2023 • edited Loading

armandsLa commented Nov 2, 2023

LeonardoRosaa commented Nov 11, 2023

RicharC293 commented Nov 24, 2023

felipecastrosales commented Dec 1, 2023

dimazelinskyi commented Dec 10, 2023

HardikKotadiya commented Jan 1, 2024

kienvtqhi commented Jan 8, 2024

haomun0731 commented Jan 10, 2024 • edited Loading

capsulekenny commented Jan 23, 2024

armandsLa commented Feb 27, 2024

vase4kin commented Feb 28, 2024

felipecastrosales commented Feb 29, 2024

ghost commented Mar 25, 2024

LeonardoRosaa commented Apr 3, 2024 • edited Loading

Kal-Elx commented Apr 15, 2024

armandsLa commented May 3, 2024

L1u6 commented May 22, 2024

EgorK0rshun commented May 23, 2024

felipecastrosales commented Jun 5, 2024

johnthiriet commented Jun 6, 2024

maxAtIppen commented Jun 28, 2024 • edited Loading

maxAtIppen commented Jul 11, 2024

bahadurh commented Jul 11, 2024

maxAtIppen commented Jul 12, 2024

Joan1211 commented Jul 15, 2024

SimoneScaglia commented Jul 23, 2024

emirhankolver commented Jul 28, 2024 • edited Loading

qwertylolman commented Aug 1, 2024

beingsalmanshaikh commented Aug 23, 2024 • edited Loading

Primo85 commented Aug 9, 2023 •

edited

Loading

Primo85 commented Aug 16, 2023 •

edited

Loading

cliftonlabrum commented Sep 28, 2023 •

edited

Loading

armandsLa commented Oct 2, 2023 •

edited

Loading

Pomis commented Oct 27, 2023 •

edited

Loading

haomun0731 commented Jan 10, 2024 •

edited

Loading

LeonardoRosaa commented Apr 3, 2024 •

edited

Loading

maxAtIppen commented Jun 28, 2024 •

edited

Loading

emirhankolver commented Jul 28, 2024 •

edited

Loading

beingsalmanshaikh commented Aug 23, 2024 •

edited

Loading