Repository: flutter
Issue: [flutter_svg] Lags even with precache
Labels: package,p: flutter_svg

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

Original report by @gwennguihal on Nov 2, 2020

Hi,

First thank for this great library, very useful!
But, even if I precache my svgs, I have some lags in the route transition (in release mode on iOS whatever the device used) at the first install. But if I kill the app and reopen it, it's ok, no more lags on screens already visited, like there is 2 caches ?
The weight of the svg is between 38ko and 50ko.

I put a breakpoint in `PictureCache` class in `putIfAbsent` method, svg are well preloaded when I push the secondScreen, I got a result.

My workaround is to use PNG instead ov SVG but it increases the size of the app.


---
Comment by @dnfield on Nov 2, 2020
It would probably help to have a full reproduction. There are some issues on iOS with Flutter at this point related to shader cache warmup, unrelated to SVG, which could be causing this.

---
Comment by @gwennguihal on Nov 2, 2020
I will try to make a sample app to reproduce.

---
Comment by @gwennguihal on Nov 3, 2020

Hi Dan, there is the sample app: https://github.com/gwennguihal/flutter_svg_demo
Thanks.

---
Comment by @chris-rutkowski on Nov 7, 2020
Hey, perhaps I will join this issue, with my app 📲 https://well-spoken.app I experience a similar problem  - very slow loading of the attached SVG.

