# flutter_svg 2.3.2
An SVG rendering and widget library for Flutter, which allows painting and displaying Scalable Vector Graphics 1.1 files.
## Installing
```
export PUB_HOSTED_URL=https://pub.mirror.p-hatan.com
flutter pub add 'flutter_svg:2.3.2'
```
Published: 2026-10-28T21:10:51.555314Z
Expected archive SHA-256: 100c19dcc4ff60083e95a44a6f44f3a1bb887d353c5d86f6a9b688aa3cb46236
Available in cache; verification: upstream_checksum
## Direct dependencies
- flutter: map[sdk:flutter]
- http: ^1.0.0
- vector_graphics: ^1.2.0
- vector_graphics_codec: ^1.1.11+1
- vector_graphics_compiler: ^1.3.1
## Package README (untrusted upstream documentation)
# flutter_svg
[](https://pub.dartlang.org/packages/flutter_svg)
Draw SVG files using Flutter.
## Getting Started
Basic usage (to create an SVG rendering widget from an asset):
```dart
const assetName = 'assets/dart.svg';
final Widget svg = SvgPicture.asset(assetName, semanticsLabel: 'Dart Logo');
```
You can color/tint the image like so:
```dart
const assetName = 'assets/simple/dash_path.svg';
final Widget svgIcon = SvgPicture.asset(
assetName,
colorFilter: const ColorFilter.mode(Colors.red, BlendMode.srcIn),
semanticsLabel: 'Red dash paths',
);
```
For more advanced color manipulation, you can use the `colorMapper` property.
This allows you to define a custom mapping function that will be called for
every color encountered during SVG parsing, enabling you to substitute colors
based on various criteria like the color value itself, the element name, or the
attribute name.
To use this feature, you need to create a class that extends `ColorMapper` and
override the `substitute` method.
Here's an example of how to implement a `ColorMapper` to replace specific colors in an SVG:
```dart
class _MyColorMapper extends ColorMapper {
const _MyColorMapper();
@override
Color substitute(String? id, String elementName, String attributeName, Color color) {
if (color == const Color(0xFFFF0000)) {
return Colors.blue;
}
if (color == const Color(0xFF00FF00)) {
return Colors.yellow;
}
return color;
}
}
// ···
const svgString = '''
''';
final Widget svgIcon = SvgPicture.string(svgString, colorMapper: const _MyColorMapper());
```
In this example, all red colors in the SVG will be rendered as blue, and all green colors will be rendered as yellow. You can customize the `substitute` method to implement more complex color mapping logic based on your requirements.
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.
const assetName = 'assets/image_that_does_not_exist.svg';
final Widget svg = SvgPicture.asset(assetName);
```
```dart
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 'dart:ui' as ui;
// ···
const rawSvg = '''''';
final PictureInfo pictureInfo = await vg.loadPicture(const SvgStringLoader(rawSvg), null);
// You can scale the canvas to achieve lossless scaling:
canvas.scale(1.2, 1.2);
// You can draw the picture to a canvas:
canvas.drawPicture(pictureInfo.picture);
// Or convert the picture to an image:
final ui.Image image = await pictureInfo.picture.toImage(width, height);
pictureInfo.picture.dispose();
```
The `SvgPicture` helps to automate this logic, and it provides some convenience
wrappers for getting assets from multiple sources.
This package now supports a render strategy setting, allowing certain
applications to achieve better performance when needed. By default, the
rendering uses the original `picture` mode, which retains full flexibility in
scaling. Alternatively, when using the `raster` strategy, the SVG data is
rendered into an `Image`, which is then drawn using drawImage. This approach may
sacrifice some flexibility—especially around resolution scaling—but can
significantly improve rendering performance in specific use cases.
## Precompiling and Optimizing SVGs
The vector_graphics backend supports SVG compilation which produces a binary
format that is faster to parse and can optimize SVGs to reduce the amount of
clipping, masking, and overdraw. The SVG compilation is provided by
[`package:vector_graphics_compiler`](https://pub.dev/packages/vector_graphics_compiler).
```sh
dart run vector_graphics_compiler -i assets/foo.svg -o assets/foo.svg.vec
```
The output `foo.svg.vec` can be loaded using the default constructor of
`SvgPicture`.
```dart
import 'package:vector_graphics/vector_graphics.dart';
// ···
const Widget svg = SvgPicture(AssetBytesLoader('assets/foo.svg.vec'));
```
### Check SVG compatibility
An SVG can be tested for compatibility with the vector graphics backend by
running the compiler locally to see if any errors are thrown.
```sh
dart run vector_graphics_compiler -i $SVG_FILE -o $TEMPORARY_OUTPUT_TO_BE_DELETED --no-optimize-masks --no-optimize-clips --no-optimize-overdraw --no-tessellate
```
## Recommended Adobe Illustrator SVG Configuration
- In Styling: choose Presentation Attributes instead of Inline CSS because CSS is not fully supported.
- In Images: choose Embded not Linked to other file to get a single svg with no dependency to other files.
- In Objects IDs: choose layer names to add every layer name to svg tags or you can use minimal,it is optional.
## SVG sample attribution
SVGs in `/assets/w3samples` pulled from [W3 sample files](https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/)
SVGs in `/assets/deborah_ufw` provided by @deborah-ufw
SVGs in `/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.
SVGs in `/assets/wikimedia` are pulled from [Wikimedia Commons](https://commons.wikimedia.org/wiki/Main_Page)
Android Drawables in `/assets/android_vd` are pulled from Android Documentation
and examples.
The Flutter Logo created based on the Flutter Logo Widget © Google.
The Dart logo is from
[dartlang.org](https://github.com/dart-lang/site-shared/blob/master/src/_assets/images/dart/logo%2Btext/horizontal/original.svg)
© Google
SVGs in `/assets/noto-emoji` are from [Google i18n noto-emoji](https://github.com/googlei18n/noto-emoji),
licensed under the Apache license.
Please submit SVGs that 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).
## Commemoration
This package was originally authored by
[Dan Field](https://github.com/dnfield) and has been forked here
from [dnfield/flutter_svg](https://github.com/dnfield/flutter_svg).
Dan was a member of the Flutter team at Google from 2018 until his death
in 2024. Dan’s impact and contributions to Flutter were immeasurable, and we
honor his memory by continuing to publish and maintain this package.
## Changelog
## 2.3.2
* Fixes `SvgNetworkLoader` parsing the body of a non-2xx HTTP response as SVG.
It now throws an `http.ClientException` naming the status code and URL.
## 2.3.1
* Adds support for SVG alpha masks (`mask-type="alpha"`).
* Updates minimum supported SDK version to Flutter 3.41/Dart 3.11.
## 2.3.0
* Adds an `imageBuilder` property to `SvgPicture` for wrapping the loaded SVG
widget.
## 2.2.4
* Updates README with example to scale SVG without losing quality
* Updates minimum supported SDK version to Flutter 3.35/Dart 3.9.
## 2.2.3
* Replaces use of deprecated Color.value.
* Updates minimum supported SDK version to Flutter 3.32/Dart 3.8.
## 2.2.2
* Fixes typo of `allowDrawingOutsideViewBox` in doc comments.
## 2.2.1
* Fixes message buffer access in SvgAssetLoader.
* Updates minimum supported SDK version to Flutter 3.29/Dart 3.7.
## 2.2.0
* Exposes `renderingStrategy` in `SvgPicture` constructors.
* Updates minimum supported SDK version to Flutter 3.27/Dart 3.6.
## 2.1.0
* Exposes `colorMapper` in `SvgPicture` constructors.
## 2.0.17
* Implement errorBuilder callback
## 2.0.16
* Adopts code excerpts for README.
## 2.0.15
* Fixes `SvgNetworkLoader` not closing internally created http clients.
## 2.0.14
* Makes the package WASM compatible.
## 2.0.13
* Relaxes the dependency constraints on vector_graphics, vector_graphics_codec,
and vector_graphics_compiler.
## 2.0.12
* Adds `missing_code_block_language_in_doc_comment` lint.
## 2.0.11
* Transfers the package source from https://github.com/dnfield/flutter_svg
to https://github.com/flutter/packages.
## 2.0.10+1
* Relax http dependency.
## 2.0.10
* Use package:http for network requests, and allow injection of the client.
* Bump vector_graphics dependency.
## 2.0.9
* Adds back `SvgPicture(theme:)` parameter with a deprecation. Although this
parameter was inherently broken, removing it would require a major semver
bump, which would cause consumers to miss out on important fixes.
## 2.0.8
* Adds back `DefaultSvgTheme`.
* Bump vector_graphics to 1.1.9+1
* Adds debugFillProperties
* Fix bug for cache keys.
## 2.0.7
* Fix broken `matchTextDirection`.
## 2.0.6
* Fix test-only issues with latest Flutter stable (3.10).
* Roll vector_graphics to higher minimum version.
## 2.0.5
* Allow malformed UTF-8 in loaders.
* Make the cache respect the SvgTheme and ColorMapper, if present.
## 2.0.4
* Newer version of vector_graphics.
* Caching bug fix.
* Reintroduce clipBehavior.
## 2.0.3
* Require newer version of vector_graphics.
* Fix bug in cache that incorrectly fired assert.
## 2.0.2
* Require newer version of vector_graphics with multiple fixes around
inheritence, patterns, and currentColor handling.
## 2.0.1
* Disable Isolate parsing in debug mode.
* Fix internal Color representation leakage from `package:vector_graphics_compiler`.
## 2.0.0+1
* Fix bug in asset loading from packages.
## 2.0.0
* Use parsing backend from `vector_graphics_compiler`.
* Out of order defs now supported.
* Patterns supported.
* Many optimizations added.
* **REGRESSION**: Lost support for `dx` and `dy` on `text`. See
https://github.com/dnfield/vector_graphics/issues/44 if this is important to
you.
* Parse SVG data in background isolate by default.
* Use widgets/rendering strategy from `vector_graphics`.
* Much less caching.
* More tests work without special handling - most of parsing is now sync,
and the loaders know how to avoid using `compute` in tests. For SVGs that
contain images, `vg.waitForPendingDecodes` is available.
**DEPRECATIONS**
* The `VectorDrawable` classes have gone away.
* The `AvdPicture` and related classes/parser have gone away.
* The `PictureCache` and `PictureStream` classes have gone away.
* The `PicturePovider` class exists only for access to a no-op cache.
* Several static members on `SvgPicture` and the `svg` utility class have gone
away.
* The `color` and `colorBlendMode` properties have been removed. Instead, use
the `colorFilter` property.
## 1.1.6
* Fix transforms on image tags, clipPaths.
* Avoid painting zero-width strokes.
## 1.1.5
* More permissive about color strings.
## 1.1.4
* Handle default image width/height properly.
## 1.1.3
* Handle `pt` values.
## 1.1.2
* Update path parsing/drawing dependencies to fix arc parsing bug.
## 1.1.1+1
* Fix regression introduced in 1.1.1
* Update fix for fill/stroke inheritence when currentColor is specified in the
SVG but not in the theme.
## 1.1.1
* Fix a bug introduced in 1.1.0 related to fill/stroke inheritence.
* Explicit dev_dependency on flutter_lints
* Avoid deprecated API from Flutter.
## 1.1.0
* Respect stroke* properties when a paint definition is used for a stroke.
* Respect stroke* properties from groups with no `@stroke` property.
* Bump package versions.
## 1.0.3+1
* Fix bugs in picture disposal.
## 1.0.3
* Use `longestLine` rather than `minIntrinsicWidth` to place text.
* Avoid unnecessary painting when a picture doesn't actually change in
[RenderPicture].
## 1.0.2
* Avoid cache invalidation when `currentColor` or font based units are not used.
* Support `rem` units.
## 1.0.1
* Fix bug with incorrect fills in some cases of `