# flutter_svga
**Repository Path**: mrerror/flutter_svga
## Basic Information
- **Project Name**: flutter_svga
- **Description**: flutter_svg
- **Primary Language**: Dart
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-08-07
- **Last Updated**: 2022-08-08
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# flutter_svg
[](https://pub.dartlang.org/packages/flutter_svg) [](https://travis-ci.org/dnfield/flutter_svg) [](https://coveralls.io/github/dnfield/flutter_svg?branch=master)
Draw SVG (and _some_ Android VectorDrawable (XML)) files on a Flutter Widget.
## Getting Started
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):
```dart
final String assetName = 'assets/image.svg';
final Widget svg = SvgPicture.asset(
assetName,
semanticsLabel: 'Acme Logo'
);
```
You can color/tint the image like so:
```dart
final String assetName = 'assets/up_arrow.svg';
final Widget svgIcon = SvgPicture.asset(
assetName,
color: Colors.red,
semanticsLabel: 'A red up arrow'
);
```
The default placeholder is an empty box (`LimitedBox`) - although if a `height`
or `width` is specified on the `SvgPicture`, a `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
mode.
You can also specify a placeholder widget. The placeholder will display during
parsing/loading (normally only relevant for network access).
```dart
// Will print error messages to the console.
final String assetName = 'assets/image_that_does_not_exist.svg';
final Widget svg = SvgPicture.asset(
assetName,
);
final Widget networkSvg = SvgPicture.network(
'https://site-that-takes-a-while.com/image.svg',
semanticsLabel: 'A shark?!',
placeholderBuilder: (BuildContext context) => 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:
```dart
import 'package:flutter_svg/flutter_svg.dart';
final String rawSvg = '''''';
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);
```
The `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 `Picture`s are the underlying
mechanism for rendering rather than `Image`s.
See [main.dart](/../master/example/lib/main.dart) for a complete sample.
## Check SVG compatibility
As not all SVG features are supported by this library (see below), sometimes we have to dynamically
check if an SVG contains any unsupported features resulting in broken images.
You might also want to throw errors in tests, but only warn about them at runtime.
This can be done by using the snippet below:
```dart
final SvgParser parser = SvgParser();
try {
parser.parse(svgString, warningsAsErrors: true);
print('SVG is supported');
} catch (e) {
print('SVG contains unsupported features');
}
```
> Note:
> The library currently only detects unsupported elements (like the `
Draw SVG (and _some_ Android VectorDrawable (XML)) files on a Flutter Widget.
## Getting Started
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):
```dart
final String assetName = 'assets/image.svg';
final Widget svg = SvgPicture.asset(
assetName,
semanticsLabel: 'Acme Logo'
);
```
You can color/tint the image like so:
```dart
final String assetName = 'assets/up_arrow.svg';
final Widget svgIcon = SvgPicture.asset(
assetName,
color: Colors.red,
semanticsLabel: 'A red up arrow'
);
```
The default placeholder is an empty box (`LimitedBox`) - although if a `height`
or `width` is specified on the `SvgPicture`, a `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
mode.
You can also specify a placeholder widget. The placeholder will display during
parsing/loading (normally only relevant for network access).
```dart
// Will print error messages to the console.
final String assetName = 'assets/image_that_does_not_exist.svg';
final Widget svg = SvgPicture.asset(
assetName,
);
final Widget networkSvg = SvgPicture.network(
'https://site-that-takes-a-while.com/image.svg',
semanticsLabel: 'A shark?!',
placeholderBuilder: (BuildContext context) => 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:
```dart
import 'package:flutter_svg/flutter_svg.dart';
final String rawSvg = '''''';
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);
```
The `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 `Picture`s are the underlying
mechanism for rendering rather than `Image`s.
See [main.dart](/../master/example/lib/main.dart) for a complete sample.
## Check SVG compatibility
As not all SVG features are supported by this library (see below), sometimes we have to dynamically
check if an SVG contains any unsupported features resulting in broken images.
You might also want to throw errors in tests, but only warn about them at runtime.
This can be done by using the snippet below:
```dart
final SvgParser parser = SvgParser();
try {
parser.parse(svgString, warningsAsErrors: true);
print('SVG is supported');
} catch (e) {
print('SVG contains unsupported features');
}
```
> Note:
> The library currently only detects unsupported elements (like the `