[解決] flutterでflutter_svgを使用してSVGを表示したら黒くなる

dev
Sponsored links

現象

FlutterでSVGを表示したら一部の画像が上図のように真っ黒で表示されてしまったので、
flutter_svg black
などで調べていると、issueにも上がっていたけど対応しないよう。
https://github.com/dnfield/flutter_svg/issues/166#issuecomment-495863647
https://stackoverflow.com/questions/58567864/im-trying-use-flutter-svg-but-load-with-black-svg

原因と解決策

使用したライブラリの flutter_svg style タグに対応していないのが原因だったらしい。
変換ツールの SVGcleaner を使えばちゃんと表示されるようになるとのこと。
CUIでも使えるっぽいが、以下GUIで試してみた。
https://github.com/RazrFalcon/svgcleaner-gui/releases

変換したい画像を選択してOK押すだけで変換してくれる。

Jon & Jessさん

ちなみにこのポップなアバター画像は クリエイターの Jon & Jessさんという方が提供する以下
https://joeschmoe.io/
APIで画像表示もできる遊びごころある作品だ。
この画像を使わせてもらった神経衰弱ゲームを以下で公開しているのでよろしくお願いします。
https://fun-fun-memorize.web.app/
flutterで同じようなアプリを作ろうと思って今回SVG表示を試していたところ。

変換前のSVG

