📝

flutterでSVGが正しく表示されない問題解決した

2024/05/02に公開

*この問題はflutter_svgのライブラリについてです。
https://pub.dev/packages/flutter_svg

問題の箇所

SVGの形式によっては、以下のように正しく表示されない問題があります。
正しく表示できているものは正しい形式のもの。

問題の原因

問題は以下で言われている通り、対応していないタグのstyleタグが入ってしまっているからだと思います。
https://github.com/dnfield/flutter_svg/issues/105

対応してくれたら良いのにと思いましたが、
「全体の仕様を変えないといけないし、これ以上複雑になる」
と作者が発言していることから対応は期待できないでしょう。

問題の解決

根本的な解決にはなっていないですが、Figmaの場合、出力形式のColor profileを「sRGB」にすることで解決しました。
この形式にすることでstyleタグが挿入されないようです。
Figmaじゃない方はstyleタグが挿入されない出力形式にすることで対応できそうです。

さいごに

👋 主にFlutter使ってるエンジニアの pomm(ぽむ)です! Flutterやエンジニアリングについて、業務や趣味の中で気づいたTipsなどをまとめてます。

いいね・フォローしてくれると喜びます!

この記事が1人でも多くの方へ参考になっていれば嬉しいです。

株式会社フライヤー Tech Blog

Discussion