Draw SVG (and some Android VectorDrawable (XML)) files on a Flutter Widget.
This is a Dart-native rendering library. Issues/PRs will be raised in Flutter and flutter/engine as necessary for features that are not good candidates for Dart implementations (especially if they're impossible to implement without engine support). However, not everything that Skia can easily do needs to be done by Skia; for example, the Path parsing logic here isn't much slower than doing it in native, and Skia isn't always doing low level GPU accelerated work where you might think it is (e.g. Dash Paths).
All of the SVGs in the
assets/ folder (except the text related one(s)) now
have corresponding PNGs in the
golden/ folder that were rendered using
flutter test tool/gen_golden.dart and compared against their rendering output
in Chrome. Automated tests will continue to compare these to ensure code changes
do not break known-good renderings.
Basic usage (to create an SVG rendering widget from an asset):
final String assetName = 'assets/image.svg'; final Widget svg = new SvgPicture.asset( assetName, );
You can color/tint the image like so:
final String assetName = 'assets/icon.svg'; final Widget svgIcon = new SvgPicture.asset( assetName, color: Colors.red, );
The default placeholder is an empty box (
LimitedBox) - although if a
width is specified on the
SizedBox will be used instead
(which ensures better layout experience). There is currently no way to show an
Error visually, however errors will get properly logged to the console in debug
You can also specify a placeholder widget. The placeholder will display during parsing/loading (normally only relevant for network access).
// Will print error messages to the console. final String assetName = 'assets/image_that_does_not_exist.svg'; final Widget svg = new SvgPicture.asset( assetName, ); final Widget networkSvg = new SvgPicture.network( 'https://site-that-takes-a-while.com/image.svg', placeholderBuilder: (BuildContext context) => new Container( padding: const EdgeInsets.all(30.0), child: const CircularProgressIndicator()), );
If you'd like to render the SVG to some other canvas, you can do something like:
import 'package:flutter_svg/flutter_svg.dart'; final String rawSvg = '''<svg viewBox="...">...</svg>'''; final DrawableRoot svgRoot = await svg.fromSvgString(rawSvg, rawSvg); // If you only want the final Picture output, just use final Picture picture = svgRoot.toPicture(); // Otherwise, if you want to draw it to a canvas: // Optional, but probably normally desirable: scale the canvas dimensions to // the SVG's viewbox svgRoot.scaleCanvasToViewBox(canvas); // Optional, but probably normally desireable: ensure the SVG isn't rendered // outside of the viewbox bounds svgRoot.clipCanvasToViewBox(canvas); svgRoot.draw(canvas, size);
SvgPicture helps to automate this logic, and it provides some convenience
wrappers for getting assets from multiple sources and caching the resultant
Picture. It does not render the data to an
Image at any point; you
certainly can do that in Flutter, but you then lose some of the benefit of
having a vector format to begin with.
While I'm making every effort to avoid needlessly changing the API, it's not
guarnateed to be stable yet (hence the pre-1.0.0 version). To date, the biggest
change is deprecating the
SvgImage widgets in favor of
SvgPicture - it
became very confusing to maintain that name, as
Pictures are the underlying
mechanism for rendering rather than
See main.dart for a complete sample.
This list is not very well ordered. I'm mainly picking up things that seem interesting or useful, or where I've gotten a request to fix something/example of something that's broken.
/assets/w3samples pulled from W3 sample files
/assets/deborah_ufw provided by @deborah-ufw
/assets/simple are pulled from trivial examples or generated to test
basic functionality - some of them come directly from the SVG 1.1 spec. Some
have also come or been adapted from issues raised in this repository.
/assets/wikimedia are pulled from Wikimedia Commons
Android Drawables in
/assets/android_vd are pulled from Android Documentation
The Flutter Logo created based on the Flutter Logo Widget © Google.
The Dart logo is from dartlang.org © Google
/assets/noto-emoji are from Google i18n noto-emoji,
licensed under the Apache license.
Please submit SVGs this can't render properly (e.g. that don't render here the way they do in chrome), as long as they're not using anything "probably out of scope" (above).
This is technically a breaking release, but it also includes important fixes for v0.10.0. Rather than splitting the breaking parts out in to v0.11.0 so soon after the release of v0.10.0, I'm including some more breaking changes here. This will not normally be done.
<stop>elements that weren't self-closing to parse improperly.
DrawableDefinitionServerto support gradients better.
PaintServertypedef, since this was only serving gradients and we need to have more control there for
<defs/>element prevent rendering.
svgcleanerper author's recommendation.
DrawableStyleableto avoid crashing with certain unhandled elements.
height. These changes did not quite fix what they were intended to fix and caused problems they weren't intended to case.
asyncto support image loading.
SvgPicture.assetwill now cache the asset. We already cached the final picture, but the caching included any color filtering provided on the image. This is problematic if the color is animated. See dnfield/flutter_svg#33
heightprocessing on the root element.
heightwere treated as synonyms for the width and height of the
viewBox. This is not correct, and resulted in meaningful rendering errors in some scenarios compared to Chrome. Fixing this makes the parser more conformant to the spec, but may make your SVGs look significantly different if they specify
height. If you want the old behavior, you'll have to update your SVGs to not specify
MediaQuery.of(context).devicePixelRatioif available before defaulting to
window.devicePixelRatioin places that need awareness of devicePixelRatios.
<symbol>, and shape/group elements in
<defs>. There are some limitations to this currently,
Alignmentfor SvgPictures (Thanks @sroddy!).
Paintand assist with inheriting all painting properties.
HttpStatus.OKchange - not ready yet for Flutter beta channel
<ellipse>parsing bug (ellipses were drawn at half the expected size)
<polyline>parsing bug (polylines were incorrectly forced to be closed)
VectorDrawableImagehave been deprecated. They relied on methods that are less efficient than those now surfaced in
SvgPicture- its size is determined by parent size.
clipToViewBoxis now called
allowDrawingOutsideViewBox. It defaults to false. It should not ordinarily be set to true, as it can allow unexpected memory usage if your vector graphic tries to draw far outside of the viewBox bounds.
SvgPicturedoes not support custom
ErrorWidgetBuilders at this point in time. However, errors will be properly logged to the console. This is a result of improvements in the loading/caching of drawings.
Bumping minor version due to internal breaking changes and new support. Works on dev channel as of release (Flutter >= 0.3.6).
DrawableRootto support top level style definition.
Initial text support. Relies on flutter 0.3.6.
Initial release. Relies on pre-released master.
A new Flutter project.
For help getting started with Flutter, view our online documentation.
Add this to your package's pubspec.yaml file:
dependencies: flutter_svg: ^0.10.1
You can install packages from the command line:
$ pub get
$ flutter packages get
Alternatively, your editor might support
pub get or
flutter packages get.
Check the docs for your editor to learn more.
Now in your Dart code, you can use:
|0.10.3||Jan 25, 2019|
|0.10.2||Jan 17, 2019|
|0.10.1||Jan 14, 2019|
|0.10.0+2||Jan 14, 2019|
|0.10.0+1||Jan 13, 2019|
|0.10.0||Jan 12, 2019|
|0.9.0+1||Dec 31, 2018|
|0.9.0||Dec 31, 2018|
|0.8.3||Dec 29, 2018|
|0.8.2||Dec 18, 2018|
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
We analyzed this package on Feb 14, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:
Low code quality prevents platform classification.
lib/src/svg/parser_state.dart. (-99.94 points)
lib/src/svg/parser_state.dart failed with 26 errors, 2 hints, including:
line 149 col 7: Undefined class 'XmlPushReader'.
line 153 col 30: Undefined name 'XmlPushReaderNodeType'.
line 349 col 43: Undefined name 'XmlPushReaderNodeType'.
line 431 col 14: Case expressions must be constant.
line 431 col 14: Undefined name 'XmlPushReaderNodeType'.
lib/parser.dart. (-25.75 points)
lib/parser.dart failed with 1 error, 2 hints:
line 14 col 33: The method 'XmlPushReader' isn't defined for the class 'SvgParser'.
line 3 col 8: Unused import: 'package:xml/xml.dart'.
line 3 col 36: The library 'package:xml/xml.dart' doesn't export a member with the shown name 'XmlPushReader'.
Fix platform conflicts. (-20 points)
Low code quality prevents platform classification.
|Dart SDK||>2.0.0 <3.0.0|