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.0Import Packge in Script:
import 'package:flutter_svg/svg.dart'; How to display SVG Vector from Asset Folder:SvgPicture.asset( "assets/flag.svg", //asset location color: Colors.red, //svg color semanticsLabel: 'SVG From asset folder.') How to display SVG Vector from Network: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.) How to Render SVG String to Vector Image:final String rawSvg = '''...''';final DrawableRoot svgRoot = await svg.fromSvgString(rawSvg, rawSvg);// If you only want the final Picture output, just usefinal 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 viewboxsvgRoot.scaleCanvasToViewBox(canvas);// Optional, but probably normally desireable: ensure the SVG isn't rendered// outside of the viewbox boundssvgRoot.clipCanvasToViewBox(canvas);svgRoot.draw(canvas, size); How to Resize SVG Vector:SizedBox( height:100, width:100, child:SvgPicture.asset("assets/flag.svg", //asset locationcolor: Colors.red, //svg colorsemanticsLabel: 'SVG From asset folder.' ),) Full Code Example: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 { @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 locationcolor: Colors.red, //svg colorsemanticsLabel: '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. ))]), ), ); } } Output Screenshot:In this way, you can render/display SVG vector from Asset Foler/Network or from String.