Repository: flutter
Issue: [flutter_svg] ColorFilter being applied to whole app instead of just the SVG
Labels: package,P3,p: flutter_svg

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

Original report by @wilsonsilva on Jul 8, 2023

My ColorFilter is being applied to the whole app, not just the container of the SVG. I tried wrapping the SVG in a `Container` and other widgets but it still applies the filter to the whole app. Is this expected?

<img width="494" alt="Screenshot 2023-07-08 at 19 12 21" src="https://github.com/dnfield/flutter_svg/assets/645203/5307c262-2508-434c-a74d-1fc5e9cce49d">

Code:

```dart
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: SizedBox(
            width: 300,
            height: 300,
            child: SvgPicture.asset(
              'assets/svg/dart.svg', // from flutter_svg/example/assets/dart.svg
              colorFilter: const ColorFilter.mode(
                Color(0xFFFFC555),
                BlendMode.hardLight,
              ),
            ),
          ),
        ),
      )
    );
  }
}
```

```
FlutterSvg 2.0.7

Flutter 3.10.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 796c8ef792 (4 weeks ago) • 2023-06-13 15:51:02 -0700
Engine • revision 45f6e00911
Tools • Dart 3.0.5 • DevTools 2.23.1
```

---
Comment by @wilsonsilva on Jul 9, 2023
This also happens in the example app.

<img width="1728" alt="Screenshot 2023-07-09 at 08 38 43" src="https://github.com/dnfield/flutter_svg/assets/645203/7da5926c-752f-42df-b5d1-af6a0789191e">


---
Comment by @MrCsabaToth on Jul 15, 2023
Could be related to #942 or #938? What happens if you try `ColorFilter.mode(Colors.transparent, BlendMode.srcATop)`. If that works maybe you can cast the `Color(0xFFFFC555)` backdrop with a widget behind the `SvgPicture`. I was able to work around my problem while still staying with impeller that way.

---
Comment by @noinskit on Aug 17, 2023
This bit me as well. As an extra data point, it only started after I upgraded from Flutter 3.10.x to Flutter 3.13.0. Using the ColorFiltered widget (wrapping SvgPicture) works around the issue for me.

---
Comment by @Mohdx on Oct 4, 2023
try `BlendMode.srcIn`
```
  colorFilter: const ColorFilter.mode(
                MainColors.color2,
                BlendMode.srcIn,
              ),
```

---
Comment by @minhdanh on May 15, 2024
Still happening to me. In my case I was trying to set the image to grayscale:
```
                                                  SvgPicture.asset(
                                                      'assets/images/svg/undraw_profile_pic_ic5t.svg',
                                                      semanticsLabel: 'Profile pic',
                                                      colorFilter: const ColorFilter.mode(
                                                        Colors.grey,
                                                        BlendMode.saturation,
                                                      ),
                                                    ),
 ```

---
Comment by @martin-braun on May 28, 2024
I don't know if this is related, but for me all color filters, except for `modulate` would dye even the transparent parts of my SVG.