Use SVG images in Flutter
Use SVG images in Flutter
Category：Flutter
Pub.date：2022-07-02
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
JavaScript
Unreal Engine
CakePHP4
CakePHP4
Flutter
Flutter
Other
JavaScript
JavaScript
CakePHP4
Web Server
Photoshop
Unreal Engine
CakePHP4
Web Browser
Web Server
iOS
Android
Web Browser
CakePHP4
Plesk
Illustrator
Plesk
Web Server
Web Server
CakePHP3
Web Browser
CakePHP3
JavaScript
JavaScript
CakePHP3
CakePHP3