US Office

1176 Shadeville Rd, Crawfordville Florida 32327, USA

 +1 (850) 780-1313

India Office

Office No 405, Kabir Shilp, Opp. Kansar Hotel, Opp. Landmark, Kudasan, Gandhinagar, Gujarat 382421

[email protected]

How to Render SVG In Flutter?

Render SVG In Flutter

How to Render SVG In Flutter?

Table of Contents

Hope you are doing well with Flutter !!!
Earlier we have gone through How to use Image Widget in Flutter. So this is time for something related to that. In this article, we will go through How to Render SVG in Flutter.

How to Render SVG in Flutter?

There is a plugin available for the same. Users can give a try to flutter_svg. Users need to add dependencies from the below code snippet.

    sdk: flutter
  flutter_svg: 0.19.0

Now the user needs to import like below:

import 'package:flutter_svg/flutter_svg.dart';

Now use it like a below:

new SvgPicture.asset(
  height: 20.0,
  width: 20.0,
  allowDrawingOutsideViewBox: true,

User can follow the below steps:

  • Visit
  • Upload your SVG icons
  • Click on the download button
  • The user will get two files

1. iconname.dart

2. iconname.ttf font file

  • Use this file in the Flutter & import iconname.dart


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

class SvgExample extends StatelessWidget {
  const SvgExample({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:const Text("Show Svg Image"),
        child: SvgPicture.asset(
      ) ,


Render SVG In Flutter is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Post a Comment