```
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 503.775 503.775" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g>
<circle xmlns="http://www.w3.org/2000/svg" style="" cx="251.888" cy="251.888" r="251.888" fill="#51489a" data-original="#2d76b2" class=""/>
<circle xmlns="http://www.w3.org/2000/svg" style="" cx="251.888" cy="251.888" r="180.835" fill="#6a61b4" data-original="#4279bd" class=""/>
<path xmlns="http://www.w3.org/2000/svg" id="SVGCleanerId_0" style="" d="M135.745,307.952H39.199c-13.371,0-24.209,10.838-24.209,24.209v5.498  c24.642,68.046,77.76,122.448,144.964,148.807V332.16C159.954,318.79,149.115,307.952,135.745,307.952z" fill="#d9f9fc" data-original="#d9f9fc" class=""/>
<g xmlns="http://www.w3.org/2000/svg">
	<path id="SVGCleanerId_0_1_" style="" d="M135.745,307.952H39.199c-13.371,0-24.209,10.838-24.209,24.209v5.498   c24.642,68.046,77.76,122.448,144.964,148.807V332.16C159.954,318.79,149.115,307.952,135.745,307.952z" fill="#d9f9fc" data-original="#d9f9fc" class=""/>
</g>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M135.745,307.952h-20.562c13.371,0,24.209,10.838,24.209,24.209v145.131  c6.693,3.346,13.545,6.423,20.562,9.174V332.16C159.954,318.79,149.115,307.952,135.745,307.952z" fill="#ace0f3" data-original="#ace0f3" class=""/>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M81.733,307.952h8.524c2.379,0,4.325-1.946,4.325-4.325v-55.748c0-2.379-1.946-4.325-4.325-4.325  h-8.524c-2.379,0-4.325,1.946-4.325,4.325v55.748C77.408,306.005,79.354,307.952,81.733,307.952z" fill="#7a8d9d" data-original="#7a8d9d"/>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M88.949,307.952h2.471c1.682,0,3.059-1.377,3.059-3.059v-58.282c0-1.682-1.377-3.059-3.059-3.059  h-2.471c-1.682,0-3.059,1.377-3.059,3.059v58.282C85.891,306.575,87.266,307.952,88.949,307.952z" fill="#57646e" data-original="#57646e"/>
<polygon xmlns="http://www.w3.org/2000/svg" style="" points="57.696,307.952 113.946,307.952 94.477,299.103 77.303,299.103 " fill="#8a9ca8" data-original="#8a9ca8"/>
<polygon xmlns="http://www.w3.org/2000/svg" style="" points="94.477,299.103 113.946,307.952 105.181,307.952 85.713,299.103 " fill="#6f7e87" data-original="#6f7e87"/>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M85.891,274.668L85.891,274.668c9.311,0,15.973-7.667,16.929-16.929  c0.394-3.818,3.135-15.03,3.135-15.03c0-1.045-0.854-1.899-1.899-1.899H67.726c-1.045,0-1.899,0.854-1.899,1.899  c0,0,2.741,11.212,3.135,15.03C69.917,267.002,76.58,274.668,85.891,274.668z" fill="#f99d28" data-original="#f99d28"/>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M77.462,301.054h17.014c1.754,0,3.189-1.435,3.189-3.189l0,0c0-1.754-1.435-3.189-3.189-3.189H77.462  c-1.754,0-3.189,1.435-3.189,3.189l0,0C74.273,299.62,75.708,301.054,77.462,301.054z" fill="#96a8b2" data-original="#96a8b2"/>
<g xmlns="http://www.w3.org/2000/svg">
	<path style="" d="M93.283,297.866c0-1.754-1.435-3.189-3.189-3.189h4.383c1.754,0,3.189,1.435,3.189,3.189   c0,1.754-1.435,3.189-3.189,3.189h-4.383C91.847,301.054,93.283,299.62,93.283,297.866z" fill="#8a9ca8" data-original="#8a9ca8"/>
	<path style="" d="M86.048,274.668L86.048,274.668c9.311,0,15.973-7.667,16.929-16.929   c0.394-3.818,3.135-15.03,3.135-15.03c0-1.045-0.854-1.899-1.899-1.899H67.883c-1.045,0-1.899,0.854-1.899,1.899   c0,0,2.741,11.212,3.135,15.03C70.074,267.002,76.736,274.668,86.048,274.668z" fill="#8a9ca8" data-original="#8a9ca8"/>
</g>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M94.851,257.741c0.394-3.818,3.135-15.03,3.135-15.03c0-1.045-0.854-1.899-1.899-1.899h7.968  c1.045,0,1.899,0.854,1.899,1.899c0,0-2.741,11.212-3.135,15.03c-0.955,9.261-7.617,16.929-16.929,16.929l0,0  c-1.391,0-2.721-0.175-3.984-0.497C89.095,272.339,94.038,265.618,94.851,257.741z" fill="#707d84" data-original="#707d84"/>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M56.545,317.84h58.552c3.005,0,5.464-2.459,5.464-5.464l0,0c0-3.005-2.459-5.464-5.464-5.464H56.545  c-3.005,0-5.464,2.459-5.464,5.464l0,0C51.08,315.381,53.539,317.84,56.545,317.84z" fill="#96a8b2" data-original="#96a8b2"/>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M107.016,312.376L107.016,312.376c0-3.005-2.459-5.464-5.464-5.464h13.545  c3.005,0,5.464,2.459,5.464,5.464l0,0c0,3.005-2.459,5.464-5.464,5.464h-13.545C104.557,317.84,107.016,315.381,107.016,312.376z" fill="#8a9ca8" data-original="#8a9ca8"/>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M99.055,177.239v53.511c0,4.205,3.44,7.644,7.644,7.644h25.211c19.77,0,35.945-16.175,35.945-35.945  v-25.211c0-4.205-3.44-7.644-7.644-7.644H106.7C102.495,169.595,99.055,173.035,99.055,177.239z M106.7,183.185  c0-3.27,2.675-5.946,5.946-5.946h41.62c3.27,0,5.946,2.675,5.946,5.946v19.609c0,15.376-12.581,27.956-27.956,27.956h-19.609  c-3.27,0-5.946-2.675-5.946-5.946C106.7,224.805,106.7,183.185,106.7,183.185z" fill="#8ea3b2" data-original="#8ea3b2"/>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M64.942,169.595H11.431c-4.204,0-7.644,3.44-7.644,7.644v25.211c0,19.77,16.175,35.945,35.945,35.945  h25.211c4.205,0,7.644-3.44,7.644-7.644V177.24C72.587,173.035,69.147,169.595,64.942,169.595z M64.942,224.805  c0,3.27-2.675,5.946-5.946,5.946H39.387c-15.376,0-27.956-12.58-27.956-27.956v-19.609c0-3.27,2.675-5.946,5.946-5.946h41.62  c3.27,0,5.946,2.675,5.946,5.946V224.805z" fill="#ccdde7" data-original="#ccdde7"/>
<g xmlns="http://www.w3.org/2000/svg">
	<circle style="" cx="84.377" cy="199.598" r="25.38" fill="#fcb216" data-original="#fcb216"/>
	<circle style="" cx="84.377" cy="199.598" r="25.38" fill="#fcb216" data-original="#fcb216"/>
</g>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M83.351,265.507h5.444c23.848,0,43.801-18.101,46.116-41.836l6.765-69.336  c0.5-5.119-3.523-9.553-8.667-9.553H39.137c-5.144,0-9.167,4.434-8.667,9.553l6.765,69.336  C39.55,247.405,59.504,265.507,83.351,265.507z" fill="#abbac3" data-original="#abbac3" class=""/>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M118.743,220.351c0,0,4.732-75.328,4.738-75.57h9.296c5.144,0,9.167,4.434,8.667,9.553l-6.765,69.336  c-2.315,23.735-22.269,41.836-46.116,41.836h-5.444c-1.808,0-3.594-0.106-5.351-0.308  C99.285,262.627,116.596,244.105,118.743,220.351z" fill="#8ea3b2" data-original="#8ea3b2"/>
<g xmlns="http://www.w3.org/2000/svg">
	<path style="" d="M37.096,218.184l-1.338,5.063c-0.104,0.393-0.41,0.699-0.802,0.802l-5.063,1.338   c-1.12,0.296-1.12,1.885,0,2.181l5.063,1.338c0.393,0.104,0.699,0.41,0.802,0.802l1.338,5.063c0.296,1.12,1.885,1.12,2.181,0   l1.338-5.063c0.104-0.393,0.41-0.699,0.802-0.802l5.063-1.338c1.12-0.296,1.12-1.885,0-2.181l-5.063-1.338   c-0.393-0.104-0.699-0.41-0.802-0.802l-1.338-5.063C38.981,217.064,37.391,217.064,37.096,218.184z" fill="#ffffff" data-original="#ffffff"/>
	<path style="" d="M137.201,182.97l-0.921,3.487c-0.071,0.27-0.283,0.481-0.553,0.553l-3.487,0.921   c-0.771,0.204-0.771,1.299,0,1.502l3.487,0.921c0.27,0.071,0.481,0.283,0.553,0.553l0.921,3.487c0.204,0.771,1.299,0.771,1.502,0   l0.921-3.487c0.071-0.27,0.283-0.481,0.553-0.553l3.487-0.921c0.771-0.204,0.771-1.299,0-1.502l-3.487-0.921   c-0.27-0.071-0.481-0.283-0.553-0.553l-0.921-3.487C138.499,182.199,137.404,182.199,137.201,182.97z" fill="#ffffff" data-original="#ffffff"/>
</g>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M300.325,255.518h-96.546c-13.371,0-24.209,10.838-24.209,24.209V493.22  c22.908,6.854,47.179,10.555,72.317,10.555c25.259,0,49.641-3.735,72.646-10.653V279.727  C324.534,266.356,313.696,255.518,300.325,255.518z" fill="#d9f9fc" data-original="#d9f9fc" class=""/>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M300.325,255.518h-20.562c13.371,0,24.209,12.042,24.209,26.896V498.36  c6.963-1.466,13.823-3.212,20.562-5.238V279.727C324.534,266.356,313.696,255.518,300.325,255.518z" fill="#ace0f3" data-original="#ace0f3" class=""/>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M247.8,256.546h8.524c2.379,0,4.325-1.946,4.325-4.325v-55.748c0-2.379-1.946-4.325-4.325-4.325  H247.8c-2.379,0-4.325,1.946-4.325,4.325v55.748C243.475,254.6,245.421,256.546,247.8,256.546z" fill="#f78f1e" data-original="#f78f1e"/>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M255.016,256.546h2.471c1.682,0,3.059-1.377,3.059-3.059v-58.282c0-1.682-1.377-3.059-3.059-3.059  h-2.471c-1.682,0-3.059,1.377-3.059,3.059v58.282C251.957,255.169,253.333,256.546,255.016,256.546z" fill="#ed7e11" data-original="#ed7e11"/>
<polygon xmlns="http://www.w3.org/2000/svg" style="" points="223.762,256.546 280.013,256.546 260.544,247.697 243.37,247.697 " fill="#fcb216" data-original="#fcb216"/>
<polygon xmlns="http://www.w3.org/2000/svg" style="" points="260.544,247.697 280.013,256.546 271.248,256.546 251.78,247.697 " fill="#f2a216" data-original="#f2a216"/>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M251.957,223.263L251.957,223.263c9.311,0,15.973-7.667,16.929-16.929  c0.394-3.818,3.135-15.03,3.135-15.03c0-1.045-0.854-1.899-1.899-1.899h-36.329c-1.045,0-1.899,0.854-1.899,1.899  c0,0,2.741,11.212,3.135,15.03C235.984,215.596,242.647,223.263,251.957,223.263z" fill="#f99d28" data-original="#f99d28"/>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M243.529,249.648h17.014c1.754,0,3.189-1.435,3.189-3.189l0,0c0-1.754-1.435-3.189-3.189-3.189  h-17.014c-1.754,0-3.189,1.435-3.189,3.189l0,0C240.34,248.214,241.775,249.648,243.529,249.648z" fill="#febf3f" data-original="#febf3f"/>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M259.35,246.46c0-1.754-1.435-3.189-3.189-3.189h4.383c1.754,0,3.189,1.435,3.189,3.189  s-1.435,3.189-3.189,3.189h-4.383C257.914,249.648,259.35,248.214,259.35,246.46z" fill="#f9b438" data-original="#f9b438"/>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M252.115,223.263L252.115,223.263c9.311,0,15.973-7.667,16.929-16.929  c0.394-3.818,3.135-15.03,3.135-15.03c0-1.045-0.854-1.899-1.899-1.899h-36.328c-1.045,0-1.899,0.854-1.899,1.899  c0,0,2.741,11.212,3.135,15.03C236.141,215.596,242.803,223.263,252.115,223.263z" fill="#f99d28" data-original="#f99d28"/>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M260.917,206.335c0.394-3.818,3.135-15.03,3.135-15.03c0-1.045-0.854-1.899-1.899-1.899h7.968  c1.045,0,1.899,0.854,1.899,1.899c0,0-2.741,11.212-3.135,15.03c-0.955,9.261-7.617,16.929-16.929,16.929l0,0  c-1.391,0-2.721-0.175-3.984-0.497C255.162,220.933,260.105,214.212,260.917,206.335z" fill="#f28a19" data-original="#f28a19"/>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M222.612,266.434h58.552c3.005,0,5.464-2.459,5.464-5.464l0,0c0-3.005-2.459-5.464-5.464-5.464  h-58.552c-3.005,0-5.464,2.459-5.464,5.464l0,0C217.147,263.975,219.606,266.434,222.612,266.434z" fill="#febf3f" data-original="#febf3f"/>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M273.083,260.97L273.083,260.97c0-3.005-2.459-5.464-5.464-5.464h13.545  c3.005,0,5.464,2.459,5.464,5.464l0,0c0,3.005-2.459,5.464-5.464,5.464h-13.546C270.624,266.434,273.083,263.975,273.083,260.97z" fill="#f9b438" data-original="#f9b438"/>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M265.121,125.834v53.511c0,4.205,3.44,7.644,7.644,7.644h25.211c19.77,0,35.945-16.175,35.945-35.945  v-25.211c0-4.205-3.44-7.644-7.644-7.644h-53.511C268.561,118.19,265.121,121.63,265.121,125.834z M272.766,131.779  c0-3.27,2.675-5.946,5.946-5.946h41.62c3.27,0,5.946,2.675,5.946,5.946v19.609c0,15.376-12.581,27.956-27.956,27.956h-19.609  c-3.27,0-5.946-2.675-5.946-5.946V131.779z" fill="#f99d28" data-original="#f99d28"/>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M231.009,118.19h-53.511c-4.204,0-7.644,3.44-7.644,7.644v25.211  c0,19.77,16.175,35.945,35.945,35.945h25.211c4.205,0,7.644-3.44,7.644-7.644v-53.511C238.654,121.63,235.214,118.19,231.009,118.19  z M231.009,173.399c0,3.27-2.675,5.946-5.946,5.946h-19.609c-15.376,0-27.956-12.58-27.956-27.956v-19.609  c0-3.27,2.675-5.946,5.946-5.946h41.62c3.27,0,5.946,2.675,5.946,5.946V173.399z" fill="#ffce61" data-original="#ffce61" class=""/>
<g xmlns="http://www.w3.org/2000/svg">
	<circle style="" cx="250.438" cy="148.192" r="25.38" fill="#fcb216" data-original="#fcb216"/>
	<circle style="" cx="250.438" cy="148.192" r="25.38" fill="#fcb216" data-original="#fcb216"/>
	<path style="" d="M249.418,214.101h5.444c23.848,0,43.801-18.101,46.116-41.836l6.765-69.336   c0.5-5.119-3.523-9.553-8.667-9.553h-93.872c-5.144,0-9.167,4.434-8.667,9.553l6.765,69.336   C205.617,195.999,225.571,214.101,249.418,214.101z" fill="#fcb216" data-original="#fcb216"/>
</g>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M284.81,168.946c0,0,4.732-75.328,4.738-75.57h9.296c5.144,0,9.167,4.434,8.667,9.553l-6.765,69.336  c-2.315,23.735-22.269,41.836-46.116,41.836h-5.444c-1.808,0-3.594-0.106-5.352-0.308  C265.352,211.222,282.663,192.699,284.81,168.946z" fill="#f9a40d" data-original="#f9a40d"/>
<g xmlns="http://www.w3.org/2000/svg">
	<path style="" d="M214.385,100.961l-1.338,5.063c-0.104,0.393-0.41,0.699-0.802,0.802l-5.063,1.338   c-1.12,0.296-1.12,1.885,0,2.181l5.063,1.338c0.393,0.104,0.699,0.41,0.802,0.802l1.338,5.063c0.296,1.12,1.885,1.12,2.181,0   l1.338-5.063c0.104-0.393,0.41-0.699,0.802-0.802l5.063-1.338c1.12-0.296,1.12-1.885,0-2.181l-5.063-1.338   c-0.393-0.104-0.699-0.41-0.802-0.802l-1.338-5.063C216.271,99.841,214.681,99.841,214.385,100.961z" fill="#ffffff" data-original="#ffffff"/>
	<path style="" d="M290.685,189.271l-0.921,3.487c-0.071,0.27-0.283,0.481-0.553,0.553l-3.487,0.921   c-0.771,0.204-0.771,1.299,0,1.502l3.487,0.921c0.27,0.071,0.481,0.283,0.553,0.553l0.921,3.487c0.204,0.771,1.298,0.771,1.502,0   l0.921-3.487c0.071-0.27,0.283-0.481,0.553-0.553l3.487-0.921c0.771-0.204,0.771-1.299,0-1.502l-3.487-0.921   c-0.27-0.071-0.481-0.283-0.553-0.553l-0.921-3.487C291.984,188.5,290.889,188.5,290.685,189.271z" fill="#ffffff" data-original="#ffffff"/>
</g>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M488.714,337.859c-4.375-6.268-11.637-10.374-19.861-10.374h-96.546  c-13.371,0-24.209,10.838-24.209,24.209V484.73C413.209,457.797,464.568,404.361,488.714,337.859z" fill="#d9f9fc" data-original="#d9f9fc" class=""/>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M416.786,328.514h8.524c2.379,0,4.325-1.946,4.325-4.325V268.44c0-2.379-1.946-4.325-4.325-4.325  h-8.524c-2.379,0-4.325,1.946-4.325,4.325v55.748C412.461,326.568,414.407,328.514,416.786,328.514z" fill="#e27664" data-original="#e27664"/>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M424.002,328.514h2.471c1.682,0,3.059-1.377,3.059-3.059v-58.282c0-1.682-1.377-3.059-3.059-3.059  h-2.471c-1.682,0-3.059,1.377-3.059,3.059v58.282C420.944,327.137,422.32,328.514,424.002,328.514z" fill="#ce6b55" data-original="#ce6b55"/>
<polygon xmlns="http://www.w3.org/2000/svg" style="" points="392.749,328.514 448.999,328.514 429.531,319.665 412.356,319.665 " fill="#e89477" data-original="#e89477" class=""/>
<polygon xmlns="http://www.w3.org/2000/svg" style="" points="429.531,319.665 448.999,328.514 440.235,328.514 420.766,319.665 " fill="#db7f6a" data-original="#db7f6a" class=""/>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M420.944,295.231L420.944,295.231c9.311,0,15.973-7.667,16.929-16.929  c0.394-3.818,3.135-15.03,3.135-15.03c0-1.045-0.854-1.899-1.899-1.899h-36.328c-1.045,0-1.899,0.854-1.899,1.899  c0,0,2.741,11.212,3.135,15.03C404.97,287.564,411.634,295.231,420.944,295.231z" fill="#f99d28" data-original="#f99d28"/>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M412.516,321.616h17.014c1.754,0,3.189-1.435,3.189-3.189l0,0c0-1.754-1.435-3.189-3.189-3.189  h-17.014c-1.754,0-3.189,1.435-3.189,3.189l0,0C409.327,320.182,410.762,321.616,412.516,321.616z" fill="#ffaf99" data-original="#ffaf99"/>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M428.336,318.428c0-1.754-1.435-3.189-3.189-3.189h4.383c1.754,0,3.189,1.435,3.189,3.189  c0,1.754-1.435,3.189-3.189,3.189h-4.383C426.901,321.616,428.336,320.182,428.336,318.428z" fill="#e89477" data-original="#e89477" class=""/>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M421.1,295.231L421.1,295.231c9.311,0,15.973-7.667,16.929-16.929  c0.394-3.818,3.135-15.03,3.135-15.03c0-1.045-0.854-1.899-1.899-1.899h-36.328c-1.045,0-1.899,0.854-1.899,1.899  c0,0,2.741,11.212,3.135,15.03C405.128,287.564,411.79,295.231,421.1,295.231z" fill="#e2866d" data-original="#e2866d"/>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M429.904,278.303c0.394-3.818,3.135-15.03,3.135-15.03c0-1.045-0.854-1.899-1.899-1.899h7.968  c1.045,0,1.899,0.854,1.899,1.899c0,0-2.741,11.212-3.135,15.03c-0.955,9.261-7.617,16.929-16.929,16.929l0,0  c-1.391,0-2.721-0.175-3.984-0.497C424.148,292.901,429.092,286.18,429.904,278.303z" fill="#d37c62" data-original="#d37c62"/>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M391.598,338.402h58.552c3.005,0,5.464-2.459,5.464-5.464l0,0c0-3.005-2.459-5.464-5.464-5.464  h-58.552c-3.005,0-5.464,2.459-5.464,5.464l0,0C386.133,335.943,388.593,338.402,391.598,338.402z" fill="#ffaf99" data-original="#ffaf99"/>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M442.07,332.938L442.07,332.938c0-3.005-2.459-5.464-5.464-5.464h13.545  c3.005,0,5.464,2.459,5.464,5.464l0,0c0,3.005-2.459,5.464-5.464,5.464h-13.545C439.611,338.402,442.07,335.943,442.07,332.938z" fill="#e89477" data-original="#e89477" class=""/>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M434.108,197.802v53.511c0,4.205,3.44,7.644,7.644,7.644h25.211c19.77,0,35.945-16.175,35.945-35.945  v-25.211c0-4.205-3.44-7.644-7.644-7.644h-53.511C437.548,190.158,434.108,193.598,434.108,197.802z M441.753,203.747  c0-3.27,2.675-5.946,5.946-5.946h41.62c3.27,0,5.946,2.675,5.946,5.946v19.609c0,15.376-12.581,27.956-27.956,27.956h-19.609  c-3.27,0-5.946-2.675-5.946-5.946V203.747z" fill="#db7f6a" data-original="#db7f6a" class=""/>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M399.995,190.158h-53.511c-4.204,0-7.644,3.44-7.644,7.644v25.211  c0,19.77,16.175,35.945,35.945,35.945h25.211c4.205,0,7.644-3.44,7.644-7.644v-53.511C407.64,193.598,404.2,190.158,399.995,190.158  z M399.995,245.367c0,3.27-2.675,5.946-5.946,5.946h-19.609c-15.376,0-27.956-12.58-27.956-27.956v-19.609  c0-3.27,2.675-5.946,5.946-5.946h41.62c3.27,0,5.946,2.675,5.946,5.946V245.367z" fill="#e5a189" data-original="#e5a189"/>
<g xmlns="http://www.w3.org/2000/svg">
	<circle style="" cx="419.429" cy="220.16" r="25.38" fill="#fcb216" data-original="#fcb216"/>
	<circle style="" cx="419.429" cy="220.16" r="25.38" fill="#fcb216" data-original="#fcb216"/>
</g>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M418.405,286.069h5.444c23.848,0,43.801-18.101,46.116-41.836l6.765-69.336  c0.5-5.119-3.523-9.553-8.667-9.553h-93.872c-5.144,0-9.167,4.434-8.667,9.553l6.765,69.336  C374.604,267.967,394.558,286.069,418.405,286.069z" fill="#e89477" data-original="#e89477" class=""/>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M453.796,240.913c0,0,4.732-75.328,4.738-75.57h9.296c5.144,0,9.167,4.434,8.667,9.553l-6.765,69.336  c-2.315,23.735-22.269,41.836-46.116,41.836h-5.444c-1.808,0-3.594-0.106-5.352-0.308  C434.338,283.189,451.65,264.667,453.796,240.913z" fill="#db7f6a" data-original="#db7f6a" class=""/>
<g xmlns="http://www.w3.org/2000/svg">
	<path style="" d="M368.795,198.041l-1.338,5.063c-0.104,0.393-0.41,0.699-0.802,0.802l-5.063,1.338   c-1.12,0.296-1.12,1.885,0,2.181l5.063,1.338c0.393,0.104,0.699,0.41,0.802,0.802l1.338,5.063c0.296,1.12,1.885,1.12,2.181,0   l1.338-5.063c0.104-0.393,0.41-0.699,0.802-0.802l5.063-1.338c1.12-0.296,1.12-1.885,0-2.181l-5.063-1.338   c-0.393-0.104-0.699-0.41-0.802-0.802l-1.338-5.063C370.681,196.922,369.091,196.922,368.795,198.041z" fill="#ffffff" data-original="#ffffff"/>
	<path style="" d="M467.757,223.842l-0.921,3.487c-0.071,0.27-0.283,0.481-0.553,0.553l-3.487,0.921   c-0.771,0.204-0.771,1.299,0,1.502l3.487,0.921c0.27,0.071,0.481,0.283,0.553,0.553l0.921,3.487c0.204,0.771,1.298,0.771,1.502,0   l0.921-3.487c0.071-0.27,0.283-0.481,0.553-0.553l3.487-0.921c0.771-0.204,0.771-1.299,0-1.502l-3.487-0.921   c-0.27-0.071-0.481-0.283-0.553-0.553l-0.921-3.487C469.056,223.071,467.961,223.071,467.757,223.842z" fill="#ffffff" data-original="#ffffff"/>
</g>
<path xmlns="http://www.w3.org/2000/svg" style="" d="M488.678,337.954c-3.647-5.285-9.339-9.047-15.935-10.145c-0.182-0.03-0.364-0.061-0.548-0.085  c-0.193-0.028-0.387-0.05-0.582-0.074c-0.381-0.043-0.765-0.082-1.151-0.108c-0.037-0.003-0.074-0.006-0.111-0.008  c-0.496-0.03-0.995-0.046-1.499-0.046h-20.176c13.139,0.266,23.71,10.994,23.71,24.197v22.049  C478.708,362.318,484.167,350.364,488.678,337.954z" fill="#ace0f3" data-original="#ace0f3" class=""/>
<g xmlns="http://www.w3.org/2000/svg">
</g>
<g xmlns="http://www.w3.org/2000/svg">
</g>
<g xmlns="http://www.w3.org/2000/svg">
</g>
<g xmlns="http://www.w3.org/2000/svg">
</g>
<g xmlns="http://www.w3.org/2000/svg">
</g>
<g xmlns="http://www.w3.org/2000/svg">
</g>
<g xmlns="http://www.w3.org/2000/svg">
</g>
<g xmlns="http://www.w3.org/2000/svg">
</g>
<g xmlns="http://www.w3.org/2000/svg">
</g>
<g xmlns="http://www.w3.org/2000/svg">
</g>
<g xmlns="http://www.w3.org/2000/svg">
</g>
<g xmlns="http://www.w3.org/2000/svg">
</g>
<g xmlns="http://www.w3.org/2000/svg">
</g>
<g xmlns="http://www.w3.org/2000/svg">
</g>
<g xmlns="http://www.w3.org/2000/svg">
</g>
</g></svg>

```


