Repository: flutter
Issue: [flutter_svg] Error to open svg: Invalid double 100%
Labels: package,p: flutter_svg

_Imported from https://github.com/dnfield/flutter_svg/issues/559_

Original report by @Ron-Junior on May 25, 2021

So when opening this link [https://s3.glbimg.com/v1/AUTH_58d78b787ec34892b5aaa0c7a146155f/cartola_svg_185/escudo/01/33/58/0085562bf0-96a3-4227-9d76-8c46fd9ccc0120210502223358](url)

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

---
Comment by @smallbad on Jun 8, 2021
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

---
Comment by @kimmanwky on Aug 5, 2021
anyone fixed this issue? i have the same problem. It is still not working on v0.22.0.

---
Comment by @ZaifSenpai on Jan 7, 2022
Same issue occurred while trying to show [this SVG](https://api.dicebear.com/5.x/initials/svg?seed=nfc921FkibWpTQtVCMcMfTwwNL2fx74IU3oyQCnpErVR77sFgeU0Wl9a422CwCJmwhD7ZJSvr7ETVl9NZC0JIWPrVqE2Fos15Uscl3AmDX60y2bIB6Og2zCrH302ND&radius=0&scale=100&flip=false&rotate=0&translateX=0&translateY=0)

---
Comment by @pansitwattana on Feb 7, 2022
Hello, I also got this error. How to fix this bugs? 
P.S. I can't modify image I download from network.

---
Comment by @pansitwattana on Feb 8, 2022
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'),
    ),
  ),
),
```

---
Comment by @gerken-tss on Oct 7, 2022
@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.

---
Comment by @ynsmrkrds on Aug 10, 2023
Hello. Is there a new solution?

---
Comment by @YashIngole on Oct 9, 2023
any solution yet?


---
Comment by @angelru on Oct 17, 2023
any solution?? Invalid double

---
Comment by @JuKu on Jan 6, 2024
Same problem here.
Maybe flutter_svg is incompatible with any SVGs which use the "fill" command?

---
Comment by @gentunian on Feb 27, 2024
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_<…>
```

---
Comment by @Judimax on Mar 17, 2024
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?

---
Comment by @Jyoshnarani on Jun 5, 2024
[2.0.10](https://pub.dev/packages/flutter_svg/versions/2.0.10)

latest version has same error 

 Unhandled Exception: FormatException: Invalid double
 100% 

---
Comment by @deminearchiver on Jun 25, 2024
I really want this fixed too!

---
Comment by @WingCH on Aug 21, 2024
same issue

---
Comment by @JuKu on Sep 5, 2024
@dnfield Can you provide a solution for this problem, please?