Flutter SVG rendering

问题:

I tried adding an image with a SVG source to my flutter application.

new AssetImage("assets/images/candle.svg"))

But I didn't get any visual feedback. How can I render an SVG picture in Flutter?

回答1:

Flutter does not currently support SVG. Follow issue 1831 for updates.

If you absolutely need vector drawing you can see the Flutter Logo widget as an example of how to draw using the Canvas API, or rasterize your image on the native side and pass it to Flutter as a bitmap, but for now your best bet is probably to embed high-resolution rasterized asset images.

回答2:

Fonts are a great option for a lot of cases.

I've been working on a library to render SVGs on a canvas, available here: https://github.com/dnfield/flutter_svg

The API as of right now would look something like

new SvgPicture.asset('asset_name.svg')

to render asset_name.svg (sized to its parent, e.g. a SizedBox). You can also specify a color and blendMode for tinting the asset..

It's now available on pub and works with a minimum of Flutter version 0.3.6. It handles a bunch of cases but not everything - see the GitHub repo for updates and to file issues.

The original GitHub issue referenced by Colin Jackson is really not meant to be primarily focused on SVG in Flutter. I opened another issue here for that: https://github.com/flutter/flutter/issues/15501

回答3:

Flutter made a new lib flutter_svg: ^0.5.0` for handle svg files. We can use it as

new SvgPicture.asset(
  'assets/images/candle.svg',
  height: 20.0,
  width: 20.0,
  allowDrawingOutsideViewBox: true,
),

回答4:

The work around for now is use fonts

https://icomoon.io/

  fonts:
   - family: icomoon
     fonts:
       - asset: assets/fonts/icomoon.ttf

Useage

  static const IconData TabBarHome= const IconData(0xe906, fontFamily: 'icomoon');
  static const IconData TabBarExplore= const IconData(0xe902, fontFamily: 'icomoon');

Replace the ### eg (906)

回答5:

hi you can use the plugin "flutter_svg" : https://pub.dartlang.org/packages/flutter_svg

Simple and Easy as well you can Change the Color of SVG.

final String assetName = 'assets/up_arrow.svg';
final Widget svgIcon = new SvgPicture.asset(
     assetName,
     color: Colors.red,
     semanticsLabel: 'A red up arrow'
);