FlutterのSVG画像：アセット、サイズ、表示を確認する

FlutterでSVGアセットを表示するには、flutter_svgを追加し、pubspec.yamlにファイルを宣言して、同じパスをSvgPicture.assetで読み込みます。寸法か適切なレイアウト制約を与え、アプリ内で確認します。パッケージのassetコンストラクターは、この読み込み方法を説明しています。

目的のファイルを読み込めたかと、レンダラーが目的のアートワークを再現したかは、分けて考えます。描画を書き出し直してもアセットキーの誤字は直りません。キーを直しても非対応の効果は単純化されません。

本記事は独自の丘と太陽のイラストを使い、確認を扱いやすくします。コードは資料のAPIに従っていますが、コンパイルしたアプリのテスト結果報告ではありません。

確認できる小さな元データから始める

Flutterプロジェクトにassets/illustrations/hills.svgを作ります。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 48">
  <circle cx="49" cy="11" r="6" fill="#e99b30"/>
  <path d="M4 42L24 14L44 42Z" fill="#167d8d"/>
  <path d="M28 42L43 23L60 42Z" fill="#233b63"/>
</svg>

元データには重なった三角形の丘が二つと、離れた琥珀色の太陽があります。明示的な塗りを使い、文字やリンク画像はなく、太陽と丘の間に見える隙間があります。アプリの確認で使う短い合格リストになります。

後で自身のアートワークを導入する際も、この単純なファイルのコピーを保持します。小さな元データは表示できるが置き換えた画像の表示に失敗する場合、読み込み設定全体を変える前に構造を比較します。

FlutterのSVGアセットはAndroid VectorDrawable XMLとは別の受け渡し経路です。ネイティブのAndroid drawableが目的なら、形式を互換と考えずAndroid VectorDrawableの準備ガイドを使います。

パッケージを追加し、正確なファイルを宣言する

Flutterプロジェクトのルートで公式のインストールコマンドを使います。

flutter pub add flutter_svg

次にpubspec.yamlの既存のflutter:欄にアセット項目を追加します。

flutter:
  assets:
    - assets/illustrations/hills.svg

二つ目のflutter:欄を作らず、現在の設定に統合します。示したインデントを保持します。Flutterのアセット資料は、パスをpubspec.yamlからの相対パスと定義し、列挙したファイルがアプリバンドルに入る仕組みを説明しています。

ファイル名、宣言、Dartの呼び出しで綴り、大文字と小文字、ディレクトリー構造を揃えます。最初の確認では、広いフォルダー指定より明示的なファイル指定の方が比較しやすくなります。後でディレクトリーを宣言する場合、Flutterの資料によると直下のファイルが対象で、入れ子のディレクトリーは独自の項目が必要です。

アセット設定を変更したら、通常の開発手順で再ビルドし実行します。エディターに見えるファイルが、今見ているアプリにすでに含まれているとは考えないでください。

決めたボックスにアートワークを読み込む

ウィジェットを含むDartファイルに次をインポートします。

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

画面の適した場所に次のウィジェットを置きます。

SvgPicture.asset(
  'assets/illustrations/hills.svg',
  width: 128,
  height: 96,
  fit: BoxFit.contain,
  semanticsLabel: 'Sun above two hills',
  errorBuilder: (context, error, stackTrace) =>
      const Text('Illustration unavailable'),
)

ボックスは元データの比率に従います。小さいサイズを試す前に、離れた太陽、丘の両方の色、外側の余白を確認します。その後、実際のコンポーネントの寸法を使います。上の数値は例であり、最小サイズや性能の推奨ではありません。

コンストラクターの資料は、読み込みによる予期しないレイアウト変化を防ぐため、明示的な寸法や厳密なレイアウト制約を推奨しています。ボックス内で小さく見えるなら、ウィジェットの寸法とともにviewBoxの空白を調べます。

ラベルはこの独立した画像の目的を説明します。semanticsLabel APIで画像に意味を伝えるラベルを設定します。すでに意味を伝える文字の横の装飾画像では、意味情報から除外することも検討します。excludeFromSemanticsはラベルより優先されます。各図形を個別にラベル付けするのではなく、コンポーネント全体が読み上げる意味を確認します。

読み込み中の表示とエラーを区別する

読み込み表示はSVGを受け付けた証拠ではありません。パッケージは取得や解析中にplaceholderBuilderを使い、現在のerrorBuilder APIは画像読み込みが失敗した場合のウィジェットを提供します。

上の例は短い文字の代替表示を使います。開発中に意図的にDartのパスを存在しない名前に変え、失敗を見分けられるか確認します。続ける前に正しいパスへ戻します。描画を変更せずに失敗表示を試せます。

次に実際の元データを試します。まだ失敗するなら診断出力を調べ、まず宣言したパスを比較します。別のSVGをたまたま表示するネットワークの例は、自分のローカルファイルのバンドルや機能対応を証明しません。

配色を保つか色付けするかを決める

丘を青緑と紺、太陽を琥珀色のままにするなら、colorFilterは未設定にします。意図的な単色処理には次のようなフィルターを追加します。

colorFilter: const ColorFilter.mode(
  Color(0xFF175CD3),
  BlendMode.srcIn,
),

パッケージはこの色付け方法を説明しています。FlutterのBlendModeリファレンスは、srcInが描画先の不透明度を使い、色チャンネルを無視すると説明しています。一様な色付けは元の配色の違いをなくします。デザインの選択であり、色の保持を修復するものではありません。

丘では、重なった三角形のコントラストを失うと読みにくくなるか確認します。別々に見える必要がある領域なら元の配色を保ちます。パッケージは選択的な置換用のColorMapperも説明していますが、不一致を診断する間は単純なフィルターなしから始めます。

ファイルが読み込めてから機能を単純化する

flutter_svgの資料は、CSS対応が不完全なためIllustratorの書き出しでプレゼンテーション属性を推奨し、外部リンク画像より埋め込み画像を推奨しています。コンパイラーによる互換性確認も提供しています。複雑なアセットを調べるときは、自身のFlutter／Dart環境でその確認に従います。

ブラウザーのプレビューは意図した外観の参考になりますが、すべてのSVG機能がパッケージで同じように描画される証明にはなりません。元データを保持し、コピーを一度に一つずつ単純化します。

文字を含むなら、アプリの文字として残すか固定のアートワークにするかを決めます。SVGのフォント変更ガイドは、文字やフォント処理で外観が変わる理由を説明しています。アセットパスの問題を解決するためにラベルをトレースしないでください。

UIアセット群では、見た目のサイズと間隔を一緒に比較します。UIキットのアイコン準備ガイドが統一の確認に役立ちます。

元データの復元が必要な場合にベクター化する

整理された既存のSVGを保持します。写真や質感のある背景は、適したラスターアセットの方が良い場合があります。拡張子を変えても有用なベクター形状にはなりません。

単純なイラストが粗いPNGでしか残っていないなら、PerfectVectorのPNGからSVGへの手順で編集可能な候補を準備できます。切り抜き、プレビューで不足した図形と不要な背景領域を確認し、SVGをダウンロードします。バンドルに追加して、読み込み、配色、サイズ、意味の確認を繰り返します。

丘の例では、離れた太陽と2色の斜面の区別を見ます。意図した構造があることを確認してください。埋め込みラスターのガイドは、SVGの外枠内にもピクセルが残り得る理由を説明しています。

最適化方針を選ぶ前にアプリ内で判断します。この手順は、SVGがPNGより小さい、または速いという一般的な保証をしません。

.NET MAUIでも使う場合は、MAUIの元データからPNGへの手順に従います。プロジェクトはSVGマスターを保持し、ビューはビルド中に準備したPNGを参照します。

よくある質問

FlutterにSVG画像を追加するにはどうしますか？ flutter_svgを追加し、pubspec.yamlにアセットを宣言し、一致するパスをSvgPicture.assetで読み込みます。寸法や適した制約を設定し、結果を確認します。

ローカルのSVGが出ないのはなぜですか？ まず宣言、正確なパス、読み込みエラー、レイアウトを確認します。単純な元データが表示できるなら、失敗するアートワークの構造と対応機能を比較します。

すべての色が同じになったのはなぜですか？ 一様なsrcIn色フィルターは見える配色を指定色に置き換えます。元の色の違いを保持するなら、そのフィルターを削除します。

Flutter用にPNGをSVGにする必要がありますか？ いいえ。アートワークに合うラスターアセットを使います。単純なラスターから編集可能な形状を復元する場合、ベクター化は任意です。

参考資料

1. flutter_svg — インストール — パッケージの導入とDartのインポート。
2. Flutter — アセットと画像の追加 — 宣言、パス、バンドル。
3. flutter_svg — SvgPicture.asset — 読み込み、寸法、収め方、意味の制御。
4. flutter_svg — errorBuilder — 読み込み中表示とは異なる失敗表示。
5. flutter_svg — semanticsLabel — 画像の意味上の目的。
6. Flutter — BlendMode — 不透明度によるsrcInの色処理。
7. flutter_svg — パッケージ資料 — 色付け、選択的な色対応、書き出し案内、互換性確認。

宣言した一つのアセットから始め、アプリでパス、配色、サイズ、意味を確認します。ラスターイラストの復元が必要なら、SVG候補を準備し、形を確認して、アセット群に追加する前に同じ確認を行います。