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. 👍

Example:

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:

• Twitter Embed Card: Challenge

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!