Using SVG in Flutter

Mirkan
Mirkan
Jul 23 · 2 min read

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

Some notes from my experience

If there a <style> elements in your SVG, this package does not support CSS style elements at this point. This means your SVGs will not be colorful as mine. There is an issue about it 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. In this article, I’ve talked about using scalable vector graphics in Flutter. You can ask your questions on Twitter @mirkancal or LinkedIn. Keep Flutterin’.

Flutter Community

Articles and Stories from the Flutter Community

Mirkan

Written by

Mirkan

İzmir’den Flutter mühendisiyim. Stackoverflow’da Flutter sorularını cevaplamayı seviyorum.

Flutter Community

Articles and Stories from the Flutter Community

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade