How to Render/User SVG Vector Images in Flutter App

In this example, we are going to show you the easiest way to render or display SVG vector images from Asset folder and from Network. See the examples below for details:

First, you need to add flutter_svg Flutter package in your dependency by adding following lines in pubspec.yaml file

dependencies:
  flutter:
    sdk: flutter
  flutter_svg: ^0.22.0

Import Packge in Script:

import 'package:flutter_svg/svg.dart';

SvgPicture.asset(
  "assets/flag.svg", //asset location
  color: Colors.red, //svg color
  semanticsLabel: 'SVG From asset folder.'
)

SvgPicture.network(
  'https://www.svgrepo.com/download/33352/lock.svg',
  semanticsLabel: 'SVG From Network',
  placeholderBuilder: (BuildContext context) => Container(
      padding: const EdgeInsets.all(30.0),
      child: const CircularProgressIndicator()), //placeholder while downloading file.
)

final String rawSvg = '''<svg viewBox="...">...</svg>''';
final DrawableRoot svgRoot = await svg.fromSvgString(rawSvg, rawSvg);

// If you only want the final Picture output, just use
final Picture picture = svgRoot.toPicture();

// Otherwise, if you want to draw it to a canvas:
// Optional, but probably normally desirable: scale the canvas dimensions to
// the SVG's viewbox
svgRoot.scaleCanvasToViewBox(canvas);

// Optional, but probably normally desireable: ensure the SVG isn't rendered
// outside of the viewbox bounds
svgRoot.clipCanvasToViewBox(canvas);
svgRoot.draw(canvas, size);

SizedBox(
  height:100, width:100,
  child:SvgPicture.asset(
    "assets/flag.svg", //asset location
    color: Colors.red, //svg color
    semanticsLabel: 'SVG From asset folder.'
  ),
)

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
     return Scaffold(
          appBar: AppBar(
             title: Text("Show SVG Vector from Asset/Network"),
          ),
          body: Container( 
            alignment: Alignment.topCenter,
            padding: EdgeInsets.all(20),
            child: Column(
                children:[

                    SizedBox(
                      height:100, width:100,
                      child:SvgPicture.asset(
                        "assets/flag.svg", //asset location
                        color: Colors.red, //svg color
                        semanticsLabel: 'SVG From asset folder.'
                      ),
                    ),

                    SizedBox( 
                      height: 100, width: 100,
                      child:SvgPicture.network(
                        'https://www.svgrepo.com/download/33352/lock.svg',
                        semanticsLabel: 'SVG From Network',
                        placeholderBuilder: (BuildContext context) => Container(
                            padding: const EdgeInsets.all(30.0),
                            child: const CircularProgressIndicator()), //placeholder while downloading file.
                      )
                    )

                ]
            ),
          ),
     );
  }
 
}