Stroke width looks off

[DenisShakinov]

I have a simple svg file as follows:

<svg xmlns="http://www.w3.org/2000/svg" width="74" height="74" viewBox="0 0 74 74">
    <defs>
        <linearGradient id="a" x1="0%" y1="0%" y2="100%">
            <stop offset="0%" stop-color="#FF7805"/>
            <stop offset="100%" stop-color="#FF0202"/>
        </linearGradient>
    </defs>
    <rect width="68" height="68" fill="none" fill-rule="evenodd" stroke="url(#a)" stroke-width="4.2" rx="29" transform="translate(3 3)"/>
</svg>

In desktop svg viewer it renders like this: but in my flutter application it renders like a very thin line (gradients are correct though):

[dnfield]

What if you remove the width/height attributds from the svg element?

[DenisShakinov]

Nothing changed.

[dnfield]

What version are you using?

[DenisShakinov]

Since I'm using stable Flutter channel, the flutter_svg version is ^0.12.4+2

[thisisgit]

I'm facing the same issue and looks like it's because passing width and height arguments to SvgPicture just scales up/down the original svg asset.

For example, here's a sample close icon in svg:

<svg xmlns="http://www.w3.org/2000/svg" width="15.414" height="15.414" viewBox="0 0 15.414 15.414">
  <g transform="translate(0.707 0.707)">
    <line x2="14" y2="14" stroke="#000000" stroke-linecap="round" stroke-width="1"/>
    <line x2="14" y2="14" transform="translate(14) rotate(90)" stroke="#000000" stroke-linecap="round" stroke-width="1"/>
  </g>
</svg>

Note that both lines have stroke width of 1. And it looks like this when rendered:

I was expecting lines to have stroke width of 1 even width and height of the image changes. So with the following code:

Row(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                SvgPicture.asset(
                  'assets/close_icon.svg',
                  width: 16,
                  height: 16,
                ),
                SizedBox(
                  width: 16.0,
                ),
                SvgPicture.asset(
                  'assets/close_icon.svg',
                  width: 64.0,
                  height: 64.0,
                )
              ],
            )

I expected output to be:

But what rendered was:

I thought setting width and height value would change the width and height attribute of svg tag. But what it did was to just scale up/down.

Is there any proper way to achieve this or is it a new feature request? Please correct me if I'm getting this wrong.

@dnfield

[liri2006]

Same issue here.

[njovy]

@dnfield I am having the same issue as well. Is there any workaround for this? If a stroke refers a linear gradient, then it doesn't render correctly.

[njovy]

@dnfield The latest version doesn't parse "stroke-width" if a stroke is a linearGradient, can we expect to see a bug fix soon?

[dnfield]

I'm not sure I ever got a clear reproduction on this that I could reproduce locally. I can try to look at it again though.

[vishna]

@thisisgit this is expected behaviour - you need another svg with scaled up values and with width in it that says 1

[njovy]

@vishna If you look at the flutter svg code, the plugin doesn't parse stroke-width attribute if a stroke is a linearGradient.

[aytunch]

@njovy I have the exact same problem. There is a stroke-width inside a linearGradient and it only shows the vector without and width.

Is there a workaround for this?

[febryardiansyah]

any update for this issue?