[flutter_svg] Incorrect behavior of BoxFit parameter

What package does this bug report belong to?

flutter_svg

What target platforms are you seeing this bug on?

iOS

Have you already upgraded your packages?

Yes

Dependency versions

pubspec.lock

# Generated by pub
# See https://dart.dev/tools/pub/glossary#lockfile
packages:
  api_repository:
    dependency: "direct main"
    description:
      path: "packages/api_repository"
      relative: true
    source: path
    version: "0.1.0"
  args:
    dependency: transitive
    description:
      name: args
      sha256: bf9f5caeea8d8fe6721a9c358dd8a5c1947b27f1cfaa18b39c301273594919e6
      url: "https://pub.dev"
    source: hosted
    version: "2.6.0"
  async:
    dependency: transitive
    description:
      name: async
      sha256: d2872f9c19731c2e5f10444b14686eb7cc85c76274bd6c16e1816bff9a3bab63
      url: "https://pub.dev"
    source: hosted
    version: "2.12.0"
  beacon_repository:
    dependency: "direct main"
    description:
      path: "packages/beacon_repository"
      relative: true
    source: path
    version: "0.1.0"
  beacon_scanner:
    dependency: "direct main"
    description:
      path: "packages/beacon_scanner"
      relative: true
    source: path
    version: "0.1.0"
  characters:
    dependency: transitive
    description:
      name: characters
      sha256: "04a925763edad70e8443c99234dc3328f442e811f1d8fd1a72f1c8ad0f69a605"
      url: "https://pub.dev"
    source: hosted
    version: "1.3.0"
  clock:
    dependency: transitive
    description:
      name: clock
      sha256: cb6d7f03e1de671e34607e909a7213e31d7752be4fb66a86d29fe1eb14bfb5cf
      url: "https://pub.dev"
    source: hosted
    version: "1.1.1"
  collection:
    dependency: transitive
    description:
      name: collection
      sha256: ee67cb0715911d28db6bf4af1026078bd6f0128b07a5f66fb2ed94ec6783c09a
      url: "https://pub.dev"
    source: hosted
    version: "1.18.0"
  dbus:
    dependency: transitive
    description:
      name: dbus
      sha256: "365c771ac3b0e58845f39ec6deebc76e3276aa9922b0cc60840712094d9047ac"
      url: "https://pub.dev"
    source: hosted
    version: "0.7.10"
  extensions:
    dependency: "direct main"
    description:
      path: "packages/extensions"
      relative: true
    source: path
    version: "0.1.0"
  ffi:
    dependency: transitive
    description:
      name: ffi
      sha256: "16ed7b077ef01ad6170a3d0c57caa4a112a38d7a2ed5602e0aca9ca6f3d98da6"
      url: "https://pub.dev"
    source: hosted
    version: "2.1.3"
  flutter:
    dependency: "direct main"
    description: flutter
    source: sdk
    version: "0.0.0"
  flutter_lints:
    dependency: "direct dev"
    description:
      name: flutter_lints
      sha256: "5398f14efa795ffb7a33e9b6a08798b26a180edac4ad7db3f231e40f82ce11e1"
      url: "https://pub.dev"
    source: hosted
    version: "5.0.0"
  flutter_local_notifications:
    dependency: "direct main"
    description:
      name: flutter_local_notifications
      sha256: ef41ae901e7529e52934feba19ed82827b11baa67336829564aeab3129460610
      url: "https://pub.dev"
    source: hosted
    version: "18.0.1"
  flutter_local_notifications_linux:
    dependency: transitive
    description:
      name: flutter_local_notifications_linux
      sha256: "8f685642876742c941b29c32030f6f4f6dacd0e4eaecb3efbb187d6a3812ca01"
      url: "https://pub.dev"
    source: hosted
    version: "5.0.0"
  flutter_local_notifications_platform_interface:
    dependency: transitive
    description:
      name: flutter_local_notifications_platform_interface
      sha256: "6c5b83c86bf819cdb177a9247a3722067dd8cc6313827ce7c77a4b238a26fd52"
      url: "https://pub.dev"
    source: hosted
    version: "8.0.0"
  flutter_localizations:
    dependency: "direct main"
    description: flutter
    source: sdk
    version: "0.0.0"
  flutter_secure_storage:
    dependency: transitive
    description:
      name: flutter_secure_storage
      sha256: "165164745e6afb5c0e3e3fcc72a012fb9e58496fb26ffb92cf22e16a821e85d0"
      url: "https://pub.dev"
    source: hosted
    version: "9.2.2"
  flutter_secure_storage_linux:
    dependency: transitive
    description:
      name: flutter_secure_storage_linux
      sha256: "4d91bfc23047422cbcd73ac684bc169859ee766482517c22172c86596bf1464b"
      url: "https://pub.dev"
    source: hosted
    version: "1.2.1"
  flutter_secure_storage_macos:
    dependency: transitive
    description:
      name: flutter_secure_storage_macos
      sha256: "1693ab11121a5f925bbea0be725abfcfbbcf36c1e29e571f84a0c0f436147a81"
      url: "https://pub.dev"
    source: hosted
    version: "3.1.2"
  flutter_secure_storage_platform_interface:
    dependency: transitive
    description:
      name: flutter_secure_storage_platform_interface
      sha256: cf91ad32ce5adef6fba4d736a542baca9daf3beac4db2d04be350b87f69ac4a8
      url: "https://pub.dev"
    source: hosted
    version: "1.1.2"
  flutter_secure_storage_web:
    dependency: transitive
    description:
      name: flutter_secure_storage_web
      sha256: f4ebff989b4f07b2656fb16b47852c0aab9fed9b4ec1c70103368337bc1886a9
      url: "https://pub.dev"
    source: hosted
    version: "1.2.1"
  flutter_secure_storage_windows:
    dependency: transitive
    description:
      name: flutter_secure_storage_windows
      sha256: b20b07cb5ed4ed74fc567b78a72936203f587eba460af1df11281c9326cd3709
      url: "https://pub.dev"
    source: hosted
    version: "3.1.2"
  flutter_svg:
    dependency: "direct main"
    description:
      name: flutter_svg
      sha256: "578bd8c508144fdaffd4f77b8ef2d8c523602275cd697cc3db284dbd762ef4ce"
      url: "https://pub.dev"
    source: hosted
    version: "2.0.14"
  flutter_web_plugins:
    dependency: transitive
    description: flutter
    source: sdk
    version: "0.0.0"
  http:
    dependency: transitive
    description:
      name: http
      sha256: b9c29a161230ee03d3ccf545097fccd9b87a5264228c5d348202e0f0c28f9010
      url: "https://pub.dev"
    source: hosted
    version: "1.2.2"
  http_parser:
    dependency: transitive
    description:
      name: http_parser
      sha256: "2aa08ce0341cc9b354a498388e30986515406668dbcc4f7c950c3e715496693b"
      url: "https://pub.dev"
    source: hosted
    version: "4.0.2"
  intl:
    dependency: "direct main"
    description:
      name: intl
      sha256: d6f56758b7d3014a48af9701c085700aac781a92a87a62b1333b46d8879661cf
      url: "https://pub.dev"
    source: hosted
    version: "0.19.0"
  js:
    dependency: transitive
    description:
      name: js
      sha256: f2c445dce49627136094980615a031419f7f3eb393237e4ecd97ac15dea343f3
      url: "https://pub.dev"
    source: hosted
    version: "0.6.7"
  lints:
    dependency: transitive
    description:
      name: lints
      sha256: "3315600f3fb3b135be672bf4a178c55f274bebe368325ae18462c89ac1e3b413"
      url: "https://pub.dev"
    source: hosted
    version: "5.0.0"
  logging:
    dependency: "direct main"
    description:
      name: logging
      sha256: c8245ada5f1717ed44271ed1c26b8ce85ca3228fd2ffdb75468ab01979309d61
      url: "https://pub.dev"
    source: hosted
    version: "1.3.0"
  material_color_utilities:
    dependency: transitive
    description:
      name: material_color_utilities
      sha256: f7142bb1154231d7ea5f96bc7bde4bda2a0945d2806bb11670e30b850d56bdec
      url: "https://pub.dev"
    source: hosted
    version: "0.11.1"
  meta:
    dependency: transitive
    description:
      name: meta
      sha256: bdb68674043280c3428e9ec998512fb681678676b3c54e773629ffe74419f8c7
      url: "https://pub.dev"
    source: hosted
    version: "1.15.0"
  package_info_plus:
    dependency: "direct main"
    description:
      name: package_info_plus
      sha256: da8d9ac8c4b1df253d1a328b7bf01ae77ef132833479ab40763334db13b91cce
      url: "https://pub.dev"
    source: hosted
    version: "8.1.1"
  package_info_plus_platform_interface:
    dependency: transitive
    description:
      name: package_info_plus_platform_interface
      sha256: ac1f4a4847f1ade8e6a87d1f39f5d7c67490738642e2542f559ec38c37489a66
      url: "https://pub.dev"
    source: hosted
    version: "3.0.1"
  path:
    dependency: transitive
    description:
      name: path
      sha256: "087ce49c3f0dc39180befefc60fdb4acd8f8620e5682fe2476afd0b3688bb4af"
      url: "https://pub.dev"
    source: hosted
    version: "1.9.0"
  path_parsing:
    dependency: transitive
    description:
      name: path_parsing
      sha256: "883402936929eac138ee0a45da5b0f2c80f89913e6dc3bf77eb65b84b409c6ca"
      url: "https://pub.dev"
    source: hosted
    version: "1.1.0"
  path_provider:
    dependency: "direct main"
    description:
      name: path_provider
      sha256: "50c5dd5b6e1aaf6fb3a78b33f6aa3afca52bf903a8a5298f53101fdaee55bbcd"
      url: "https://pub.dev"
    source: hosted
    version: "2.1.5"
  path_provider_android:
    dependency: transitive
    description:
      name: path_provider_android
      sha256: c464428172cb986b758c6d1724c603097febb8fb855aa265aeecc9280c294d4a
      url: "https://pub.dev"
    source: hosted
    version: "2.2.12"
  path_provider_foundation:
    dependency: transitive
    description:
      name: path_provider_foundation
      sha256: f234384a3fdd67f989b4d54a5d73ca2a6c422fa55ae694381ae0f4375cd1ea16
      url: "https://pub.dev"
    source: hosted
    version: "2.4.0"
  path_provider_linux:
    dependency: transitive
    description:
      name: path_provider_linux
      sha256: f7a1fe3a634fe7734c8d3f2766ad746ae2a2884abe22e241a8b301bf5cac3279
      url: "https://pub.dev"
    source: hosted
    version: "2.2.1"
  path_provider_platform_interface:
    dependency: transitive
    description:
      name: path_provider_platform_interface
      sha256: "88f5779f72ba699763fa3a3b06aa4bf6de76c8e5de842cf6f29e2e06476c2334"
      url: "https://pub.dev"
    source: hosted
    version: "2.1.2"
  path_provider_windows:
    dependency: transitive
    description:
      name: path_provider_windows
      sha256: bd6f00dbd873bfb70d0761682da2b3a2c2fccc2b9e84c495821639601d81afe7
      url: "https://pub.dev"
    source: hosted
    version: "2.3.0"
  petitparser:
    dependency: transitive
    description:
      name: petitparser
      sha256: c15605cd28af66339f8eb6fbe0e541bfe2d1b72d5825efc6598f3e0a31b9ad27
      url: "https://pub.dev"
    source: hosted
    version: "6.0.2"
  platform:
    dependency: transitive
    description:
      name: platform
      sha256: "5d6b1b0036a5f331ebc77c850ebc8506cbc1e9416c27e59b439f917a902a4984"
      url: "https://pub.dev"
    source: hosted
    version: "3.1.6"
  plugin_platform_interface:
    dependency: transitive
    description:
      name: plugin_platform_interface
      sha256: "4820fbfdb9478b1ebae27888254d445073732dae3d6ea81f0b7e06d5dedc3f02"
      url: "https://pub.dev"
    source: hosted
    version: "2.1.8"
  qr_scanner:
    dependency: "direct main"
    description:
      path: "packages/qr_scanner"
      relative: true
    source: path
    version: "0.1.0"
  sky_engine:
    dependency: transitive
    description: flutter
    source: sdk
    version: "0.0.99"
  source_span:
    dependency: transitive
    description:
      name: source_span
      sha256: "53e943d4206a5e30df338fd4c6e7a077e02254531b138a15aec3bd143c1a8b3c"
      url: "https://pub.dev"
    source: hosted
    version: "1.10.0"
  string_scanner:
    dependency: transitive
    description:
      name: string_scanner
      sha256: "0bd04f5bb74fcd6ff0606a888a30e917af9bd52820b178eaa464beb11dca84b6"
      url: "https://pub.dev"
    source: hosted
    version: "1.4.0"
  term_glyph:
    dependency: transitive
    description:
      name: term_glyph
      sha256: a29248a84fbb7c79282b40b8c72a1209db169a2e0542bce341da992fe1bc7e84
      url: "https://pub.dev"
    source: hosted
    version: "1.2.1"
  timezone:
    dependency: transitive
    description:
      name: timezone
      sha256: ffc9d5f4d1193534ef051f9254063fa53d588609418c84299956c3db9383587d
      url: "https://pub.dev"
    source: hosted
    version: "0.10.0"
  typed_data:
    dependency: transitive
    description:
      name: typed_data
      sha256: f9049c039ebfeb4cf7a7104a675823cd72dba8297f264b6637062516699fa006
      url: "https://pub.dev"
    source: hosted
    version: "1.4.0"
  vector_graphics:
    dependency: transitive
    description:
      name: vector_graphics
      sha256: "773c9522d66d523e1c7b25dfb95cc91c26a1e17b107039cfe147285e92de7878"
      url: "https://pub.dev"
    source: hosted
    version: "1.1.14"
  vector_graphics_codec:
    dependency: transitive
    description:
      name: vector_graphics_codec
      sha256: "2430b973a4ca3c4dbc9999b62b8c719a160100dcbae5c819bae0cacce32c9cdb"
      url: "https://pub.dev"
    source: hosted
    version: "1.1.12"
  vector_graphics_compiler:
    dependency: transitive
    description:
      name: vector_graphics_compiler
      sha256: ab9ff38fc771e9ee1139320adbe3d18a60327370c218c60752068ebee4b49ab1
      url: "https://pub.dev"
    source: hosted
    version: "1.1.15"
  vector_math:
    dependency: transitive
    description:
      name: vector_math
      sha256: "80b3257d1492ce4d091729e3a67a60407d227c27241d6927be0130c98e741803"
      url: "https://pub.dev"
    source: hosted
    version: "2.1.4"
  web:
    dependency: transitive
    description:
      name: web
      sha256: cd3543bd5798f6ad290ea73d210f423502e71900302dde696f8bff84bf89a1cb
      url: "https://pub.dev"
    source: hosted
    version: "1.1.0"
  win32:
    dependency: transitive
    description:
      name: win32
      sha256: "84ba388638ed7a8cb3445a320c8273136ab2631cd5f2c57888335504ddab1bc2"
      url: "https://pub.dev"
    source: hosted
    version: "5.8.0"
  xdg_directories:
    dependency: transitive
    description:
      name: xdg_directories
      sha256: "7a3f37b05d989967cdddcbb571f1ea834867ae2faa29725fd085180e0883aa15"
      url: "https://pub.dev"
    source: hosted
    version: "1.1.0"
  xml:
    dependency: transitive
    description:
      name: xml
      sha256: b015a8ad1c488f66851d762d3090a21c600e479dc75e68328c52774040cf9226
      url: "https://pub.dev"
    source: hosted
    version: "6.5.0"
