How to Make Better Use of SVG in Flutter Applications?

Examples

In the computing world, many space optimization methods involve reducing the consumption of computing power. For example, a 4K image with a wide variety of colors and shapes can be compressed to 5 kB in size (in fact, if the screen is large enough, you could even see an 8K image). If the 5-kB image is stored in Portable Network Graphic (PNG) format, it will look much smaller and will be pixelated if zoomed in but will be much faster to process.

Current Application

The Main Version of Flutter Does Not Support SVG

There is an SVG directory in the code of Skia, which is a basic component of Flutter. However, Skia can only serialize images into SVG files. Therefore, you cannot decode or render SVG images with Skia.

Operating Systems Have No Intention to Support SVG

This makes sense, because large operating systems such as Android and iOS do not support SVG by default.

Unlike SVG, Vector Fonts Are Supported

In the previous consultations on SVG, all the recommended solutions included the use of vector fonts. Vector fonts have the following features:

  • They are basically monochrome.
  • They are independent on Extensible Markup Language (XML) files.
  • Due to monochrome output, many uncontrollable factors that have impacts on the performance, such as layer rendering and overlays, are excluded.
  • They facilitate bitmap caching management in the system. We can further explore this when building future developer tools.

Improve SVG Application by Combining with Tools and Processes

As a powerful standard format for vector graphics, SVG is suitable for certain applications, such as colorful icons, convenient rolling updates, and a wide range of production tools that support this format.

Make SVG Great Again

Both operating systems and runtime environments have excluded SVG. However, with the flutter_svg package, Flutter has the capability of rendering and decoding SVG in a simple and fast manner. This indicates the excellent scalability of Flutter and Dart.

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()),
),

Use Tools to Avoid Pitfalls

We must not ignore the potential performance problems of SVG.

How flutter_svg Works

flutter_svg

As a Dart package, flutter_svg provides the capability of decoding SVG files from networks, assets, and the memory.

SvgPicture.asset(
String assetName, {
Key key,
this.matchTextDirection = false,
AssetBundle bundle,
String package,
this.width,
this.height,
this.fit = BoxFit.contain,
this.alignment = Alignment.center,
this.allowDrawingOutsideViewBox = false,
this.placeholderBuilder,
Color color,
BlendMode colorBlendMode = BlendMode.srcIn,
this.semanticsLabel,
this.excludeFromSemantics = false,
}) : pictureProvider = ExactAssetPicture(
allowDrawingOutsideViewBox == true
? svgStringDecoderOutsideViewBox
: svgStringDecoder,
assetName,
bundle: bundle,
package: package,
colorFilter: _getColorFilter(color, colorBlendMode)),
super(key: key);
void _resolveImage() {
final PictureStream newStream = widget.pictureProvider
.resolve(createLocalPictureConfiguration(context));
assert(newStream ! = null);
_updateSourceStream(newStream);
}
// in PictureProvider<T>.resolve
stream.setCompleter(
_cache.putIfAbsent(
key,
() => load(key, onError: onError),
),
);

Obtain the Rasterization Duration

The interface that initiates the rasterization process uses the ui.Picture.toImage method. The rasterizer thread is responsible for timing.

Additional Information

Android VectorDrawable

Android has provided VectorDrawable, which is a simplified version of SVG. Although the format and properties of this solution is not fully compatible with SVG, a conversion tool is available for resolving this issue. The documents reveal concerns about the performance loss that can be caused by complex SVG images. Reference: https://developer.android.com/studio/write/vector-asset-studio

Optimization of Bitmap Caching for Individual SVG Files

The current version of Flutter performs the rasterization process once and outputs every frame. This mode is different from the Chromium compositor (cc), which creates bitmaps for each area and then merge these images. In the output step of rasterization in Flutter, if you mark the bitmap pictures of SVG and cache them, you can increase the fps value. However, this method leads to increased memory usage.

Summary

Currently, the resource panel is available within Alibaba Group. Our team is trying to introduce it into the mainline version of Flutter. We welcome you to share your feedback and participate in discussions on this topic.

Original Source:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store