Flutter_svg: Some SVGs look very small whatever how the width and height SvgPicture are

[WosLovesLife]

flutter env:

Flutter 0.11.7-pre.34 • channel master • https://github.com/flutter/flutter.git
Framework • revision 988bfc166d (3 weeks ago) • 2018-11-15 18:07:17 -0800
Engine • revision 699f328df5
Tools • Dart 2.1.0 (build 2.1.0-dev.9.4 f9ebf21297)

plugin env:

flutter_svg: ^0.7.0+1

code:

Container(
  color: Colors.amber,
  child: SvgPicture.asset(
    'svgs/ic_bike.svg',
    width: 30,
    height: 30,
    fit: BoxFit.fitWidth,
    allowDrawingOutsideViewBox: true,
    matchTextDirection: true,
  ),
);

svg:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" height="21px" version="1.1" viewBox="0 0 22 21" width="22px"
     xmlns="http://www.w3.org/2000/svg">
    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
    <title>ic_bike</title>
    <desc>Created with Sketch.</desc>
    <defs/>
    <g fill="none" fill-rule="evenodd" id="Assets" stroke="none" stroke-width="1">
        <g fill="#003C60" id="Method-Bike" transform="translate(-1.000000, -2.000000)">
            <g id="ic_bike" transform="translate(1.000000, 2.000000)">
                <path
                    d="M11.4448605,2.38443052 C11.4178811,3.30684227 12.1171868,4.04455439 13.0388026,4.06628376 C13.9453099,4.08801313 14.6996535,3.39050035 14.7287913,2.50176911 C14.7600873,1.55762799 14.0737318,0.810137657 13.1477993,0.781889476 C12.2153917,0.753641295 11.4729191,1.45332701 11.4448605,2.38443052"
                    id="Fill-1"/>
                <path
                    d="M11.1842856,6.7043348 C10.4495615,7.36744848 9.72212388,8.02364271 8.96068252,8.71097445 C9.32986621,8.89895277 10.8406047,9.70045539 11.2887257,9.89304667 C11.815784,10.1179287 12.0064479,10.5503941 12.0161633,11.0197633 C12.0465238,12.6308412 12.0343796,14.2430724 12.0222354,15.8553036 C12.0185921,16.383488 11.7332034,16.7790498 11.1272078,16.8021146 C10.5151402,16.8251794 10.115596,16.4619084 10.0512317,15.938337 C10.0196568,15.6696318 10.1034518,13.217841 10.0706624,12.1730045 C10.0730913,11.9977118 10.0135847,11.9066058 9.85449566,11.8247257 C8.67650823,11.2181208 7.50216407,10.60229 6.32660548,9.98991893 C5.27613216,9.44097612 5.08668263,8.19893537 5.94527759,7.3905133 C7.0309691,6.36758837 8.12759038,5.35388937 9.21813956,4.33673065 C9.31043549,4.2513908 9.40030257,4.16374447 9.48774081,4.0749449 C10.1119527,3.4337428 11.2073596,3.55252664 11.6433364,4.31827879 C12.1181746,5.14976568 12.5869407,5.98355906 13.0411338,6.82427188 C13.1625758,7.05146039 13.2973764,7.15179237 13.5791219,7.14025996 C14.1596147,7.1160419 14.7437507,7.14025996 15.3254579,7.13218727 C16.1415481,7.12642107 16.3565005,7.48507908 16.3565005,7.94522231 C16.3565005,8.35462293 15.9314535,8.59680358 15.6800685,8.61294895 C14.6854585,8.61064247 13.6617024,8.66253833 12.8116084,8.66369157 C12.4290661,8.66599805 12.1606793,8.51492345 11.9882316,8.17817703 C11.7344179,7.68228332 11.4563157,7.19676878 11.1867144,6.70664128 C11.1794279,6.69395562 11.1575683,6.68703618 11.1842856,6.7043348"
                    id="Fill-3"/>
                <path
                    d="M4.75913012,11.833398 C3.71071948,11.833398 2.73181022,12.2363164 2.00145674,12.9681479 C1.27581522,13.6941059 0.878832763,14.6632247 0.883544721,15.6969513 C0.891790648,17.8607291 2.59398545,19.5534565 4.75913012,19.5534565 L4.7614861,19.5534565 C5.80754077,19.5534565 6.78291606,19.1540621 7.50855758,18.4304534 C8.23302111,17.7056701 8.63235955,16.7306779 8.63000357,15.6863791 C8.62529161,13.5625407 6.8901131,11.833398 4.75913012,11.833398 L4.75913012,11.833398 Z M4.75913012,20.4344735 C2.10040786,20.4344735 0.0106545133,18.356448 5.26079615e-05,15.7004754 C-0.00583733946,14.4318108 0.483028297,13.2395011 1.37594433,12.3467372 C2.27357231,11.4469252 3.47512159,10.952381 4.75913012,10.952381 C7.37662276,10.952381 9.50878372,13.0762193 9.51349568,15.6840297 C9.51585166,16.9644411 9.02580804,18.1614496 8.13289201,19.0530388 C7.24115397,19.9434533 6.04431665,20.4344735 4.7614861,20.4344735 L4.75913012,20.4344735 Z"
                    id="Fill-5"/>
                <path
                    d="M17.1895422,11.8332888 C16.152006,11.8332888 15.1840318,12.226761 14.4612936,12.9432328 C13.7291231,13.6679263 13.3270778,14.6427977 13.3258988,15.6904909 C13.3223618,17.850477 15.0201483,19.5476929 17.1919002,19.5535656 L17.2036904,19.5535656 C18.2459427,19.5535656 19.2174539,19.1577443 19.9401922,18.440098 C20.6688255,17.7177536 21.0708708,16.7417076 21.0708708,15.6940145 C21.0708708,13.5751374 19.3377137,11.8438597 17.2072275,11.8332888 L17.1895422,11.8332888 Z M17.2036904,20.4344735 L17.1895422,20.4344735 C14.5226025,20.4262517 12.4380979,18.3426109 12.441635,15.6881418 C12.443993,14.4055399 12.9391808,13.2086797 13.8364138,12.3183755 C14.7265727,11.4374676 15.9173813,10.952381 17.1895422,10.952381 L17.2119435,10.952381 C19.8270064,10.9653009 21.9551346,13.0912253 21.9551346,15.6940145 C21.9539556,16.9777909 21.4611259,18.1734766 20.5638929,19.0637808 C19.673734,19.9482123 18.4817464,20.4344735 17.2036904,20.4344735 L17.2036904,20.4344735 Z"
                    id="Fill-8"/>
            </g>
        </g>
    </g>
