width and height properties not working as %

[grfxjedi]

I'm using svgs generated by MathJax (http://docs.mathjax.org/en/latest/index.html). These files have a very large viewBox and height and width represented in % to scale down. The files render fine in browser. I'm loading the files with SvgPicture.network. In the console I get this output: flutter: Warning: Flutter SVG only supports the following formats for widthandheight on the SVG root: width="100%" width="100px" width="100" (where the number will be treated as pixels). The supplied value (22.407%) will be discarded and treated as if it had not been specified. `

flutter: Warning: Flutter SVG only supports the following formats for width and height on the SVG root: width="100%" width="100px" width="100" (where the number will be treated as pixels). The supplied value (5.009%) will be discarded and treated as if it had not been specified.`

It looks to me like the % values are being ignored and treated as pixels. This is throwing the size of the images way off. They are huge and I have to scale them down. The problem with this is that I'm displaying several images at once that are not the same size, so they scale differently to fill the boxes, making some of them zoomed in more than others.

Please let me know if this is a bug in the plugin or if I should be doing something differently.

This is my dart code: child: SvgPicture.network( '$svgUrl$equation', // dynamically generated url height: 50, color: Colors.indigo, alignment: Alignment.topLeft, fit: BoxFit.contain, ),

This is a sample svg file: <svg xmlns:xlink="http://www.w3.org/1999/xlink" width="22.407%" height="5.009%" style="vertical-align:-1.705%" viewBox="0 -1422.8 9647.3 2156.8" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg"> <g stroke="black" fill="black" stroke-width="0" transform="matrix(1 0 0 -1 0 0)"> <path stroke-width="1" d="M462 0Q444 3 333 3Q217 3 199 0H190V46H221Q241 46 248 46T265 48T279 53T286 61Q287 63 287 115V165H28V211L179 442Q332 674 334 675Q336 677 355 677H373L379 671V211H471V165H379V114Q379 73 379 66T385 54Q393 47 442 46H471V0H462ZM293 211V545L74 212L183 211H293Z"></path> <path stroke-width="1" d="M78 60Q78 84 95 102T138 120Q162 120 180 104T199 61Q199 36 182 18T139 0T96 17T78 60Z" transform="translate(500,0)"></path> <path stroke-width="1" d="M352 287Q304 211 232 211Q154 211 104 270T44 396Q42 412 42 436V444Q42 537 111 606Q171 666 243 666Q245 666 249 666T257 665H261Q273 665 286 663T323 651T370 619T413 560Q456 472 456 334Q456 194 396 97Q361 41 312 10T208 -22Q147 -22 108 7T68 93T121 149Q143 149 158 135T173 96Q173 78 164 65T148 49T135 44L131 43Q131 41 138 37T164 27T206 22H212Q272 22 313 86Q352 142 352 280V287ZM244 248Q292 248 321 297T351 430Q351 508 343 542Q341 552 337 562T323 588T293 615T246 625Q208 625 181 598Q160 576 154 546T147 441Q147 358 152 329T172 282Q197 248 244 248Z" transform="translate(779,0)"></path> <g transform="translate(1501,0)"> <path stroke-width="1" d="M84 237T84 250T98 270H679Q694 262 694 250T679 230H98Q84 237 84 250Z"></path> </g> <g transform="translate(2280,0)"> <g transform="translate(342,0)"> <rect stroke="none" width="1900" height="60" x="0" y="220"></rect> <g transform="translate(60,676)"> <path stroke-width="1" d="M164 157Q164 133 148 117T109 101H102Q148 22 224 22Q294 22 326 82Q345 115 345 210Q345 313 318 349Q292 382 260 382H254Q176 382 136 314Q132 307 129 306T114 304Q97 304 95 310Q93 314 93 485V614Q93 664 98 664Q100 666 102 666Q103 666 123 658T178 642T253 634Q324 634 389 662Q397 666 402 666Q410 666 410 648V635Q328 538 205 538Q174 538 149 544L139 546V374Q158 388 169 396T205 412T256 420Q337 420 393 355T449 201Q449 109 385 44T229 -22Q148 -22 99 32T50 154Q50 178 61 192T84 210T107 214Q132 214 148 197T164 157Z"></path> <path stroke-width="1" d="M78 60Q78 84 95 102T138 120Q162 120 180 104T199 61Q199 36 182 18T139 0T96 17T78 60Z" transform="translate(500,0)"></path> <path stroke-width="1" d="M96 585Q152 666 249 666Q297 666 345 640T423 548Q460 465 460 320Q460 165 417 83Q397 41 362 16T301 -15T250 -22Q224 -22 198 -16T137 16T82 83Q39 165 39 320Q39 494 96 585ZM321 597Q291 629 250 629Q208 629 178 597Q153 571 145 525T137 333Q137 175 145 125T181 46Q209 16 250 16Q290 16 318 46Q347 76 354 130T362 333Q362 478 354 524T321 597Z" transform="translate(779,0)"></path> <path stroke-width="1" d="M462 0Q444 3 333 3Q217 3 199 0H190V46H221Q241 46 248 46T265 48T279 53T286 61Q287 63 287 115V165H28V211L179 442Q332 674 334 675Q336 677 355 677H373L379 671V211H471V165H379V114Q379 73 379 66T385 54Q393 47 442 46H471V0H462ZM293 211V545L74 212L183 211H293Z" transform="translate(1279,0)"></path> </g> <g transform="translate(310,-686)"> <path stroke-width="1" d="M109 429Q82 429 66 447T50 491Q50 562 103 614T235 666Q326 666 387 610T449 465Q449 422 429 383T381 315T301 241Q265 210 201 149L142 93L218 92Q375 92 385 97Q392 99 409 186V189H449V186Q448 183 436 95T421 3V0H50V19V31Q50 38 56 46T86 81Q115 113 136 137Q145 147 170 174T204 211T233 244T261 278T284 308T305 340T320 369T333 401T340 431T343 464Q343 527 309 573T212 619Q179 619 154 602T119 569T109 550Q109 549 114 549Q132 549 151 535T170 489Q170 464 154 447T109 429Z"></path> <path stroke-width="1" d="M78 60Q78 84 95 102T138 120Q162 120 180 104T199 61Q199 36 182 18T139 0T96 17T78 60Z" transform="translate(500,0)"></path> <path stroke-width="1" d="M462 0Q444 3 333 3Q217 3 199 0H190V46H221Q241 46 248 46T265 48T279 53T286 61Q287 63 287 115V165H28V211L179 442Q332 674 334 675Q336 677 355 677H373L379 671V211H471V165H379V114Q379 73 379 66T385 54Q393 47 442 46H471V0H462ZM293 211V545L74 212L183 211H293Z" transform="translate(779,0)"></path> </g> </g> </g> <g transform="translate(4864,0)"> <path stroke-width="1" d="M56 237T56 250T70 270H369V420L370 570Q380 583 389 583Q402 583 409 568V270H707Q722 262 722 250T707 230H409V-68Q401 -82 391 -82H389H387Q375 -82 369 -68V230H70Q56 237 56 250Z"></path> </g> <g transform="translate(5865,0)"> <path stroke-width="1" d="M462 0Q444 3 333 3Q217 3 199 0H190V46H221Q241 46 248 46T265 48T279 53T286 61Q287 63 287 115V165H28V211L179 442Q332 674 334 675Q336 677 355 677H373L379 671V211H471V165H379V114Q379 73 379 66T385 54Q393 47 442 46H471V0H462ZM293 211V545L74 212L183 211H293Z"></path> <path stroke-width="1" d="M78 60Q78 84 95 102T138 120Q162 120 180 104T199 61Q199 36 182 18T139 0T96 17T78 60Z" transform="translate(500,0)"></path> <path stroke-width="1" d="M164 157Q164 133 148 117T109 101H102Q148 22 224 22Q294 22 326 82Q345 115 345 210Q345 313 318 349Q292 382 260 382H254Q176 382 136 314Q132 307 129 306T114 304Q97 304 95 310Q93 314 93 485V614Q93 664 98 664Q100 666 102 666Q103 666 123 658T178 642T253 634Q324 634 389 662Q397 666 402 666Q410 666 410 648V635Q328 538 205 538Q174 538 149 544L139 546V374Q158 388 169 396T205 412T256 420Q337 420 393 355T449 201Q449 109 385 44T229 -22Q148 -22 99 32T50 154Q50 178 61 192T84 210T107 214Q132 214 148 197T164 157Z" transform="translate(779,0)"></path> </g> <g transform="translate(7367,0)"> <path stroke-width="1" d="M56 237T56 250T70 270H369V420L370 570Q380 583 389 583Q402 583 409 568V270H707Q722 262 722 250T707 230H409V-68Q401 -82 391 -82H389H387Q375 -82 369 -68V230H70Q56 237 56 250Z"></path> </g> <g transform="translate(8367,0)"> <path stroke-width="1" d="M462 0Q444 3 333 3Q217 3 199 0H190V46H221Q241 46 248 46T265 48T279 53T286 61Q287 63 287 115V165H28V211L179 442Q332 674 334 675Q336 677 355 677H373L379 671V211H471V165H379V114Q379 73 379 66T385 54Q393 47 442 46H471V0H462ZM293 211V545L74 212L183 211H293Z"></path> <path stroke-width="1" d="M78 60Q78 84 95 102T138 120Q162 120 180 104T199 61Q199 36 182 18T139 0T96 17T78 60Z" transform="translate(500,0)"></path> <path stroke-width="1" d="M42 313Q42 476 123 571T303 666Q372 666 402 630T432 550Q432 525 418 510T379 495Q356 495 341 509T326 548Q326 592 373 601Q351 623 311 626Q240 626 194 566Q147 500 147 364L148 360Q153 366 156 373Q197 433 263 433H267Q313 433 348 414Q372 400 396 374T435 317Q456 268 456 210V192Q456 169 451 149Q440 90 387 34T253 -22Q225 -22 199 -14T143 16T92 75T56 172T42 313ZM257 397Q227 397 205 380T171 335T154 278T148 216Q148 133 160 97T198 39Q222 21 251 21Q302 21 329 59Q342 77 347 104T352 209Q352 289 347 316T329 361Q302 397 257 397Z" transform="translate(779,0)"></path> </g> </g> </svg>

[dnfield]

This is a bug, but I'm not entirely sure about the best way to fix it.

The error text is misleading. Percentages are not supported in a bunch of places - the support is inconsistent. I could try to make it more consistent, but on the root object itself I'm not sure how to make sense of that. Do you expect your drawing to be a percentage of the available screen? The SvgPicture widget? somethign else?

[grfxjedi]

I would expect the percentages to be relative to the available space. Like in a web browser, if you just open an svg file with %, it will be based on the browser window. If you have the image constrained inside a div, the percentage is based on the size of that div. So an example in flutter, say you have a container widget is 200px wide and the svgs width is set to 50%, I would expect the svg to render at a width of 100px. Or if you had two columns with flex widths 1 and 2, then you put that same svg (width 100%) in each, that the svgs would scale similarly filling half the space of each column.

[tkez]

Hi Dan, svg with defined width and height, but having rect with width and height in percentage would throw exception.

Any suggestion to get the parentNode attribute so that it can calculate the percentage based on that?

sample: <svg xmlns="http://www.w3.org/2000/svg" width="150" height="50"><rect width="100%" height="100%" fill="#f5f7fa"/><path fill="#e584b5" d="M27.38 12.75L26.93 13.45L25.60 13.49L25.49 13.38Q25.10 13.66 24.69 13.49L24.56 13.36L19.47 13.94L18.95 14.78L18.87 14.70Q19.37 17.42 26.25 17.31L26.20 17.27L26.27 17.33Q24.41 20.13 22.19 21.21L22.14 21.16L22.11 23.63L23.40 24.45L23.55 24.59Q26.42 23.09 29.37 23.37L29.48 23.49L29.48 24.38L29.46 24.36Q30.68 25.03 29.43 27.98L29.48 28.03L28.22 28.14L28.21 28.13Q25.99 31.71 22.07 31.99L22.17 32.10L22.19 32.11Q20.85 33.04 19.19 32.97L19.10 32.88L19.22 33.01Q18.37 33.91 18.44 35.16L18.57 35.29L19.62 36.36L19.66 36.40Q20.78 36.14 21.62 35.62L21.71 35.71L24.02 35.74L24.32 34.68L24.49 34.85Q28.44 33.65 30.14 30.52L30.06 30.44L30.14 30.52Q34.29 27.17 30.82 21.20L30.66 21.04L30.81 21.19Q29.12 21.03 28.09 20.29L28.11 20.31L27.94 20.14Q34.52 14.01 28.44 13.60L28.48 13.64L27.40 12.77Z"/><path fill="#dd54dd" d="M116.07 12.76L115.94 12.63Q114.02 13.39 112.47 13.37L112.43 13.33L112.33 13.23Q105.57 20.67 107.91 29.56L107.93 29.59L109.25 29.78L109.33 29.86Q109.65 30.93 108.54 30.75L108.47 30.68L108.49 31.83L110.44 32.39L110.37 32.32Q109.52 33.68 113.16 36.22L113.19 36.25L115.47 36.29L117.41 36.27L118.28 36.29L118.32 36.33Q118.76 33.60 121.55 33.94L121.68 34.07L121.84 32.55L122.28 32.45L123.00 31.77L122.82 30.17L122.81 30.17Q124.54 27.35 124.16 24.51L124.19 24.53L125.09 24.31L125.00 23.37L124.94 23.31Q124.74 23.00 124.77 22.58L124.62 22.44L124.81 21.78L124.75 21.71Q123.76 19.93 123.78 18.51L123.92 18.66L123.94 18.67Q122.18 16.36 121.93 14.41L121.88 14.36L121.87 14.36Q119.99 14.24 118.93 13.10L118.78 12.95L118.87 13.04Q117.32 13.08 116.02 12.71L116.12 12.80ZM113.60 17.30L113.58 17.28Q119.38 16.70 120.42 21.87L120.47 21.92L120.45 21.90Q121.03 22.32 121.45 22.06L121.36 21.97L121.26 21.87Q122.30 27.56 119.34 31.75L119.35 31.76L119.37 31.77Q117.16 33.73 114.87 32.32L115.00 32.45L114.95 32.40Q114.16 33.52 113.49 32.34L113.43 32.29L113.49 32.35Q111.30 32.30 111.19 30.05L111.17 30.03L111.26 30.12Q109.95 29.96 109.07 29.32L109.10 29.34L109.65 28.49L109.52 28.36Q108.44 24.20 110.38 21.94L110.40 21.97L110.51 22.07Q110.39 18.34 113.41 17.11L113.50 17.20Z"/><path fill="#eb734b" d="M54.31 12.63L54.33 12.65Q47.09 15.30 48.04 22.60L47.97 22.53L48.06 22.61Q49.61 23.93 50.14 25.64L50.17 25.66L50.09 25.58Q55.09 26.78 58.80 24.89L58.80 24.89L59.67 26.21L59.49 26.04Q57.04 32.47 51.15 33.47L51.19 33.52L51.00 33.32Q50.00 34.79 50.23 36.32L50.14 36.23L50.22 36.31Q56.77 35.39 58.77 29.56L58.94 29.73L58.90 29.69Q61.41 27.80 60.77 24.97L60.73 24.92L61.17 25.14L61.29 25.25Q62.53 21.37 60.77 18.61L60.75 18.58L60.80 18.64Q60.54 13.04 54.31 12.63L54.47 12.79ZM53.04 16.31L53.01 16.27Q54.41 16.37 55.59 16.26L55.67 16.33L55.63 16.30Q56.39 17.48 57.92 17.41L57.86 17.35L57.89 17.39Q61.56 25.52 52.26 23.76L52.31 23.80L52.20 23.69Q51.31 22.04 50.31 21.10L50.44 21.23L50.32 21.11Q50.08 17.34 52.97 16.23L52.94 16.20Z"/><path d="M3 28 C70 15,72 7,142 34" stroke="#6d89dd" fill="none"/><path fill="#a570db" d="M86.46 12.64L86.00 13.31L84.78 13.47L84.69 13.38Q84.19 13.55 83.78 13.38L83.76 13.36L78.50 13.77L78.18 14.81L78.14 14.77Q78.49 17.34 85.36 17.23L85.39 17.26L85.34 17.21Q83.61 20.13 81.39 21.21L81.34 21.16L81.24 23.56L82.66 24.51L82.65 24.50Q85.72 23.19 88.67 23.48L88.57 23.37L88.69 24.39L88.68 24.39Q89.92 25.07 88.67 28.02L88.65 28.00L87.35 28.08L87.47 28.20Q85.31 31.83 81.39 32.11L81.36 32.08L81.38 32.11Q79.97 32.96 78.31 32.89L78.42 33.00L78.36 32.94Q77.72 34.05 77.78 35.30L77.75 35.27L78.73 36.26L78.88 36.42Q79.93 36.09 80.77 35.57L80.82 35.62L83.19 35.71L83.66 34.82L83.53 34.69Q87.51 33.52 89.22 30.39L89.28 30.46L89.35 30.53Q93.49 27.16 90.02 21.20L89.94 21.11L90.04 21.22Q88.24 20.95 87.21 20.21L87.12 20.13L87.25 20.26Q93.72 14.01 87.65 13.60L87.67 13.63L86.63 12.81Z"/>

[tkez]

Had a fix on my case (that rect with % width height) by editing some code in parser_state.dart, bool addShape(XmlStartElementEvent event){...}

[Juthisarker]

Any fixing solution on this issue?

[p30arena]

flutter_svg: ^0.13.1

Warning: Flutter SVG only supports the following formats for `width` and `height` on the SVG root:
                                                                     width="100%"
                                                                     width="100px"
                                                                     width="100" (where the number will be treated as pixels).
                                                                   The supplied value (394pt) will be discarded and treated as if it had not been specified.

[lavahasif]

Not a solution. In my case my Genuine path is :assets/image/target.svg.i did write like this assets/target.svg. That time i got this like message.I feel someone help this .

[georgikoemdzhiev]

flutter_svg: ^0.13.1

Warning: Flutter SVG only supports the following formats for `width` and `height` on the SVG root:
                                                                     width="100%"
                                                                     width="100px"
                                                                     width="100" (where the number will be treated as pixels).
                                                                   The supplied value (394pt) will be discarded and treated as if it had not been specified.

I am seeing exactly the same warning in ^0.14.4 as well

[4handheld]

Seems like the width and height attributes in the SVG file are responsible. Setting the values from 512 to 100 resolved the issue in my app. ie, from <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"> to <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">

[4handheld]

Seems like the width and height attributes in the SVG file are responsible. Setting the values from 512 to 100 resolved the issue in my app. ie, from <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"> to <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">

[ZeeshanFareed123]

Fixed this warning by the following steps:

1. Open SVG image in android studio.
2. Change the width and height from "512px" to "256px"

[alvindrakes]

@ZeeshanFareed123 Yeap, I tried this solution and it works. But will the SVG look pixelated on a bigger screen? Since we specify it to 256px.

[shafi49]

@ZeeshanFareed123 you are right. This error comes if it finds any values set as points instead of pixel or percentage. Please convert your points unit (pt) to pixels or percentage. I recommend using pixels. 1 pt = 1.333px. There are many handy converters out there too. Here is one

For example I changed this code

<svg height="384pt" viewBox="0 0 384.024 384" width="384pt" xmlns="http://www.w3.org/2000/svg">

to this

<svg height="512px" viewBox="0 0 384.024 384" width="512px" xmlns="http://www.w3.org/2000/svg">

Hope it helps.

[Dlouki]

this is code is work just change height="512pt" to height="512px" and width="384pt" to width="384px"

[marcellocamara]

I solved all this warnings removing the unity from height and width.

Example:

height="512pt" => height="512"
or
height="512px" => height="512"

[alhamri]

@ZeeshanFareed123 you are right. This error comes if it finds any values set as points instead of pixel or percentage. Please convert your points unit (pt) to pixels or percentage. I recommend using pixels. 1 pt = 1.333px. There are many handy converters out there too. Here is one

For example I changed this code

<svg height="384pt" viewBox="0 0 384.024 384" width="384pt" xmlns="http://www.w3.org/2000/svg">

to this

<svg height="512px" viewBox="0 0 384.024 384" width="512px" xmlns="http://www.w3.org/2000/svg">

Hope it helps.

worked for me. I didn't change the numbers(values), just change (pt) to (px).

[amkuchta]

Converting pt to px or removing the "type" of measurement altogether isn't always an option. For example, using FractionallySizeBox as follows

FractionallySizedBox(
  heightFactor: 0.75,
  child: SvgPicture.asset(
    'assets/images/mendala.svg',
    color: Colors.white,
    semanticsLabel: 'A white mendala',
  ),
)

results in the following output:

I/flutter ( 5455): Warning: Flutter SVG only supports the following formats for `width` and `height` on the SVG root:
I/flutter ( 5455):   width="100%"
I/flutter ( 5455):   width="100px"
I/flutter ( 5455):   width="100" (where the number will be treated as pixels).
I/flutter ( 5455): The supplied value (1280.000000pt) will be discarded and treated as if it had not been specified.
I/flutter ( 5455): Warning: Flutter SVG only supports the following formats for `width` and `height` on the SVG root:
I/flutter ( 5455):   width="100%"
I/flutter ( 5455):   width="100px"
I/flutter ( 5455):   width="100" (where the number will be treated as pixels).
I/flutter ( 5455): The supplied value (710.000000pt) will be discarded and treated as if it had not been specified.
I/flutter ( 5455): unhandled element metadata; Picture key: AssetBundlePictureKey(bundle: PlatformAssetBundle#c3801(), name: "assets/images/mendala.svg", colorFilter: null)

[lojithv]

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.)

Example

[JefersonSSouza]

in my case I changed on svg file properties height and width, from mm to px, worked for me!!

[followthemoney1]

only this was help for web when I was trying to set height or width:

FractionallySizedBox(
                    heightFactor: procentIconSize,
                    child: SvgPicture.asset(
                      assetName,
                      semanticsLabel: sectionName,
                      color: Colors.white,
                      
                    ),

and no matter what icons size was:

<svg width="1477px" height="1884px" viewBox="0 0 1477 1884" 

or

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">

or

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M11

[JeanRoldanDev]

Remove height="422pt" and width="422pt"

[brunoalfred]

I face the same challenge but here is a simple workaround over the issue:

Steps: 🔥☄️

1. Go to your svg file and check the units used to specify height and width of your svg asset.
2. Make sure the units are either of these options; %, px
   ie change from width="100pt" to (width="100px" or width="100%" or width="100")
3. Rebuild your application and the error must have gone away.
4. Enjoy 🏃🏽‍♂️ flutter_svg