sdks:
  dart: ">=3.5.1 <4.0.0"
  flutter: ">=3.24.0"

Steps to reproduce

Create a widget with Column or Row, which contains Expanded element with svg icon asset in it
Set asset fit property

Expected results

I expect it to behave like Image.asset(path, fit: fit) would do

Actual results

Behavior differs from expected

Code sample

Column(
                  children: [
                          Expanded(
                            child: AssetManager.loadImage(AssetManager.COMPUTER),
                          ),
                          Expanded(
                              child: Row(
                            children: [
                              Expanded(child: Image.asset(AssetManager.CAMERAPNG, fit: BoxFit.contain)),
                              Expanded(child: SvgPicture.asset(AssetManager.CAMERA, fit: BoxFit.contain)),
                            ],
                          )),
                        ],
                ),

Screenshots or Videos

Screenshots / Video demonstration

On the left side is png image, on the right is svg:

BoxFit.contain

BoxFit.fill

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

 flutter doctor -v
[✓] Flutter (Channel stable, 3.24.4, on macOS 15.1 24B83 darwin-arm64, locale
    ja-JP)
    • Flutter version 3.24.4 on channel stable at
      /opt/homebrew/Caskroom/flutter/3.24.4/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 603104015d (3 weeks ago), 2024-10-24 08:01:25 -0700
    • Engine revision db49896cf2
    • Dart version 3.5.4
    • DevTools version 2.37.3

