DEV Community

Cover image for Render SVG in Flutter app
Mighty
Mighty

Posted on • Updated on • Originally published at mightytechno.com

Render SVG in Flutter app

Flutter natively doesn’t support rendering SVG. But there are some workaround for that. There is a plugging called flutter_svg which provide a solid way of adding SVG to your flutter project.

Add svg plugin

First, open the pubspec.yaml and add a plugin with version under the dependencies.

dependencies:
            flutter_svg: ^0.17.1
Enter fullscreen mode Exit fullscreen mode

next open terminal and type

flutter pub get
Enter fullscreen mode Exit fullscreen mode

And it will download the required plugin for your project.
Next, you have to import the plugin the file which you are going to use.

import 'package:flutter_svg/flutter_svg.dart';

Enter fullscreen mode Exit fullscreen mode

Load SVG from asset

First, go and create the folder called images in the root structure and add any SVG image which you like.

Then open the pubspec.yaml and specify your file name under the assets.

Next you can load the file from asset as mentioned in below.

SvgPicture.asset("images/doughnut.svg")
Enter fullscreen mode Exit fullscreen mode

Load SVG from network

You can directly load SVG using url also

SvgPicture.network("https://mightymamma.com/wp-content/uploads/2019/03/Tink-Happy-Thoughts.svg")

Enter fullscreen mode Exit fullscreen mode

Load SVG from SVG code

If you don't want to add SVG inside the assets, you can render SVG using it code also. You can use the string method provide by the plugin for this.

SvgPicture.string("<svg height="512" ..... >");
Enter fullscreen mode Exit fullscreen mode

Color tint the SVG image

You can change the colour of the image using color property. This will change the colour of the entire image and good for icons kind of single colours images

SvgPicture.asset("images/doughnut.svg",color: Colors.amber,)
Enter fullscreen mode Exit fullscreen mode

Also you can change the color blend mode to blend the colors and get different effects.

Add text direction support to SVG

If you want to flip the image horizontally based on the text direction(left to right/ right to left) you have to set matchTextDirection property to true. default it's false and support only left to right. You can simply check this by wrapping scaffold inside Directionality widget.

Directionality(
        textDirection: TextDirection.rtl,
              child: Scaffold(
              appBar: AppBar(
                title: Text('Material App Bar'),
              ),
              body: Center(
                child: Column(
                  children: <Widget>[
                            Container(
                              child: SvgPicture.asset("images/doughnut.svg",matchTextDirection: false,),
                            ),
                        ],
                    ),
                ),
        ),
      )
Enter fullscreen mode Exit fullscreen mode

What is semanticsLabel property in flutter SVG?

The semantic label describes the purpose of the image. This value does not show in the UI. These values used in screen readers to identify the purpose of the image. It best practice to apply this value of the widget needs more accessibility. Also, flutter has semantics widget with more controls of the properties.

Originally published at mightytechno

Connect with me - Instagram |Blog |Youtube

Top comments (3)

Collapse
 
bonstine profile image
Bonnie Simon

For me the svg is not loading. How do you specify the path?

Collapse
 
mightytechno profile image
Mighty

You have to specify path in pubspec.yaml if load from project

Collapse
 
abhishek9a profile image
Abhishek Thapliyal

How to scale SVG image like fit, cover or fill???