flutter_svg
flutter_svg copied to clipboard
Published
20 hours ago •
dnfield
dnfield
Lags even with precache
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.
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.
Hi Dan, there is the sample app: https://github.com/gwennguihal/flutter_svg_demo Thanks.
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>
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.
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.
If it's only happening on iOS, I'm almost certain this bug would be resolved by flutter/flutter#60267
(particularly if you see this lag go away when using a version of Flutter before we landed Metal support on iOS)
@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.
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.
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
Thanks
That trace looks strange to me. I'll try to take a look at this demo a bit more.
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?
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)
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.
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!
