how to change size of svg image in flutter?

user_11925795 0
Viewed 19312

I used flutter_svg: ^0.18.0 to use svg images inside my project. But I cannot able to find a proper way to change the size of it.

Here's my code

body: SafeArea(
    child: Center(
      child: SvgPicture.asset('assets/images/morelights.svg'),
    ),
  ),
flutter-dependencies flutter svg android
8 Answers

The key hint is to use fit attribute like this:

SvgPicture.asset(
      'assets/svg/notification.svg',
      height: 5, width: 5,
      fit: BoxFit.scaleDown
        )
user_22409570

I found a solution for this :)

Steps

  1. Wrap svg icon inside a container. ( Container should be a child widget)
  2. Set color of the container to transparent.
  3. Change the size of the container. (Svg icon inhert the size of parent widget.)

Note: You can use IconButton widget as well. Container works better in my case :)

Example

dart code

output

user_124337910

You can wrap your SvgPicture widget with IconButton

IconButton(
  onPressed: (){},
  icon: SvgPicture.asset(
      icDate,
      height: 24,
      width: 24,
  ),
),
user_62852790

you just have to use properties width and height of svg picture.

SvgPicture.asset(
        'assets/images/bm-icon1.svg',
         width: 18.0,
         height: 18.0,
      ),
user_158944150

Edit: You can use the SizedBox to easily achieve this:

SizedBox(
  width: 100.0,
  height: 150.0,
  child: SvgPicture.asset('assets/images/morelights.svg',),
)

Original Answer:

You can specify the height and width in the asset constructor itself:

SvgPicture.asset('assets/images/morelights.svg', height: 100, width: 150)

Read all the available properties in this document: SvgPicture.asset

user_11043840

Wrap it in a Container widget as the SvgPicture.asset() will always take the full available height or width of the parent. you can size the Container widget height and width to get the desirable sizing you want for your SVG.

Container(
                  child: SvgPicture.asset('assets/images/morelights.svg'),
                  height: 100,
                ),
user_88333370

You can use the height and width parameters of SvgPicture.asset:

Center(child: SvgPicture.asset(icon, height: 20, width: 20))
user_47184060

I found the solution by accident. Wrap SvgPicture with Container widget and add alignment.

That way you can freely change the width and height of the SvgPicture.

Container(
  height: 100,
  width: 100,
  alignment: Alignment.center, // <---- The magic
  padding: const EdgeInsets.all(12),
  child: SvgPicture.asset(
     'assets/icons/svg-image.svg',
     semanticsLabel: 'Image',
     height: 50,
     width: 50,
  ),
),

Hope this works in your case

user_102754060
Related