Transform SVG assets at build time (Vector Graphics Compiler)

Did you know?

With the Vector Graphics Compiler, you can precompile SVGs at build time for better rendering performance.

To do this, install the vector_graphics_compiler package and use it as a transformer for your SVG assets (both individual files and folders are supported).

Example pubspec.yaml:

dependencies: vector_graphics: ^1.1.11+1 dev_dependencies: vector_graphics_compiler: ^1.1.11+1 flutter: assets: # Apply transformer to a single SVG file - path: assets/icon_comment.svg transformers: - package: vector_graphics_compiler # Apply transformer to a folder of SVGs - path: assets/svg/ transformers: - package: vector_graphics_compiler

Then, simply use a VectorGraphic widget with an AssetBytesLoader when you want to render your assets.

VectorGraphic acts as a replacement for the old SvgPicture from the flutter_svg package, so you can pass the same arguments, too. 👍


import 'package:vector_graphics/vector_graphics.dart'; VectorGraphic( loader: AssetBytesLoader('assets/icon_heart_blue.svg'), colorFilter: ColorFilter.mode(Color(0xFF70ABE6), BlendMode.srcIn), width: 300, height: 300, )

For a demo of the new Vector Graphics Compiler, check out this free UI challenge on Code With Andrea Pro:

Flutter 3.22 can do more than just precompiling SVGs:

  • apply filters
  • optimize PNGs

You can even create your own transformer packages.

For all the details, read the official docs about transforming assets at build time.

Happy coding!

Want More?

Invest in yourself with my high-quality Flutter courses.

Flutter Foundations Course

Flutter Foundations Course

Learn about State Management, App Architecture, Navigation, Testing, and much more by building a Flutter eCommerce app on iOS, Android, and web.

Flutter & Firebase Masterclass

Flutter & Firebase Masterclass

Learn about Firebase Auth, Cloud Firestore, Cloud Functions, Stripe payments, and much more by building a full-stack eCommerce app with Flutter & Firebase.

The Complete Dart Developer Guide

The Complete Dart Developer Guide

Learn Dart Programming in depth. Includes: basic to advanced topics, exercises, and projects. Fully updated to Dart 2.15.

Flutter Animations Masterclass

Flutter Animations Masterclass

Master Flutter animations and build a completely custom habit tracking application.