Flutter SVG rendering

Question

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?

Bashuk

try using simple to use flutter_svg 0.14.0 package it works like charm more info here pub.dev/packages/flutter_svg ,all thanks to this guy github.com/dnfield who ported the chrome's svg rendering logic to dart – Straitlaced

Answer 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.

Both

Also if you don't need color, you can always go the font route the way the Icons package does. – Trichloromethane

well after all he needs to simply render an svg image any svg library could do like this one pub.dev/packages/flutter_svg – Straitlaced

the issue is open since 13 Feb 2016. how long we need to wait? – Podvin

@BloodLoss look at Dan Field's answer. User flutter_svg package – Gona

new SvgPicture.asset('asset_name.svg') – Lalla

Answer 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

Puffery

A little off topic but does this have iOS support? As far as I know, iOS supports vectors in PDF format so I'm just curious if this can be used for rendering vectors on iOS as well – Polystyrene

It should work on any platform Flutter supports. It's all written in Dart using Canvas methods. – Puffery

why doesnt it support latest flutter stable instead preview – Consummate

Hi Dan, Can you also add support for - dart:svg library - api.dart.dev/stable/2.9.2/dart-svg/dart-svg-library.html ? does flutter has dart2 support ? I want to have multiple SVGElements all combined into one large serialized string and then use your library to render the SVG – Gisela

dart:svg is used with HTML and dart2js. It's very different than this. – Puffery

flutter_svg takes too long for some svgs why is that? – Ragtime

SVGs can use arbitrarily expensive things, either to parse or to draw or both. – Puffery

Is there a reason why my SVG's are coming out black? – Pahlavi

Answer 3

Developers from the Flutter community created a lib to handle svg files. We can use it as

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

I found a small example of SVG implementation here.

Rhearheba

Just FYI - this is not an official/first party plugin. That said, it should support a lot of common use cases. – Puffery

Yes, and the thing that this plugin depends on other packages, its highly important to keep it updated by the authors. I can't use this package as some other package conflicts with its old xml ^4.0.x dependency – Electrolyte

Answer 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)

Centralization

How can I use this? lets say I have an svg file in asset/svg/mysvg.svg I can't replace the hex with the path. 1st argument is an int. – Very

Answer 5

You can follow the below steps
- visit http://fluttericon.com
- upload your SVG icons
- click on download button
- you will get two files
1. iconname.dart
2. iconname.ttf font file
- use this file in flutter & import iconname.dart

Donofrio

I used this method successfully. See my detailed answer here. – Backsaw

The flutterIcon is great but its not supported for 3 years since 2020. Github repository has 200.0 issues. Has anyone found similar project like that to generate ttf icons? – Reverential

Answer 6

step 1. add dependency in your pubspec.yaml

dependencies:
     flutter_svg: any

the Advantage of version any is you can use in any SDK version but dependencies version is most important so add suitable version for your dependency.

step 2. import the flutter svg package in your app

 import 'package:flutter_svg/flutter_svg.dart';

step 3. just use like below

 SvgPicture.asset(
    'assets/images/bm-icon1.svg',
     width: 18.0,
     height: 18.0,
  ),

Crashaw

How is this answer different from @Robin's? – Ink

@OjonugwaJudeOchalifu This one came before Robin's, so this deserves the credit and the upvotes. – Novia

Answer 7

You can use this library for rendering SVG Images - https://pub.dev/packages/flutter_svg

Example -

Container(
    child: SvgPicture.asset("assets/images/yourImage.svg")
)

Postulate

this package is working fine as my requirements – Level

Answer 8

Of possible interest: There's a newer Flutter SVG library called jovial_svg. I wrote it to handle a more robust subset of SVG than what I was able to find on pub.dev at the time. While I was at it, I also made a binary format that SVG assets can be compiled to. It's a little more compact, and about 10x faster to read, so it's a good choice for assets you package with your application.

The library is at https://pub.dev/packages/jovial_svg

Vulgus

is it possible to render local (Asset) SVG images?, f yes how ? i am not able to find exact solution. Thanks in advance. – Pratincole

Yes. Indeed, the demo program does just this. See ScalableImage.fromSIAsset if it's been compiled to a si file, or ScalableImage.fromSvgAsset if you want to bundle a (less effcient) SVG file directly. If you're using ScalableImageWidget, there's ScalableImageSource.fromSI and ScalableImageSource.fromSvg. – Vulgus

Answer 9

I solved similar problem by converting the svg images to ttf at fluttericon.com.

These are the steps involved.

Keep all your svg files in a folder. Upload all of them to fluttericon by using the uploader there. You can select all of them and drag and drop at the spot. Give your icons a dart class name at the top: like, Svgicons

Select all your icons and press Download.

It will download a zip file with a dart file and fonts folder which contains Svgicons.ttf.

copy the fonts folder to your project folder and refer to it as an asset in pubspec.yaml.

fonts:
  - family: Svgicons
    fonts:
      - asset: fonts/Svgicons.ttf

import the svgicons_icons.dart where you are going to use the images. Sample:

import '../svgicons_icons.dart';

import 'social_media.dart';

class SocialMediaRepository {
  List<SocialMedia> getSocialMedia = [
    SocialMedia(id: 1, title: "Facebook", iconAsset:Svgicons.facebook, isFavorite: false),
    SocialMedia(id: 2, title: "Instagram", iconAsset: Svgicons.instagram, isFavorite: false),
    SocialMedia(id: 3, title: "LinkedIn", iconAsset: Svgicons.linkedin, isFavorite: false),
    ....

Here iconAsset is of type IconData which used to be a String referring to the svg image originally.

Display the ttf by using

    ...
    Icon(item.iconAsset),
    SizedBox(width: 10),
    Text(item.title),
  ],
),

where item is the object containing IconData. Now you can remove the reference to svg images from the project.

Backsaw

Answer 10

flutter support special type of svg

if have style tag then not load svg image in flutter flutter support inline styling in svg

Syriac

very usefull !! thanks ! – Baedeker

Answer 11

You can use flare to create animations and just import .flr as an asset

import 'package:flare_flutter/flare_actor.dart';
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new FlareActor("assets/Filip.flr", alignment:Alignment.center, fit:BoxFit.contain, animation:"idle");
  }
}

visit flare_flutter https://pub.dev/packages/flare_flutter

Paten

Answer 12

Svg in flutter https://pub.dev/packages/flutter_svg

1. add package in pubspec.yaml

   dependencies: flutter_svg: any

   assets:
   -assets/images/

2. to insert svg.

   SvgPicture.asset('assets/images/password-icon.svg', width: 24, height: 29.2),

Cornice

Answer 13

As mentioned here, in recent version of Flutter (3.22) you can use asset transformation at build time to render svg files using compatible Dart packages.

Heptagon