Error to open svg: Invalid double 100%

[Ron-Junior]

So when opening this link https://s3.glbimg.com/v1/AUTH_58d78b787ec34892b5aaa0c7a146155f/cartola_svg_185/escudo/01/33/58/0085562bf0-96a3-4227-9d76-8c46fd9ccc0120210502223358

We have this error: Invalid double 100%

So the problem here is that the function parseDouble on "svg/parser_state.dart" only removes the px string to the "maybeDouble" variable. So.. in my humble opinion the solutions is maybeDouble = maybeDouble.trim().replaceFirst(RegExp(r'(px|%)'), '');

The stack trace below: When the exception was thrown, this was the stack #0 double.parse (dart:core-patch/double_patch.dart:111:28) #1 parseDouble package:flutter_svg/…/utilities/numbers.dart:15 #2 _Paths.rect package:flutter_svg/…/svg/parser_state.dart:655 #3 SvgParserState.addShape package:flutter_svg/…/svg/parser_state.dart:874 #4 SvgParserState.startElement package:flutter_svg/…/svg/parser_state.dart:902

[smallbad]

I also met this problem, but it's wrong to just remove the percentage sign. The percentage appears in the inner label of SVG, hoping that it will fill the whole SVG space. Simply removing the percentage sign will cause the problem of abnormal width and height. He should find the height and width of his parent element

[kimmanwky]

anyone fixed this issue? i have the same problem. It is still not working on v0.22.0.

[ZaifSenpai]

Same issue occurred while trying to show this SVG

[pansitwattana]

Hello, I also got this error. How to fix this bugs? P.S. I can't modify image I download from network.

[pansitwattana]

I got solution here. I don't know if this is the best solution.

using this library: https://pub.dev/packages/flutter_inappwebview

InAppWebView(
  initialUrlRequest: URLRequest(
    url: Uri.dataFromString(
      '''<svg width="100%" height="100%">       
            <image xlink:href="$qrCodeSvgUrl" width="100%" height="100%"/>    
        </svg>''',
      mimeType: 'text/html',
      encoding: Encoding.getByName('utf-8'),
    ),
  ),
),

[gerken-tss]

@pansitwattana Your solution works, not bad! The only drawback is that all the caching capabilities and other things like placeholder widgets that are part of the flutter_svg package are not directly available like this. As a temporary workaround, it's fine though, I guess.

[ynsmrkrds]

Hello. Is there a new solution?

[YashIngole]

any solution yet?

[angelru]

any solution?? Invalid double

[JuKu]

Same problem here. Maybe flutter_svg is incompatible with any SVGs which use the "fill" command?

[gentunian]

