Imported from dnfield/flutter_svg#891

Original report by @Maatteogekko on Mar 17, 2023

Take this svg as an example

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path fill="#293540" stroke="#293540" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
    d="m19 21-7-5-7 5V5c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2v16Z" />
</svg>

I am using the color mapper API to remap colors like this:

class _ColorMapper implements ColorMapper {
  const _ColorMapper({
    required this.baseColor,
  });

  static const _rawBaseColor = Color(0xFF293540);

  final Color baseColor;

  @override
  Color substitute(String? id, String elementName, String attributeName, Color color) {
    if (color == _rawBaseColor) return baseColor;

    return color;
  }
}

// ---

SvgPicture(
  SvgStringLoader(
    icon,
    colorMapper: _ColorMapper(
      baseColor: iconColor,
    ),
  ),
);

If I use a color with opacity != 1, let's say iconColor = Color(0x802260DD) as the base color, only the fill gets the opacity applied; the stroke remains fully opaque.

Maybe related to dnfield/flutter_svg#617

Comment by @dnfield on Mar 17, 2023
Yeah, there's a bug here for sure. Taking a look.

Comment by @dnfield on Mar 17, 2023
Ok. So I can definitely fix the whole "stroke opacity is getting ignored" part, but be aware that strokes and fills get composited individually and the opacity will be multiplicative - so your case will be something like this SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path fill="#293540" stroke="#293540" fill-opacity=".5" stroke-opacity=".5" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
    d="m19 21-7-5-7 5V5c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2v16Z" />
</svg>

Which will not look like a single uniform color.

Comment by @Maatteogekko on Mar 18, 2023
You're right. To get a uniform color I tried with this:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path fill="#293540" stroke="#293540" opacity=".5" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
    d="m19 21-7-5-7 5V5c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2v16Z" />
</svg>

But it still doesn't render correctly. I guess it's the same problem?

Comment by @dnfield on Mar 19, 2023
If you want it uniform just remove the stroke attribute(s)

Comment by @devmaslove on Oct 18, 2023
I have the same problem. In svg file: stroke="currentColor"
If I set currentColor with opacity -

theme: SvgTheme(
                currentColor: Colors.white.withOpacity(0.5),
              ),

opacity is ignored