---
Comment by @KuoyHuot on Nov 10, 2020
I also experience some lags in the route transition animation. The screen I navigate to only has 6 SVGS (picture cache in dart's main method) and the size of the SVG is only about 800 bytes to 1kg. 

---
Comment by @naamapps on Nov 10, 2020
I have this problem as well.
My svgs are precached in the main method. 
I have a list of svgs in a page. When navigating to that page for the first time in the app lifetime it lags, but if I transition to that page again it works smoothly. 

---
Comment by @dnfield on Nov 10, 2020
Is this lag only happening on iOS, or Android/desktop/web as well?

---
Comment by @dnfield on Nov 10, 2020
If it's only happening on iOS, I'm almost certain this bug would be resolved by flutter/flutter#60267

---
Comment by @dnfield on Nov 10, 2020
(particularly if you see this lag go away when using a version of Flutter before we landed Metal support on iOS)

---
Comment by @naamapps on Nov 11, 2020
@dnfield I'm on Android

---
Comment by @dnfield on Nov 11, 2020
@naamapps - does the lag happen on a second run of the same application?

The very first time may involve compiling some new shader previously not used, which can cause jank, but should only cause it once. I'd expect precaching the SVG to end up working around this but it's possible it's not.

---
Comment by @naamapps on Nov 11, 2020
Hey @dnfield,
It's every run. 
But only once for every run.
All other times in a run, it is smooth.
Like I said, I preloaded all my svgs in the main method and put a RepaintBoundry on the list of the svgs. 
The scrolling of the list is smooth, but the transition to the page of the list is janky.

---
Comment by @dnfield on Nov 12, 2020
Can someone share the timeline output during the jank period(s)?

---
Comment by @gwennguihal on Nov 13, 2020
Hi @dnfield,

Here the timeline (profile mode on an iphone 8) associated with https://github.com/gwennguihal/flutter_svg_demo.git.

[dart_devtools_2020_11_13-1605265674420000.json.zip](https://github.com/dnfield/flutter_svg/files/5536396/dart_devtools_2020_11_13-1605265674420000.json.zip)

Thanks

---
Comment by @naamapps on Dec 31, 2020
Hey @dnfield,
Any updates on this? 

---
Comment by @dnfield on Jan 3, 2021
That trace looks strange to me. I'll try to take a look at this demo a bit more.

---
Comment by @dnfield on Jan 3, 2021
I will say that the camera SVG in particular in the sample project looks very complicated. I would not expect rendering that to be very fast. Is the project still problematic without it?

---
Comment by @Tryliom on Mar 23, 2021
I have the same lag but only when I change the orientation on my android device to landscape with only 2 svg (In landscape mode, we see only 1 svg at time)

---
Comment by @Tarikul-Tuhin on Mar 17, 2024
Follow these steps to prevent from lags:

Step 1: Add dependencies
dependencies:
  vector_graphics: ^latest_version
  vector_graphics_compiler: ^latest_version

Step 2: Generate .vec file from your .svg file. 
Suppose, your svg file is in the assets folder and the filename is foo.svg.
Now, Run this command in your terminal
`dart run vector_graphics_compiler -i assets/foo.svg -o assets/foo.svg.vec`

Note: If your file is successfully generated, then you will notice a file in the assets folder named '**assets/foo.svg.vec**'

Step 3: Add VectorGraphic widget Inside your widget tree and import above packages.
```
VectorGraphic(
  loader: AssetBytesLoader('assets/foo.svg.vec'),
)
```
Done. Let me know if it works.

---
Comment by @jartos on Mar 26, 2024
I had no problems on Android devices with SVG-images. But on iOS with iPhone 11 real device I had jank in a ListView widget using SVG-images. I did as **Tarikul-Tuhin** instructed. Performance improved.

> Done. Let me know if it works.

It works. Thanks!