How to Use SVG in Flutter
Display crisp SVG icons and graphics in your Flutter app using the flutter_svg package — works on iOS, Android, web, and desktop from a single codebase.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Setting Up SVG in Flutter
Flutter doesn't support SVG natively — use the flutter_svg package.
- Add to pubspec.yaml: flutter_svg: ^2.0.0 under dependencies:
- Run: flutter pub get
- Import: import 'package:flutter_svg/flutter_svg.dart';
- Add SVG to assets: in pubspec.yaml under flutter: assets: - assets/icons/icon.svg
- Run flutter pub get again after adding assets
Displaying SVG in Flutter Widgets
flutter_svg provides SvgPicture widget with multiple loading options.
- Asset: SvgPicture.asset('assets/icons/icon.svg', width: 48, height: 48)
- Network: SvgPicture.network('https://example.com/icon.svg')
- String: SvgPicture.string('<svg>...</svg>')
- Color override: colorFilter: ColorFilter.mode(Colors.blue, BlendMode.srcIn)
- Placeholder: placeholderBuilder: (context) => CircularProgressIndicator()
Frequently Asked Questions
Does Flutter support SVG animations?
flutter_svg renders static SVGs only. For animated SVG/Lottie, use the lottie package (Dart). For complex SVG animations, convert to Lottie format using Adobe After Effects or LottieFiles.
Why is my SVG rendering differently on iOS vs Android in Flutter?
flutter_svg uses a custom SVG renderer — features not supported (complex filters, some gradients) may render differently. Stick to path-based SVGs for consistent cross-platform rendering.
How do I change the color of an SVG icon in Flutter?
Use colorFilter: ColorFilter.mode(Colors.red, BlendMode.srcIn) on SvgPicture. This replaces all non-transparent SVG colors with the specified color — best for single-color icon SVGs.
What's the performance difference between SVG and PNG in Flutter?
PNG renders faster (already rasterized). SVG requires parsing and rendering at runtime — adds ~1-5ms per SVG on average devices. For frequently redrawn SVGs, consider pre-rasterizing. For icons: the difference is negligible.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG