FlutterでSVGが表示できない時の対処法

未分類
この記事は約9分で読めます。

背景

FlutterでAndroid、iOS、Webを対象にクロスプラットフォームのアプリケーションを開発しています。このアプリでは、SVG画像を表示するため、flutter_svgというパッケージを使用しています。しかし、SVG画像を表示するコードを書いても、エラーが出力され表示されません。この記事では、この問題の解決方法を紹介します。

問題点

FlutterでSVG画像を表示しようとすると下のようなエラーが出力され、SVGファイルが表示されない。

import 'package:flutter_svg/flutter_svg.dart';
…
  child: SvgPicture.asset(‘assets/images/Chatting_Isometric.svg’)
…
======== Exception caught by SVG ===================================================================The following TypeErrorImpl was thrown resolving a single-frame picture stream:Expected a value of type 'SkDeletable', but got one of type 'Null'
When the exception was thrown, this was the stack: dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 236:49  throw_dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 84:3    castErrordart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/types.dart 266:34   aslib/_engine/engine/canvaskit/skia_object_cache.dart 146:55                    newlib/_engine/engine/canvaskit/shader.dart 13:3                                 new...Picture provider: ExactAssetPicture(name: "assets/images/Chatting_Isometric.svg", bundle: null, colorFilter: null)Picture key: AssetBundlePictureKey(bundle: PlatformAssetBundle#ba292(), name: "assets/images/Chatting_Isometric.svg", colorFilter: null)====================================================================================================

環境

  • macOS Big Sur 11.6

原因

https://www.manypixels.co/gallerからダウンロードしたSVG画像内の<defs>でhrefが使用されていますが、flutter_svgのAssetSvgでhrefが使用されているSVGの表示を対応していない。

用語解説 defs

グラデーションの色やパターンなどを定義するところ
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs

用語解説 href

linearGradientで他のlinearGradientを参照する
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient#attributes

解決策

svgファイルからhrefを無くしましょう。

今回の場合、 #linear-gradient-2で#linear-gradientを参照しているため、xlink:href(10行目)を削除し、#linear-gradientの<stop …...></stop>を#linear-gradient-2に貼り付けます。

<!-- 変更前 -->
<svg ..........>
  <defs>
    <linearGradient id="linear-gradient" x1="251.6" y1="229.7" x2="218.98" y2="260.72" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#29abe2"></stop>
      <stop offset="1" stop-color="#fff"></stop>
    </linearGradient>
    <linearGradient id="linear-gradient-2" x1="172.86" y1="180.32" x2="147.66" y2="217.5" xlink:href="#linear-gradient">
    </linearGradient>
    <linearGradient id="linear-gradient-3" x1="299.98" y1="197.11" x2="275.53" y2="217.76" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#29abe2"></stop>
      <stop offset="0.79" stop-color="#d2edf9"></stop>
      <stop offset="1" stop-color="#fff"></stop>
    </linearGradient>
  </defs>
  ……
</svg>
<!-- 変更後 -->
<svg ..........>
  <defs>
    <linearGradient id="linear-gradient" x1="251.6" y1="229.7" x2="218.98" y2="260.72" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#29abe2"></stop>
      <stop offset="1" stop-color="#fff"></stop>
    </linearGradient>
    <linearGradient id="linear-gradient-2" x1="172.86" y1="180.32" x2="147.66" y2="217.5">
      <stop offset="0" stop-color="#29abe2"></stop>
      <stop offset="1" stop-color="#fff"></stop>
    </linearGradient>
    <linearGradient id="linear-gradient-3" x1="299.98" y1="197.11" x2="275.53" y2="217.76" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#29abe2"></stop>
      <stop offset="0.79" stop-color="#d2edf9"></stop>
      <stop offset="1" stop-color="#fff"></stop>
    </linearGradient>
  </defs>
  ……
</svg>

まとめ

flutter_svgを用いてSVG画像を表示しようする際にエラーが出力される場合は、SVG画像内の<defs>でhrefが使われていないかを確認しましょう。

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