[✓] Android toolchain - develop for Android devices (Android SDK version
    35.0.0)
    • Android SDK at /Users/mock/Library/Android/sdk
    • Platform android-35, build-tools 35.0.0
    • Java binary at: /Applications/Android
      Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      21.0.3+-79915917-b509.11)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16B40
    • CocoaPods version 1.16.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build
      21.0.3+-79915917-b509.11)

[✓] VS Code (version 1.95.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.100.0

[✓] Connected device (4 available)
    • iPhone  (mobile)                • 00008110-000260A81111401E • ios
      • iOS 18.1 22B83
    • macOS (desktop)                 • macos                     •
      darwin-arm64   • macOS 15.1 24B83 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad     • darwin
      • macOS 15.1 24B83 darwin-arm64
    • Chrome (web)                    • chrome                    •
      web-javascript • Google Chrome 130.0.6723.117

[✓] Network resources
    • All expected network resources are available.

• No issues found!

@mock1328

Hi @mock1328
Your code is from your project, I can't use it to verify the issue. Can you share the asset files and a runnable sample code (main.dart file)? Thanks!

@huycozy

Hello, @huycozy !
Sorry for the delay. You can use this code to confirm the behavior on screenshots above.

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          padding: EdgeInsets.all(20.0),
          child: Card(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(15.0),
            ),
            color: Colors.grey,
            child: Column(
              children: [
                Expanded(
                  child: Row(
                    children: [
                      Expanded(
                        child: Image.asset(
                          "assets/images/icons/camera.png",
                          fit: BoxFit.contain,
                        ),
                      ),
                      Expanded(
                        child: SvgPicture.asset(
                          "assets/images/icons/camera.svg",
                          fit: BoxFit.contain,
                        ),
                      ),
                    ],
                  ),
                ),
                Expanded(
                  child: Row(
                    children: [
                      Expanded(
                        child: Image.asset(
                          "assets/images/icons/camera.png",
                          fit: BoxFit.fill,
                        ),
                      ),
                      Expanded(
                        child: SvgPicture.asset(
                          "assets/images/icons/camera.svg",
                          fit: BoxFit.fill,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

In my example I used this icon

Thanks. I can reproduce the issue on Android and Web platforms as well. Even though, I'm unsure this is an actual bug. Per BoxFit.fill documentation:

flutter/packages/flutter/lib/src/painting/box_fit.dart

Lines 22 to 26 in f38127a

    
           enum BoxFit { 
        
             /// Fill the target box by distorting the source's aspect ratio. 
        
             /// 
        
             /// ![](https://flutter.github.io/assets-for-api-docs/assets/painting/box_fit_fill.png) 
        
             fill,

Since SVG is vector data, it could be stretched based on the parent layout. Labeling this for further insight.

Shouldn't it be stretched -- to some degree -- when using contain too? If it's size is decided by parent layout, which is Expanded in the example, I expect it to take all available space both vertically and horizontally (keeping the aspect ratio, when using contain, of course, and just take all space with fill)

Updating the labels. Seeing the same behaviour with latest SDK versions.

stable : 3.35.7
master : 3.38.0-1.0.pre-462

[vector_graphics] Respect BoxFit parameter with viewbox (flutter#11012)

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

[vector_graphics] Respect BoxFit parameter with viewbox (flutter#11012)

Navigation Menu

Repository navigation

[flutter_svg] Incorrect behavior of BoxFit parameter #158496

What package does this bug report belong to?

What target platforms are you seeing this bug on?

Have you already upgraded your packages?

Dependency versions

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Videos

Logs

Flutter Doctor output

9 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	enum BoxFit {
	/// Fill the target box by distorting the source's aspect ratio.
	///
	/// ![](https://flutter.github.io/assets-for-api-docs/assets/painting/box_fit_fill.png)
	fill,

[flutter_svg] Incorrect behavior of BoxFit parameter #158496

Description

What package does this bug report belong to?

What target platforms are you seeing this bug on?

Have you already upgraded your packages?

Dependency versions

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Videos

Logs

Flutter Doctor output

Activity

huycozy commented on Nov 12, 2024

mock1328 commented on Nov 14, 2024

huycozy commented on Nov 14, 2024

mock1328 commented on Nov 14, 2024

9 remaining items

tirth-patel-nc commented on Nov 7, 2025

github-actions commented on Mar 25, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions