How to Make Better Use of SVG in Flutter Applications?

Examples

Current Application

The Main Version of Flutter Does Not Support SVG

Operating Systems Have No Intention to Support SVG

Unlike SVG, Vector Fonts Are Supported

  • Mainstream operating systems provide native support for them.
  • 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

Make SVG Great Again

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

How flutter_svg Works

flutter_svg

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

Additional Information

Android VectorDrawable

Optimization of Bitmap Caching for Individual SVG Files

Summary

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
Alibaba Cloud

Alibaba Cloud

Follow me to keep abreast with the latest technology news, industry insights, and developer trends. Alibaba Cloud website:https://www.alibabacloud.com