Flutter – How to Use SVG Image

Last Updated : 14 May, 2023

SVG (Scalable Vector Graphics) is a vector image format that can be used to create high-quality, resolution-independent graphics. In Flutter, you can use SVG images to display vector graphics in your app. To use SVG images in Flutter, you can use the flutter_svg package to display SVG images in Flutter. This package provides a widget called SvgPicture that allows you to display SVG images.

How to Use?

Dart

SvgPicture.asset( 
           'assets/images/s1.svg', 
           semanticsLabel: 'My SVG Image', 
           height: 100, 
           width: 70, 
         ),

Before going to use it, you have to add the flutter_svg dependency in pubspec.yaml file.

Step By Step Implementation

Step 1: Create a New Project in Android Studio or in VS code

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter. And add the asset SVG image.

Step 2: Install the package

Add the dependency into pubspec.yaml file.

dependencies:
 flutter_svg: ^2.0.5

and then import the package into the file where you want to use it.

import 'package:flutter_svg/flutter_svg.dart';

Step 3: Import the Material Package

A material package gives us the essential functions and Parameters, now call the runApp method that needs an Application in the main function.

import 'package:flutter/material.dart';

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

In the above code, runApp method calls the class RunMyApp, Now we have to create it.

Step 4: Creating Stateless Widget

Now we have to make a stateless widget because our application does not go to change its state and then return the MaterialApp widget which allows us the set the title and theme and many more of the application.

Shortcut for creating a stateless or Stateful widget: You can create a stateless widget by just typing three alphabets ‘stl’ and you can see a stateless widget and then hit enter.

class RunMyApp extends StatelessWidget {
   const RunMyApp({super.key});
   @override
   Widget build(BuildContext context) {
       return MaterialApp(
       debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home:
      );
   }
}

Step 5:

We can use the Material widget instead of scaffold, Further then we can simply use the SvgPicture widget to display the svg image.

home: Material(
       child: Center(
         child: SvgPicture.asset(
           'assets/images/s1.svg',
           semanticsLabel: 'My SVG Image',
           height: 100,
           width: 70,
         ),
       ),
     ),

Code Example

Dart

import 'package:flutter/material.dart'; 
import 'package:flutter_svg/flutter_svg.dart'; 
  
void main() { 
  runApp(RunMyApp()); 
} 
  
class RunMyApp extends StatelessWidget { 
  const RunMyApp({super.key}); 
  
  @override 
  Widget build(BuildContext context) { 
    return MaterialApp( 
      debugShowCheckedModeBanner: false, 
      theme: ThemeData(primarySwatch: Colors.green), 
      home: Material( 
        child: Center( 
          child: SvgPicture.asset( 
            'assets/images/s1.svg', 
            semanticsLabel: 'My SVG Image', 
            height: 100, 
            width: 70, 
          ), 
        ), 
      ), 
    ); 
  } 
}