【Dart/Flutter】SVG画像がアプリ上に表示されない時どうしたか

起こったこと ・ Flutterアプリ上でSVG画像が表示されない

• Flutter 1.9.1+hotfix.4
• Dart 2.5.0

上記環境でアプリ開発中、読み込んだSVGファイルがiOS実機で表示されない
(ios simulator上では問題なく表示されていたのだが…)

前提 ・ そもそもSVGファイルって？

ベクター画像形式と呼ばれる画像フォーマットのひとつ。
JPEG形式、PNG形式など画像を点で描画するビットマップ画像とは異なり、
画像を計算式で表現するため、拡大縮小しても画像が劣化しない特徴がある。

参考 : https://ferret-plus.com/7089

解決方法 ・ サイズ指定するだけ

widthとheightの指定。

Before

BottomNavigationBarItem(
  icon: SvgPicture.asset(
    'assets/bottom_bar/home.svg'
  )
)

After

BottomNavigationBarItem(
  icon: SvgPicture.asset(
    'assets/bottom_bar/home.svg',
    width: 30.0,
    height: 30.0
  )
)

これだけ。簡単なことでした。

補足・SVGファイルの仕様

JPEGやPNGといったビットマップ画像とは異なり、
ベクター画像形式であるSVGファイルは「画像の大きさ」を情報として持たない場合がある。
ゆえに要素にwidthを指定してやらないと、widthに0が与えられ、見かけ上表示されない、ということが発生するらしい。

参考:https://jdash.info/archives/SVG_SVGZ_Graphic_File_dont_show_in_browser