same here for a flag svg I need to render:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-2100 -1470 4200 2940">
<defs>
<path id="D" fill-rule="evenodd" d="m-31.5 0h33a30 30 0 0 0 30 -30v-10a30 30 0 0 0 -30 -30h-33zm13-13h19a19 19 0 0 0 19 -19v-6a19 19 0 0 0 -19 -19h-19z"/>
<path id="E" transform="translate(-31.5)" d="m0 0h63v-13h-51v-18h40v-12h-40v-14h48v-13h-60z"/>
<path id="e" d="m-26.25 0h52.5v-12h-40.5v-16h33v-12h-33v-11h39.25v-12h-51.25z"/>
<g id="G">
<clipPath id="gcut">
<path d="m-31.5 0v-70h63v70zm31.5-47v12h31.5v-12z"/>
</clipPath>
<use xlink:href="#O" clip-path="url(#gcut)"/>
<rect y="-35" x="5" height="10" width="26.5"/>
<rect y="-35" x="21.5" height="35" width="10"/>
</g>
<path id="M" d="m-31.5 0h12v-48l14 48h11l14-48v48h12v-70h-17.5l-14 48-14-48h-17.5z"/>
<path id="O" fill-rule="evenodd" d="m0 0a31.5 35 0 0 0 0 -70 31.5 35 0 0 0 0 70m0-13a18.5 22 0 0 0 0 -44 18.5 22 0 0 0 0 44"/>
<path id="P" fill-rule="evenodd" d="m-31.5 0h13v-26h28a22 22 0 0 0 0 -44h-40zm13-39h27a9 9 0 0 0 0 -18h-27z"/>
<g id="R">
<use xlink:href="#P"/>
<path d="m28 0c0-10 0-32-15-32h-19c22 0 22 22 22 32"/>
</g>
<path id="S" d="m-15.75-22c0 7 6.75 10.5 16.75 10.5s14.74-3.25 14.75-7.75c0-14.25-46.75-5.25-46.5-30.25 0.25-21.5 24.75-20.5 33.75-20.5s26 4 25.75 21.25h-15.25c0-7.5-7-10.25-15-10.25-7.75 0-13.25 1.25-13.25 8.5-0.25 11.75 46.25 4 46.25 28.75 0 18.25-18 21.75-31.5 21.75-11.5 0-31.55-4.5-31.5-22z"/>
<g id="star" fill="#fff">
<g id="c">
<path id="t" transform="rotate(18 0,-1)" d="m0-1v1h0.5"/>
<use xlink:href="#t" transform="scale(-1,1)"/>
</g>
<use xlink:href="#c" transform="rotate(72)"/>
<use xlink:href="#c" transform="rotate(-72)"/>
<use xlink:href="#c" transform="rotate(144)"/>
<use xlink:href="#c" transform="rotate(216)"/>
</g>
<use id="star1" xlink:href="#star" transform="scale(31.5)"/>
<use id="star2" xlink:href="#star" transform="scale(26.25)"/>
<use id="star3" xlink:href="#star" transform="scale(21)"/>
<use id="star4" xlink:href="#star" transform="scale(15)"/>
<use id="star5" xlink:href="#star" transform="scale(10.5)"/>
</defs>
<rect y="-50%" x="-50%" height="100%" fill="#009b3a" width="100%"/>
<path d="m-1743 0 1743 1113 1743-1113-1743-1113z" fill="#fedf00"/>
<circle r="735" fill="#002776"/>
<clipPath id="band">
<circle r="735"/>
</clipPath>
<path fill="#fff" d="m-2205 1470a1785 1785 0 0 1 3570 0h-105a1680 1680 0 1 0 -3360 0z" clip-path="url(#band)"/>
<g transform="translate(-420,1470)" fill="#009b3a">
<use y="-1697.5" xlink:href="#O" transform="rotate(-7)"/>
<use y="-1697.5" xlink:href="#R" transform="rotate(-4)"/>
<use y="-1697.5" xlink:href="#D" transform="rotate(-1)"/>
<use y="-1697.5" xlink:href="#E" transform="rotate(2)"/>
<use y="-1697.5" xlink:href="#M" transform="rotate(5)"/>
<use y="-1697.5" xlink:href="#e" transform="rotate(9.75)"/>
<use y="-1697.5" xlink:href="#P" transform="rotate(14.5)"/>
<use y="-1697.5" xlink:href="#R" transform="rotate(17.5)"/>
<use y="-1697.5" xlink:href="#O" transform="rotate(20.5)"/>
<use y="-1697.5" xlink:href="#G" transform="rotate(23.5)"/>
<use y="-1697.5" xlink:href="#R" transform="rotate(26.5)"/>
<use y="-1697.5" xlink:href="#E" transform="rotate(29.5)"/>
<use y="-1697.5" xlink:href="#S" transform="rotate(32.5)"/>
<use y="-1697.5" xlink:href="#S" transform="rotate(35.5)"/>
<use y="-1697.5" xlink:href="#O" transform="rotate(38.5)"/>
</g>
<use id="&#x3B1;CMi" y="-132" x="-600" xlink:href="#star1"/>
<use id="&#x3B1;CMa" y="177" x="-535" xlink:href="#star1"/>
<use id="&#x3B2;CMa" y="243" x="-625" xlink:href="#star2"/>
<use id="&#x3B3;CMa" y="132" x="-463" xlink:href="#star4"/>
<use id="&#x3B4;CMa" y="250" x="-382" xlink:href="#star2"/>
<use id="&#x3B5;CMa" y="323" x="-404" xlink:href="#star3"/>
<use id="&#x3B1;Vir" y="-228" x="228" xlink:href="#star1"/>
<use id="&#x3B1;Sco" y="258" x="515" xlink:href="#star1"/>
<use id="&#x3B2;Sco" y="265" x="617" xlink:href="#star3"/>
<use id="&#x3B5;Sco" y="323" x="545" xlink:href="#star2"/>
<use id="&#x3B8;Sco" y="477" x="368" xlink:href="#star2"/>
<use id="&#x3B9;Sco" y="551" x="367" xlink:href="#star3"/>
<use id="&#x3BA;Sco" y="419" x="441" xlink:href="#star3"/>
<use id="&#x3BB;Sco" y="382" x="500" xlink:href="#star2"/>
<use id="&#x3BC;Sco" y="405" x="365" xlink:href="#star3"/>
<use id="&#x3B1;Hya" y="30" x="-280" xlink:href="#star2"/>
<use id="&#x3B3;Hya" y="-37" x="200" xlink:href="#star3"/>
<use id="&#x3B1;Cru" y="330" xlink:href="#star1"/>
<use id="&#x3B2;Cru" y="184" x="85" xlink:href="#star2"/>
<use id="&#x3B3;Cru" y="118" xlink:href="#star2"/>
<use id="&#x3B4;Cru" y="184" x="-74" xlink:href="#star3"/>
<use id="&#x3B5;Cru" y="235" x="-37" xlink:href="#star4"/>
<use id="&#x3B1;TrA" y="495" x="220" xlink:href="#star2"/>
<use id="&#x3B2;TrA" y="430" x="283" xlink:href="#star3"/>
<use id="&#x3B3;TrA" y="412" x="162" xlink:href="#star3"/>
<use id="&#x3B1;Car" y="390" x="-295" xlink:href="#star1"/>
<use id="&#x3C3;Oct" y="575" xlink:href="#star5"/>
</svg>

Stack trace:

[ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: FormatException: Invalid double
-50%
#0      double.parse (dart:core-patch/double_patch.dart:112:28)
#1      parseDouble (package:vector_graphics_compiler/src/svg/numbers.dart:32:17)
#2      parseDoubleWithUnits (package:vector_graphics_compiler/src/svg/numbers.dart:82:25)
#3      SvgParser.parseDoubleWithUnits (package:vector_graphics_compiler/src/svg/parser.dart:975:20)
#4      _Paths.rect (package:vector_graphics_compiler/src/svg/parser.dart:506:34)
#5      SvgParser.addShape (package:vector_graphics_compiler/src/svg/parser.dart:892:31)
#6      SvgParser.startElement (package:vector_graphics_compiler/src/svg/parser.dart:920:12)
#7      SvgParser._parseTree (package:vector_graphics_compiler/src/svg/parser.dart:766:13)
#8      SvgParser.parse (package:vector_graphics_compiler/src/svg/parser.dart:799:5)
#9      parse (package:vector_graphics_compiler/vector_graphics_compiler.dart:76:17)
#10     encodeSvg (package:vector_graphics_<…>

[Judimax]

I think the fix is simple grab the width and the height of the svg grab the percentage value and work with it that way?