flutter_svg

SVG parsing, rendering, and widget library for Flutter

1,677

459

1,677

246

View on GitHub

Top Related Projects

Flare-Flutter

2,549

Load and get full control of your Rive files in a Flutter project using this library.

Quick Overview

Flutter SVG is a Flutter package that enables rendering of SVG (Scalable Vector Graphics) files in Flutter applications. It provides a simple way to display SVG images, icons, and illustrations within your Flutter widgets, supporting various SVG features and offering customization options.

Pros

Easy integration with Flutter widgets
Supports a wide range of SVG features and elements
Allows for customization of SVG rendering
Provides good performance for most use cases

Cons

May have limitations with complex SVG animations
Some advanced SVG features might not be fully supported
Can be slower than native image formats for very large or complex SVGs
Occasional rendering inconsistencies across different platforms

Code Examples

Loading an SVG from an asset:

import 'package:flutter_svg/flutter_svg.dart';

SvgPicture.asset(
  'assets/my_icon.svg',
  height: 48,
  width: 48,
)

Loading an SVG from a network URL:

SvgPicture.network(
  'https://example.com/image.svg',
  placeholderBuilder: (BuildContext context) => CircularProgressIndicator(),
)

Customizing SVG colors:

SvgPicture.asset(
  'assets/my_icon.svg',
  color: Colors.red,
  semanticsLabel: 'A red icon',
)

Getting Started

Add the dependency to your pubspec.yaml file:

dependencies:
  flutter_svg: ^2.0.5

Import the package in your Dart file:

import 'package:flutter_svg/flutter_svg.dart';

Use the SvgPicture widget to display SVGs in your Flutter app:

SvgPicture.asset(
  'assets/my_image.svg',
  height: 200,
  width: 200,
)

Remember to add your SVG files to the assets folder and declare them in your pubspec.yaml file under the assets section.

Competitor Comparisons

rive-flutter

1,243

Flutter runtime for Rive

Pros of rive-flutter

Supports complex animations and interactive vector graphics
Offers runtime manipulation of animations and state machines
Provides a more efficient runtime performance for complex animations

Cons of rive-flutter

Steeper learning curve due to its more complex feature set
Requires using Rive's proprietary file format and editor
Limited to Rive-specific animations, less flexible for general SVG rendering

Code Comparison

flutter_svg:

SvgPicture.asset(
  'assets/image.svg',
  width: 200,
  height: 200,
)

rive-flutter:

RiveAnimation.asset(
  'assets/animation.riv',
  animations: ['idle'],
  controllers: [SimpleAnimation('idle')],
)

Key Differences

flutter_svg is focused on rendering static SVG files, while rive-flutter is designed for complex, interactive animations. flutter_svg is more suitable for simple SVG rendering tasks, while rive-flutter excels in creating rich, interactive user experiences with vector graphics.

flutter_svg has a broader compatibility with standard SVG files, making it easier to work with existing assets. rive-flutter, on the other hand, requires using Rive's specific file format and tooling but offers more advanced animation capabilities.

For projects requiring simple SVG rendering, flutter_svg may be the better choice due to its simplicity and compatibility. However, for apps needing sophisticated animations and interactivity, rive-flutter provides a more powerful solution despite its steeper learning curve.

Flare-Flutter

2,549

Load and get full control of your Rive files in a Flutter project using this library.

Pros of Flare-Flutter

Supports complex animations and interactive vector graphics
Provides a complete design-to-code workflow with the Flare design tool
Offers runtime manipulation of animations and vector graphics

Cons of Flare-Flutter

Steeper learning curve due to the need to use the Flare design tool
Limited to Flare-specific file format, reducing flexibility
May have larger file sizes for complex animations

Code Comparison

flutter_svg usage:

SvgPicture.asset(
  'assets/image.svg',
  width: 200,
  height: 200,
)

Flare-Flutter usage:

FlareActor(
  'assets/animation.flr',
  animation: 'idle',
  fit: BoxFit.contain,
)

Summary

flutter_svg is a lightweight library for rendering static SVG files in Flutter applications. It's easy to use and supports a wide range of SVG features. On the other hand, Flare-Flutter is a more comprehensive solution for creating and displaying complex, interactive vector animations. While Flare-Flutter offers more advanced features, it requires using the Flare design tool and has a steeper learning curve. The choice between the two depends on the specific needs of your project, with flutter_svg being better for simple SVG rendering and Flare-Flutter excelling in complex, interactive animations.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

flutter_svg

Draw SVG files using Flutter.

Commemoration and new location

This repository was originally created by Dan Field and its contents has been moved into the Flutter GitHub organization. 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 these packages.

These packages are now maintained by the Flutter team in the flutter/packages repository.

Top Related Projects

rive-flutter

1,243

Flutter runtime for Rive

Flare-Flutter

2,549

Load and get full control of your Rive files in a Flutter project using this library.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot