【Flutter】SVG画像が黒くなってしまうことの対処法

この記事は、【 可茂IT塾 Advent Calendar 2021 】の6日目の記事です。

FultterでSVG画像を表示した際に黒潰れになってしまうことがあります。
原因と対処法を紹介します。

Version

• Flutter 2.5.2
• Dart 2.14.3
• flutter_svg: ^1.0.0

原因

使用したSVGにstyleタグが含まれているから。flutter_svgパッケージはstyleタグに対応していないらしいです。

twitter_logo_blue.svg

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 248 204" style="enable-background:new 0 0 248 204;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#1D9BF0;}
</style>
<g id="Logo_1_">
    <path id="white_background" class="st0" d="M221.95,51.29c0.15,2.17,0.15,4.34,0.15,6.53c0,66.73-50.8,143.69-143.69,143.69v-0.04
        C50.97,201.51,24.1,193.65,1,178.83c3.99,0.48,8,0.72,12.02,0.73c22.74,0.02,44.83-7.61,62.72-21.66
        c-21.61-0.41-40.56-14.5-47.18-35.07c7.57,1.46,15.37,1.16,22.8-0.87C27.8,117.2,10.85,96.5,10.85,72.46c0-0.22,0-0.43,0-0.64
        c7.02,3.91,14.88,6.08,22.92,6.32C11.58,63.31,4.74,33.79,18.14,10.71c25.64,31.55,63.47,50.73,104.08,52.76
        c-4.07-17.54,1.49-35.92,14.61-48.25c20.34-19.12,52.33-18.14,71.45,2.19c11.31-2.23,22.15-6.38,32.07-12.26
        c-3.77,11.69-11.66,21.62-22.2,27.93c10.01-1.18,19.79-3.86,29-7.95C240.37,35.29,231.83,44.14,221.95,51.29z"/>
</g>
</svg>

対処法

SVGCleanerというソフトを使ってstyleタグを消去したSVGを作り直します。

①SVGCleanerをインストール

ここからインストールします
https://github.com/RazrFalcon/svgcleaner-gui/releases

②styleタグのないSVGを作る

画像のように操作するだけで、SVGからstyleタグを消去したSVGを作り直してくれます。

fixed_twitter_logo_blue.svg

<svg enable-background="new 0 0 248 204" viewBox="0 0 248 204" xmlns="http://www.w3.org/2000/svg"><path d="m221.95 51.29c.15 2.17.15 4.34.15 6.53 0 66.73-50.8 143.69-143.69 143.69v-.04c-27.44.04-54.31-7.82-77.41-22.64 3.99.48 8 .72 12.02.73 22.74.02 44.83-7.61 62.72-21.66-21.61-.41-40.56-14.5-47.18-35.07 7.57 1.46 15.37 1.16 22.8-.87-23.56-4.76-40.51-25.46-40.51-49.5 0-.22 0-.43 0-.64 7.02 3.91 14.88 6.08 22.92 6.32-22.19-14.83-29.03-44.35-15.63-67.43 25.64 31.55 63.47 50.73 104.08 52.76-4.07-17.54 1.49-35.92 14.61-48.25 20.34-19.12 52.33-18.14 71.45 2.19 11.31-2.23 22.15-6.38 32.07-12.26-3.77 11.69-11.66 21.62-22.2 27.93 10.01-1.18 19.79-3.86 29-7.95-6.78 10.16-15.32 19.01-25.2 26.16z" fill="#1d9bf0"/></svg>

作り直したSVGを確認すると、styleタグが消えていることが分かります。

③確認

黒潰れしていないSVGを表示することができました。
比較画像👇

さいごに

flutter_svgパッケージがstyleタグに対応していないことが原因なので今後のアップデートで改善されるかもしれません。