</svg>

[WosLovesLife]

I thought this may because of the xmlns. I tested two SVGs who with xmlns="http://www.w3.org/2000/svg" and xmlns:xlink="http://www.w3.org/1999/xlink".

For example, the above SVG file, when I deleted width and height properties from the tag, It works as expected.

I hope this issue is helpful for you and thank you for you offered this great library

[dnfield]

Try removing the width and height attributes from the svg

[WosLovesLife]

Yes, I tried, and it works, but I thought that there probably are many people would meet the same issue, so it is better If you could support this kind of SVG. Thanks again

[dnfield]

I'll be following this closely. I only recently started respecting the width and height values on the svg element - previously it would be ignored if the viewBox was also specified.

However, if enough people are facing this issue, I may make it opt-in.

[WosLovesLife]

Ok, thanks. finally, if you agreed, I want to keep the issue opening to let someone who met the same issue know easily.

[GoldenJoe]

I just ran into this issue myself. The following SVG fails to render correctly, drawing the actual shape (a star) in the center at half of the expected size:

<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
  <polygon fill="#FFF" points="31.132 48 12.323 57.889 15.915 36.944 .699 22.111 21.728 19.056 31.132 0 40.537 19.056 61.566 22.111 46.349 36.944 49.942 57.889"/>
</svg>

Removing dimensions is a bit of a pain, since it can cause issues rendering on some webpages, and you'd have to be careful about reusing them across your app and your website if you have such a project.

Reverting to 0.6.0 allows this type of SVG to work. Just doing a cursory search for places where a scaling issue may be present, I found scaleCanvasToViewBox in _render_picture.dart_.

[dnfield]

I think I'm going to rewrite this to be opt-in. I really was concerned that it would be counter-intuitive, and I suspect it will cause more problems than it solves as is. stay tuned...

[GoldenJoe]

Rather than making it opt-in, I think it should just work - you'll save a lot of time responding to tickets like this. If you want a quick and dirty bandaid, you could just check to see if the viewBox has an origin of (0,0) and that its height and width match the dimensions. That'd let you preserve whatever you're doing in 0.7.0 without breaking on this common SVG format.

FWIW the SVGs in question were generated by Sketch, which is very popular with iOS devs and OSX users.

[dnfield]

Up until v0.7.0, it worked the way you guys want it to. However, I made adjustments to it to try to help resolve #62

For example, if you try v0.6.x I suspect you'll see things working more the way you're expecting.

And FWIW, width and height do something pretty different from the viewbox - if both are specified, they're supposed to apply an additional transform. See the linked issue for more details.

[bagintz]

I agree, I recently upgraded from v0.6.x and I am not sure how to get the svg's to look like they were before. @dnfield what would you suggest? I am going to go back a version for now, but want to stay with the latest.

Thanks!

[dnfield]

If your SVGs are rendering fine with 0.6.x, you're probably best going back to it for now. When I have a moment to make sure things are right, I'll release a new version that corrects this issue and update this thread.

[dnfield]

This should be fixed as of v0.8.1