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:

svg file in flutter app

You can see the full source code of the project here.

View on github

🤝 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

Best tutorial to learn Flutter