Why SVG Can Slow Down Your Flutter Apps and How to Optimize It

Background

SVG is a powerful vector format that offers resolution‑independent clarity, but it is not always the best choice for Flutter apps. While SVG files can be dramatically smaller than high‑resolution PNGs, rasterizing them on mobile devices can be costly.

On a Snapdragon 626, rasterizing a 64×64 area of an SVG takes about 34 ms, which breaks the 60 fps target; on an iPhone X it takes about 8 ms, allowing only two smooth frames.

Current Support Status

Flutter’s core Skia library includes an SVG directory for serialization only; it cannot decode and render SVGs. The framework roadmap currently has no plan to add full SVG support (see Flutter issue 1831 ).

Both Android and iOS also lack built‑in SVG rendering, as shown by related StackOverflow discussions.

Alternative Solutions

Many developers resort to vector fonts, which are widely supported by operating systems, monochrome, and avoid XML parsing overhead. Vector fonts eliminate many performance‑impacting factors of full‑color SVGs and are easier to cache as bitmap resources.

Tooling Improvements

The UC Browser kernel team built a "Resource Panel" tool that connects to a running Flutter app, displays memory usage, previews SVG assets, and reports rasterization cost. By comparing rasterization times, developers can identify problematic SVGs and adjust their usage.

Implementation Details

The flutter_svg Dart package provides parsing for SVG assets, network resources, and memory strings. It uses a custom PictureCache that stores ui.Picture objects (Skia picture wrappers) instead of bitmap ui.Image objects, avoiding repeated XML parsing.

SvgPicture.asset(
    'assets/adsmall.svg',
    placeholderBuilder: (BuildContext context) =>
        Container(child: const CircularProgressIndicator()),
);

SvgPicture.network(
    'https://raw.githubusercontent.com/dnfield/flutter_svg/master/example/assets/deborah_ufw/new-camera.svg',
    placeholderBuilder: (BuildContext context) =>
        Container(child: const CircularProgressIndicator()),
);

The picture provider resolves a PictureStream, which is filled by a cache completer that loads the picture on demand.

final PictureStream newStream = widget.pictureProvider
    .resolve(createLocalPictureConfiguration(context));
_updateSourceStream(newStream);

Rasterization Timing

Rasterization is triggered via ui.Picture.toImage, with timing measured on the rasterizer thread. The tool visualizes this cost, showing that simple icons can rasterize within 16.66 ms on Snapdragon 626, which is acceptable.

Additional Notes

Android offers VectorDrawable, a simplified SVG‑like format with conversion tools, designed to avoid performance issues of complex SVGs.

Caching rasterized SVG bitmaps can improve frame rates but increases memory usage; this is not currently feasible purely in Dart because the rendering thread cannot predict rasterization resolution.

Overall, while SVGs provide visual benefits, developers should profile rasterization costs, prefer simple icons, consider vector fonts, and use tools like the Resource Panel to keep performance in check.