How to Render/SVG Vector Images in Flutter - (2023)

In application development, we need to deal with images it may have in various formats like PNG, JPG, JPEG, and SVG. So in this article, I will share with you How to Render/SVG Vector Images in Flutter.

We need to add a flutter_svg: ^2.0.4 package in our pubspec.yaml for loading SVG images. Like below.

dependencies:
   flutter_svg: ^1.1.6

 

How to load SVG images from the network:

We can load SVG images from the network in the following way.

SvgPicture.network(
  'https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/alphachannel.svg',
   placeholderBuilder: (BuildContext context) => Container(
   padding: const EdgeInsets.all(30.0),
   child: const CircularProgressIndicator()),
)

 

How to load SVG images from the assets :

We can load SVG images from the assets in the following way.

 SvgPicture.asset(
    "assets/images/ic_email.svg", //asset location
     color: Colors.red, //svg color
     width: 100,
     height: 100,
)

 

Full Code:

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

class Errorgram extends StatefulWidget {
  const Errorgram({Key? key}) : super(key: key);

  @override
  State<Errorgram> createState() => _ErrorgramState();
}

class _ErrorgramState extends State<Errorgram> {
   bool isObscure = true;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        bottom: false,
        child: Scaffold(
          appBar: AppBar(
            title: Text("Errorgram"),
          ),
          body: Padding(
            padding:  EdgeInsets.all(8.0),
            child: Center(
              child: Column(
                children: [
                  SvgPicture.network(
                    'https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/alphachannel.svg',
                    placeholderBuilder: (BuildContext context) => Container(
                        padding: const EdgeInsets.all(30.0),
                        child: const CircularProgressIndicator()),),

                  SvgPicture.asset(
                      "assets/images/ic_email.svg", //asset location
                      color: Colors.red, //svg color
                      width: 100,
                      height: 100,
                  )


                ],
              ),)
          ),
        ));
  }
}

 

Output:

 

 

Conclusion:

In this article, we have seen the How to Render/SVG Vector Images in Flutter. I hope you have got an idea about the load SVG Image from the network and assets in a flutter.

Tags: