Why SVG?

SVG stands for scalable vector graphics. There may be many reasons to use SVGs, your graphic designer friend might have been exported the app visuals as SVG or simply you may not want to use 5 different rasterized images for your app.

How to use SVG’s 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.

We’re starting with adding the package to pubspec.yaml. After that, we can just import it and use it.

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