[flutter_svg] SVG の複数の色を ColorMapper を使って変更する

flutter_svg パッケージで SVG 画像の色を変更して表示する方法についてまとめます。

• flutter_svg の v2.x でのコードと実行結果を掲載します
• 例として挙げるSVG画像は背景が透過されているものですが、スクリーンショットの都合で、背景は白色に表示されています

単色の場合

次のような塗り一色の SVG 画像の色を変更するこの場合は、 ColorFilter.mode を使います。

置き換えたい色と、混色方法として BlendMode.srcIn を指定します。

SvgPicture.string(
  svgStarString,
  colorFilter: ColorFilter.mode(
    Colors.lightBlue,
    BlendMode.srcIn,
  ),
);

結果はこのようになります。

複数色の場合

次のように複数の色で構成される🐤の SVG 画像のそれぞれの色を任意の色に変更したいケースがあります。

この🐤の SVG 画像は ChatGPT に描かせたものです。
note / ChatGPTにSVGでお絵描きさせる

これを前述の ColorFilter で行うと、すべての色に同じフィルターがかかってしまうため、意図した通りにすることができません（下図は、前述と同じ BlendMode.srcIn を使った場合の結果）。

それぞれの色を任意の色に変更する場合は ColorMapper を使います。例えば、赤は青に変更、緑は黄色に変更、といったように色のマッピング方法を指定するイメージです。

今回は 🐤の体の黄色を青色、手足のオレンジ色をピンク色に変更してみます。ColorMapper クラスを継承したクラスで substitute メソッドをオーバーライドし、色のマッピング方法を実装します。

final class PiyoColorMapper extends ColorMapper {
  const PiyoColorMapper();

  @override
  Colot substitute(String? id, String elementName, String attributeName, Color color) {
    return switch (color) {
      Color(0xFF00FFFF) /* yellow */ -> Colors.lightBlue,
      Color(0xFFFF5A00) /* orange */ -> Colors.pink,
      _ -> color,
    };
  }  
}

あとは作った ColorMapper のインスタンスを指定して SVG 画像を表示するだけです。

SvgPicture(
  SvgStringLoader(svgPiyoString),
  colorMapper: PiyoColorMapper(),
);

結果はこのようになりました。