Within DeckGL, i'm trying encode svg elements into a data URI. I have no problem getting one data uri to load but the other is giving me DOMException: The source image cannot be decoded. . To test, use this codepen and swap the svg string out. The strange part is that they both look encoded properly.
A. // The svg that doesn't work
<svg viewBox="0 0 24 24" width="1em" height="1em" color="#FFFFFFCC" class="Icons__Svg-cdGezP imHhdt"><path d="M11.992 2a.478.478 0 0 0-.468.483v2.855a.479.479 0 0 0 .236.419.48.48 0 0 0 .48 0 .479.479 0 0 0 .235-.419V2.483A.477.477 0 0 0 11.992 2ZM5.285 4.81a.473.473 0 0 0-.44.298.48.48 0 0 0 .108.52L6.95 7.627a.477.477 0 1 0 .675-.675L5.627 4.954a.484.484 0 0 0-.342-.143Zm13.414 0a.485.485 0 0 0-.327.144l-1.999 1.998a.477.477 0 1 0 .675.675l1.998-1.999a.477.477 0 0 0-.348-.818Zm-6.7 2.432c-.016 0-.031 0-.046.002a3.7 3.7 0 0 0-.048.005.608.608 0 0 0-.099.032c-1.236.052-2.357.537-3.173 1.353A4.744 4.744 0 0 0 7.241 12 4.751 4.751 0 0 0 12 16.76 4.752 4.752 0 0 0 16.758 12a4.752 4.752 0 0 0-2.905-4.384c-.51-.216-1.075-.31-1.658-.335l-.023-.01a.55.55 0 0 0-.09-.024l-.049-.005H12Zm-9.517 4.283a.479.479 0 0 0-.418.236.48.48 0 0 0 0 .48.479.479 0 0 0 .418.235h2.856a.479.479 0 0 0 .418-.236.48.48 0 0 0 0-.48.479.479 0 0 0-.418-.235H2.482Zm16.18 0a.479.479 0 0 0-.419.236.48.48 0 0 0 0 .48.479.479 0 0 0 .419.235h2.855a.479.479 0 0 0 .418-.236.48.48 0 0 0 0-.48.479.479 0 0 0-.418-.235h-2.855ZM7.278 16.23a.485.485 0 0 0-.327.143l-1.998 1.999a.477.477 0 1 0 .675.675l1.998-1.999a.477.477 0 0 0-.348-.818Zm9.428 0a.473.473 0 0 0-.44.298.48.48 0 0 0 .107.52l1.999 1.998a.477.477 0 1 0 .675-.675l-1.999-1.998a.484.484 0 0 0-.342-.143Zm-4.714 1.948a.478.478 0 0 0-.468.483v2.856a.479.479 0 0 0 .236.418.48.48 0 0 0 .48 0 .479.479 0 0 0 .235-.418v-2.856a.477.477 0 0 0-.483-.483Z" class="Icons__Path-geSwiY gzpevo"/></svg>
B. // The svg that works
<svg width="162px" height="60px" viewBox="0 0 162 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect id="Rectangle" fill="#BFBFBF99" x="0" y="0" width="162px" height="60px" rx="8"></rect>
</svg>
A. // data uri that doesn't work in app but works in browser
data:image/svg+xml+hml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20width%3D%221em%22%20height%3D%221em%22%20color%3D%22%23FFFFFFCC%22%20class%3D%22Icons__Svg-cdGezP%20imHhdt%22%3E%3Cpath%20d%3D%22M11.9920751%2C2.00004985%20C11.7299819%2C2.00562642%2011.5199356%2C2.22124928%2011.523653%2C2.48334247%20L11.523653%2C5.33848661%20C11.5217943%2C5.50949785%2011.6110176%2C5.66935594%2011.759723%2C5.7567205%20C11.9084284%2C5.84222635%2012.0905924%2C5.84222635%2012.2392978%2C5.7567205%20C12.3880032%2C5.66935594%2012.4772265%2C5.50949785%2012.4753678%2C5.33848661%20L12.4753678%2C2.48334247%20C12.4772265%2C2.35508417%2012.4270387%2C2.23054325%2012.3359563%2C2.1394613%20C12.2448744%2C2.04837935%2012.1203334%2C1.99819115%2011.9920751%2C2.00004985%20Z%20M5.28546052%2C4.81058236%20C5.09028477%2C4.81058236%204.91741483%2C4.927688%204.84492082%2C5.1079932%20C4.7724268%2C5.28643971%204.81517973%2C5.49276861%204.95273201%2C5.62846219%20L6.95096126%2C7.62669144%20C7.0717843%2C7.74937318%207.24837211%2C7.79956138%207.41566595%2C7.75680845%20C7.58110062%2C7.71405599%207.7130768%2C7.58207981%207.75582925%2C7.41664515%20C7.79858218%2C7.24935131%207.74839398%2C7.0727635%207.62571224%2C6.95194046%20L5.62748299%2C4.95371121%20C5.53640104%2C4.86262926%205.41371883%2C4.81058236%205.28546052%2C4.81058236%20Z%20M18.6986897%2C4.81058236%20C18.5760075%2C4.81430023%2018.4589024%2C4.86634665%2018.3715378%2C4.95371121%20L16.3733086%2C6.95194046%20C16.2506268%2C7.0727635%2016.2004386%2C7.24935131%2016.2431916%2C7.41664515%20C16.285944%2C7.58207981%2016.4179202%2C7.71405599%2016.5833549%2C7.75680845%20C16.7506487%2C7.79956138%2016.9272365%2C7.74937318%2017.0480595%2C7.62669144%20L19.0462888%2C5.62846219%20C19.1856998%2C5.49090943%2019.2284527%2C5.28086314%2019.1522413%2C5.10055793%20C19.0760299%2C4.92025273%2018.8957247%2C4.80500578%2018.6986897%2C4.81058236%20Z%20M11.9995104%2C7.24191604%20C11.9827812%2C7.24191604%2011.9679106%2C7.24191604%2011.9530401%2C7.24377474%20C11.9363108%2C7.24563343%2011.9195811%2C7.24749261%2011.9047106%2C7.24935131%20C11.8712521%2C7.25678658%2011.8377931%2C7.26793972%2011.8061934%2C7.28095109%20C10.5700796%2C7.33299799%209.44921238%2C7.81814979%208.63319125%2C8.63417045%20C7.77255897%2C9.49480321%207.24093684%2C10.6844466%207.24093684%2C12.0004896%20C7.24093684%2C14.6344343%209.3655657%2C16.7590632%2011.9995104%2C16.7590632%20C13.9735751%2C16.7590632%2015.6632404%2C15.5638432%2016.3844617%2C13.8537308%20C16.6242491%2C13.2849328%2016.758084%2C12.6585109%2016.758084%2C12.0004896%20C16.758084%2C10.0264249%2015.562864%2C8.3367596%2013.8527516%2C7.61553829%20C13.3434358%2C7.39991543%2012.7783552%2C7.3051156%2012.1946862%2C7.28095109%20C12.1872509%2C7.27723369%2012.1798156%2C7.27537452%2012.1723803%2C7.27165712%20C12.1426393%2C7.26050398%2012.1110395%2C7.25306918%2012.0812984%2C7.24749261%20C12.0645691%2C7.24563343%2012.0496986%2C7.24377474%2012.0329689%2C7.24191604%20C12.0218162%2C7.24191604%2012.0106635%2C7.24191604%2011.9995104%2C7.24191604%20Z%20M2.48236328%2C11.5246322%20C2.31135204%2C11.5227735%202.15149395%2C11.6119968%202.06412939%2C11.7607022%20C1.97862354%2C11.9094076%201.97862354%2C12.0915716%202.06412939%2C12.240277%20C2.15149395%2C12.3889824%202.31135204%2C12.4782057%202.48236328%2C12.476347%20L5.33750742%2C12.476347%20C5.50851865%2C12.4782057%205.66837675%2C12.3889824%205.7557413%2C12.240277%20C5.84124716%2C12.0915716%205.84124716%2C11.9094076%205.7557413%2C11.7607022%20C5.66837675%2C11.6119968%205.50851865%2C11.5227735%205.33750742%2C11.5246322%20L2.48236328%2C11.5246322%20Z%20M18.6615134%2C11.5246322%20C18.4905022%2C11.5227735%2018.3306441%2C11.6119968%2018.2432795%2C11.7607022%20C18.1577736%2C11.9094076%2018.1577736%2C12.0915716%2018.2432795%2C12.240277%20C18.3306441%2C12.3889824%2018.4905022%2C12.4782057%2018.6615134%2C12.476347%20L21.5166575%2C12.476347%20C21.6876688%2C12.4782057%2021.8475269%2C12.3889824%2021.9348914%2C12.240277%20C22.0203973%2C12.0915716%2022.0203973%2C11.9094076%2021.9348914%2C11.7607022%20C21.8475269%2C11.6119968%2021.6876688%2C11.5227735%2021.5166575%2C11.5246322%20L18.6615134%2C11.5246322%20Z%20M7.2781132%2C16.2311589%20C7.15543098%2C16.2348768%207.03832582%2C16.2869232%206.95096126%2C16.3742878%20L4.95273201%2C18.372517%20C4.83005028%2C18.49334%204.77986208%2C18.6699279%204.822615%2C18.8372217%20C4.86536746%2C19.0026564%204.99734364%2C19.1346325%205.1627783%2C19.177385%20C5.33007214%2C19.2201379%205.50665995%2C19.1699497%205.62748299%2C19.047268%20L7.62571224%2C17.0490387%20C7.76512322%2C16.911486%207.80787615%2C16.7014397%207.73166474%2C16.5211345%20C7.65545333%2C16.3408293%207.47514812%2C16.2255823%207.2781132%2C16.2311589%20Z%20M16.7060371%2C16.2311589%20C16.5108613%2C16.2311589%2016.3379914%2C16.3482645%2016.2654974%2C16.5285698%20C16.1930034%2C16.7070163%2016.2357563%2C16.9133452%2016.3733086%2C17.0490387%20L18.3715378%2C19.047268%20C18.4923608%2C19.1699497%2018.6689487%2C19.2201379%2018.8362425%2C19.177385%20C19.0016772%2C19.1346325%2019.1336533%2C19.0026564%2019.1764058%2C18.8372217%20C19.2191587%2C18.6699279%2019.1689705%2C18.49334%2019.0462888%2C18.372517%20L17.0480595%2C16.3742878%20C16.9569776%2C16.2832058%2016.8342954%2C16.2311589%2016.7060371%2C16.2311589%20Z%20M11.9920751%2C18.1792%20C11.7299819%2C18.1847765%2011.5199356%2C18.4003994%2011.523653%2C18.6624926%20L11.523653%2C21.5176367%20C11.5217943%2C21.688648%2011.6110176%2C21.8485061%2011.759723%2C21.9358706%20C11.9084284%2C22.0213765%2012.0905924%2C22.0213765%2012.2392978%2C21.9358706%20C12.3880032%2C21.8485061%2012.4772265%2C21.688648%2012.4753678%2C21.5176367%20L12.4753678%2C18.6624926%20C12.4772265%2C18.5342343%2012.4270387%2C18.4096934%2012.3359563%2C18.3186114%20C12.2448744%2C18.2275295%2012.1203334%2C18.1773413%2011.9920751%2C18.1792%20Z%22%20class%3D%22Icons__Path-geSwiY%20gzpevo%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E
B. // data uri that works in app and in browser
data:image/svg+xml+hml,%0A%20%20%3Csvg%20width%3D%22162px%22%20height%3D%2260px%22%20viewBox%3D%220%200%20162%2060%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle%22%20fill%3D%22%23EEEEEEBF%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22162px%22%20height%3D%2260px%22%20rx%3D%228%22%3E%3C%2Frect%3E%0A%3C%2Fsvg%3E%0A%20%20