style タグがある。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 125 125" style="enable-background:new 0 0 125 125;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#FCE7D4;stroke:#020202;stroke-width:0.75;stroke-miterlimit:10;}
    .st1{fill:#F44711;}
    .st2{fill:#3CAA33;stroke:#000000;stroke-width:0.75;stroke-miterlimit:10;}
    .st3{fill:#020202;stroke:#FFFFFF;stroke-width:0.75;stroke-miterlimit:10;}
    .st4{fill:none;stroke:#000000;stroke-width:0.75;stroke-miterlimit:10;}
    .st5{fill:#F99A12;stroke:#000000;stroke-width:0.75;stroke-miterlimit:10;}
    .st6{fill:#202133;stroke:#000000;stroke-width:0.75;stroke-miterlimit:10;}
    .st7{fill:#E0BE2F;stroke:#020202;stroke-width:0.75;stroke-miterlimit:10;}
    .st8{fill:#7F500B;stroke:#020202;stroke-width:0.75;stroke-miterlimit:10;}
    .st9{fill:#FFFFFF;}
    .st10{fill:#020202;stroke:#020202;stroke-width:0.75;stroke-miterlimit:10;}
    .st11{fill:none;stroke:#020202;stroke-width:0.75;stroke-miterlimit:10;}
    .st12{fill:#FFFFFF;stroke:#020202;stroke-width:0.75;stroke-miterlimit:10;}
    .st13{fill:#F44711;stroke:#020202;stroke-width:0.75;stroke-miterlimit:10;}
</style>
<title>Artboard 9</title>
<g id="Person_6">
    <path id="neck" class="st0" d="M77.1,82.3c0,0-0.9-1-0.9-1.6V74L50,75.3c0,0,0.3,8-0.3,8.7c0,0-6.1,1.6-5.2,3.5
        c1.9,4,10.2,9.5,15.9,9.9c7.4,0.5,12.9-0.1,17.3-3C80.5,92.5,81,84,77.1,82.3z"/>
    <path id="face-2" class="st0" d="M80.9,56.9c0,0-0.5,9.3-0.7,10c-0.3,1.3-0.8,2.5-1.5,3.6c-1.7,2.7-3.5,5.2-5.6,7.6
途中略.....
</svg>

変換後のSVG

style タグは無くなったが、
コメントとか id とかも無くなっている。詳しいことはよくわからないが、これで表示されるなら良し。

<svg enable-background="new 0 0 125 125" viewBox="0 0 125 125" xmlns="http://www.w3.org/2000/svg">
    <path d="m77.1 82.3s-.9-1-.9-1.6v-6.7l-26.2 1.3s.3 8-.3 8.7c0 0-6.1 1.6-5.2 3.5 1.9 4 10.2 9.5 15.9 9.9 7.4.5 12.9-.1 17.3-3 2.8-1.9 3.3-10.4-.6-12.1z" fill="#fce7d4" stroke="#020202" stroke-miterlimit="10" stroke-width=".75" />
    <path d="m80.9 56.9s-.5 9.3-.7 10c-.3 1.3-.8 2.5-1.5 3.6-1.7 2.7-3.5 5.2-5.6 7.6-1 1-3.1 4.2-4.3 4.5-1.9.5-3.9.9-5.9 1-1.3-.1-5.8-.7-6.8-1.3s-4.4-4.7-7.2-8.4-4.3-6.8-4.5-7.8c-.2-1.5-.3-2.9-.3-4.4l-.5.1s-.1 1-.9 1.1c-1.2.2-1.9-1.4-2.2-2.3-.5-1.5-.3-3.2-.8-4.8s-3.1-6.9-1.1-8.3c1.8-1.2 3.3.5 3.9 2.1.2.5.3 1.1.4 1.7l.3-.1s0-3 0-5.1c.1-3.9-1.1-8.3.4-12.1 4.8-12.5 9.4-13 20.6-13.3 10-.3 15.6 7.8 16.3 11.5.7 3 1 6 .9 9-.2 2.8-.5 9.6-.5 9.6l.3.1c.4-1.1.8-2.3 1.3-3.3.4-.9 1.4-1.3 2.3-1 .9.4 1.3 1.4 1 2.3-.3 1.1-.8 4.2-1 5.4-.1.9-.1 1.8 0 2.8 0 .8-.4 3.7-1.6 3.7-.9-.1-2.7-.1-2.3-3.9z" fill="#fce7d4" stroke="#020202" stroke-miterlimit="10" stroke-width=".75" />
    <path d="m48.1 101.4h31v5.2h-31z" fill="#f44711" />
    <path d="m48.1 113.1h31v5.2h-31z" fill="#f44711" />
    <g stroke-miterlimit="10" stroke-width=".75">
        <path d="m107 70.4s-6.7-4.1-7.5-5c-2.3-2.6-7.9-1.5-9.2.1s-1.1 4.4-.9 4.9 4.4 3.8 6.2 4.2 2.5-.3 2.6.8-.9 2.8-.6 4.5-.9 2.4.6 4.1c1.3 1.7 2.3 3.7 3.1 5.7.4.9 2.6 1.3 4.1 1.7s1.6 7.1 1.7 11.9-.1 5.7 1.3 10 1.7 3.4.3 6.3-.6 4 .1 4.5.5.8 2.6-1.5 1.2-4.9 1.6-8.4.8-7.1.8-7.1l1.4 3s2.2-25.6 2.4-28-2.8-8.7-4.8-11-5.8-.7-5.8-.7z" fill="#3caa33" stroke="#000" />
        <path d="m95.5 67.8c0 .8-1.5 1.3-1.9 1.3s-.5-.3-.5-1.2.9-2 1.3-2 1.1 1.1 1.1 1.9z" fill="#020202" stroke="#fff" />
        <path d="m106.9 70.6c-.9 2.9-.9 6 0 8.9 1 3.3 2.4 6.5 4.1 9.5" fill="none" stroke="#000" />
        <path d="m88.9 71.5c.6-.7 1.6-1 2.5-.8 1.4.3 4.6 1.1 5 1.9s1.4 2.2 0 2.2-3.8-.9-3.9.5 1.6 2.8.5 2.6c-1 0-2-.6-2.4-1.5-.6-1.2-2.3-2.8-1.7-4.9z" fill="#f99a12" stroke="#000" />
        <path d="m122.6 125s-.6-6.4-2-13.6c-2.6-9.6-3.5-14.6-9.9-17.8-6.8-3.4-21.8-6.9-28.2-8.3-1.1-1.9-4.8-4-4.3-1.8.6 2.5.8 4.2-.7 5.5-1.3 1.4-2.9 2.4-4.7 3-2.1.6-.9 8-.9 8-.6.2-1.3.4-2 .4h-2.2l.2 25" fill="#202133" stroke="#000" />
        <path d="m57.3 125 .1-24.5h-2.3c-.5 0-1.1-.1-1.6-.3.1 0 .1-.1.1-.2 0 0 1.1-7.4-.9-8-1.8-.6-3.4-1.6-4.7-3-1.5-1.3-2.2-3-1.6-5.5.5-2.2-2.4-.2-3.4 1.6-6 1.3-21.8 4.9-28.8 8.4-6.4 3.2-7.3 8.2-9.9 17.8-2 9-2.2 13.6-2.2 13.6" fill="#202133" stroke="#000" />
        <path d="m103.9 90.7c-1.3-.3-2.1-1.5-3.4-.7-1.1.7-2 1.7-2.7 2.8-.5.8-.8 1.7-1 2.6-.2.8-.1 1.7.2 2.5.3.3.9-2.4 1.7-3.2.5-.6 1.4-1.5 2.4-1.2-.1.4-.3.8-.5 1.1-.1.5-.2 1-.2 1.5.1 1.2.7 2.3 1.7 3 .3.2.6.4 1 .4s.8-.3 1-.7c-.8 0-1.1-.6-1.4-1.4-.3-.7-.3-1.6.1-2.3.3-.7.7-1.3 1.3-1.8.7-.5 1.6-.8 2.3-1.3-.4-.2-.8-.4-1.2-.6s-.7-.3-1.1-.4z" fill="#f99a12" stroke="#000" />
        <circle cx="83.2" cy="105.8" fill="#e0be2f" r="3.3" stroke="#020202" />

変換されたSVGを表示した結果がこちら

黒くならず、きれいに表示された :tada:

Comments

タイトルとURLをコピーしました