QuickAnswer
by

Use SVG images in Flutter

Use SVG images in Flutter

Android Studio Chipmunk | 2021.2.1 Patch 1
Flutter 3.0.3
Windows 11 Pro 21H2

Use SVG images in Flutter

Example of handling SVG images in Flutter development

flutter_svg package

https://pub.dev/packages/flutter_svg

Check the latest version

See here for details on how to use it. The outline is as follows.

pubspec.yaml

dependencies:
  flutter_svg: ^1.1.0
flutter:
  assets:
    - assets/

Or the following etc.

flutter:
  assets:
    - assets/image/

SVG image

The style setting is not fully supported. Embed it in your code as a style attribute.

Convert before

<style>
.st0{fill:#fff;}
</style>
<path class="st0" d="">

After convert

<path fill="#fff" d="">
or
<path style="fill:#fff;" d="">

When exporting from Illustrator, select "Presentation Attribute" or "Style Attribute" instead of "Style Element" in the advanced option CSS property.

Image placement

Create an assets folder at the same level as pubspec.yaml. Image placement at the position specified above.

Package update

flutter pub get
or
flutter pub upgrade

Package import

main.dart

import 'package:flutter_svg/svg.dart';

Example of use

main.dart

SvgPicture.asset('assets/image/example.svg', width: 80, height: 60),
CONTENTS
Web Browser