In this tutorial, we ‘ll learn about how we can add an SVG file in flutter app. The SVG file’s most important aspects are Performance and file size. SVG file didn’t support yet, then you will need to use flutter_svg package
What is the SVG file?
SVG is a Scalable Vector-based Graphics Format released in 2001 and is more powerful than other file formats like JPG, GIF, and PNG, etc. SVG can easily scale from small to big without any loss of Quality and Fidelity.
Why Should You Use?
The SVG file size is smaller than JPG and PNG.since the SVG aren’t the bitmap images then they can easily be modified. the Format like PNG, GIF, and JPG has a fixed dimension, which causes blur in the image of pixelating the image when they are scaled in the dimension. SVG has a true ability to scale infinity.
How to Add SVG file in flutter app
💻 Installation
First, you will need to add package name flutter_svg
In the dependencies:
section of your pubspec.yaml
, add the following lines as :flutter_svg: ^0.15.0
now run Flutter package get in your terminal which we’ll install flutter_svg package.
If you Don’t know how to Create a Flutter app, check out Getting started with Flutter official tutorial.
⚡️ Import
import ‘package:flutter_svg/flutter_svg.dart’;
okay, we need to create a variable for storing SVG assets
final String assetName = 'assets/Firefox_Logo.svg'; final Widget svg = SvgPicture.asset( assetName);
flutter_svg is providing us functionality to change the color of the SVG file
final String assetName = 'assets/Firefox_Logo.svg'; final Widget svg = SvgPicture.asset( assetName, Color: Colors.green, semanticsLabel: 'A Firefox logo' );
we can also specify placeholder widget with a loading icon bar for network problem or Slow internet issue. The SVG file can also draw from the internet or network URL. In the placeholderbuilder
while there is No internet connection Or While the need to wait for loading then you can show CircularProgressIndicator in that place.
SvgPicture.network( 'https://upload.wikimedia.org/wikipedia/commons/1/17/Yin_yang.svg', placeholderBuilder: (context) => CircularProgressIndicator(), height: 100.0, ),
We need to Create a Simple main.dart file to contain our MyHomePage
widget
import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, theme: ThemeData(primarySwatch: Colors.deepPurple), home: MyHomePage(), ); } }
The MyHomePage
the widget will contain Simple Column widget contains SVG file
class MyHomePage extends StatelessWidget { final String assetName = 'assets/Firefox_Logo.svg'; @override Widget build(BuildContext context) { final String assetName = 'assets/Firefox_Logo.svg'; final String svgNetworkUrl = 'https://upload.wikimedia.org/wikipedia/commons/1/17/Yin_yang.svg'; return Scaffold( body: Column( children: <Widget>[ Text('SVG assets file'), SvgPicture.asset( assetName, color: Colors.indigo, ), Text('SVG network file'), SvgPicture.network( svgNetworkUrl, placeholderBuilder: (context) => CircularProgressIndicator(), height: 128.0, ), ], ), ); } }
Our 📷 Final App will look like this:

You can see the full source code of the project here.
🤝 Show Some Support
If you liked the app, show some love Here ⭐️
Enjoyed the Tutorial? Please leave a LIKE 👍 to show your support and appreciation
💬 If you have a question about anything in the video, leave me a comment and I’ll do my best to answer it.
Follow my blog with Bloglovin