How to render SVG in Flutter?

Why SVG?

SVG stands for scalable vector graphics. There may be many reasons for you to render SVGs in Flutter, your graphic designer friend might have exported the app visuals as SVG, or you may simply not want to use 5 different rasterized images for your app. In this article, I'll try to answer "How to use SVG in Flutter?".

How to render SVG in Flutter?

If you simply use your SVGs with Image.network or Image.asset, you will get a codec error. They are not supported yet.

Fortunately, there is a solution from the community. There is a package called flutter_svg.

Adding flutter_svg package

We’re starting with adding the package to pubspec.yaml. After that, we can just import it and use it. This will help us render SVG.

import 'package:flutter_svg/flutter_svg.dart';

I have two variables for SVG’s, dogUrl and dogFoodUrl.

final String dogUrl = 'https://www.svgrepo.com/show/2046/dog.svg';
final String dogFoodUrl = 'https://www.svgrepo.com/show/3682/dog-food.svg';

After that, you can use it like any widget. With placeholderBuilder parameter, you can show another widget while there is no connection or while the image is still loading. In the example, I’ve chosen a CircularProgressIndicator.

SvgPicture.network(
 dogUrl,
 placeholderBuilder: (context) => CircularProgressIndicator(),
 height: 128.0,
),

And here’s an example with FloatingActionButton. You may want to know what’s semanticsLabel parameter used for. You will not see this text in the UI but it’s necessary for accessibility. Screen readers are reading those labels.

FloatingActionButton(
  onPressed: () {
    print('Thanks');
  },
  child: SvgPicture.network(
    dogFoodUrl,
    semanticsLabel: 'Feed button',
    placeholderBuilder: (context) => Icon(Icons.error),
  ),
),

Demo

Some notes from my experience

If there are <style> elements in your SVG, this package does not support CSS style elements. This means your SVGs will not be colorful as mine. There is an issue on GitHub, and pjcau’s solution solved my problem. Details can be viewed here. While you’re exporting with Adobe IA, simply choose styling as “Inline Style”. You can also always clean your <style> elements with svgcleaner, in case they are not needed.

This article was originally written in Turkish by me. I hope you were able to implement SVG in Flutter after this guide.

Have an app idea or need consultation?
Reach out to me: mirkan.dev/contact

Flutter Community