I'm currently working on a project using the HTML5 Canvas API and want to include images in the SVG format, however, I find that SVG files exported from Adobe Illustrator do not render on the canvas.
I get no errors (in the JavaScript console) the image just doesn't appear. Now as a work around I've been importing those images to vectr.com and then exporting them without doing any modifications and they render fine.
After some research, I found that the width and height parameters are missing from the Adobe Illustrator files.
Does anyone know why this might be and how to fix it within Illustrator? I can manually add those parameters to the raw svg code, but surely I should not have to do this?
Here's the file as exported from Adobe:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 320.43 62.94"><defs><linearGradient id="linear-gradient" x1="39.97" y1="-42.69" x2="279.23" y2="95.44" gradientUnits="userSpaceOnUse"><stop offset="0"/><stop offset="0.39" stop-color="#601d02"/><stop offset="1" stop-color="#ff4e05"/></linearGradient><linearGradient id="linear-gradient-2" x1="0.34" y1="13.97" x2="318.31" y2="13.97" gradientUnits="userSpaceOnUse"><stop offset="0"/><stop offset="0.21" stop-color="#030100"/><stop offset="0.35" stop-color="#0b0300"/><stop offset="0.46" stop-color="#1a0801"/><stop offset="0.56" stop-color="#2f0e01"/><stop offset="0.66" stop-color="#4a1701"/><stop offset="0.74" stop-color="#6c2102"/><stop offset="0.83" stop-color="#932d03"/><stop offset="0.91" stop-color="#c13b04"/><stop offset="0.98" stop-color="#f44b05"/><stop offset="1" stop-color="#ff4e05"/></linearGradient><linearGradient id="linear-gradient-3" x1="146.1" y1="38.07" x2="146.1" y2="38.07" gradientUnits="userSpaceOnUse"><stop offset="0"/><stop offset="0.49" stop-color="#606060"/><stop offset="1" stop-color="#c6c6c6"/></linearGradient><linearGradient id="linear-gradient-4" x1="146.03" y1="34.28" x2="146.17" y2="41.86" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffc221"/><stop offset="0.18" stop-color="#fec224"/><stop offset="0.34" stop-color="#fac22f"/><stop offset="0.48" stop-color="#f4c341"/><stop offset="0.62" stop-color="#ebc35a"/><stop offset="0.76" stop-color="#e0c47a"/><stop offset="0.89" stop-color="#d3c5a1"/><stop offset="1" stop-color="#c6c6c6"/></linearGradient><linearGradient id="linear-gradient-5" x1="136.45" y1="43.24" x2="136.56" y2="49.07" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fdc24a"/><stop offset="0.2" stop-color="#fbc24d"/><stop offset="0.38" stop-color="#f7c258"/><stop offset="0.55" stop-color="#efc36a"/><stop offset="0.71" stop-color="#e4c483"/><stop offset="0.86" stop-color="#d6c5a3"/><stop offset="1" stop-color="#c6c6c6"/></linearGradient></defs><title>speedboat</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M1.09,26.44l317.09,1.7C259,55.4,218,61.45,190.71,61.44c-6.33,0-56.71-.36-86,0-15,.18-22.57.33-28.14.44q-12,.24-23.86.56c-13.5-.5-21.24.37-25.5-2.5-4.63-3.13-6.13-6.88-13.31-17C8.69,35.6,4.08,30,1.09,26.44Z" style="fill:#fcee21;stroke:#000;stroke-miterlimit:10"/><path d="M318.21,27.94c-40.67-5.67-78.33-21.84-119-27.5-7.92-.35-19.5,2-35,6-9,2.32-18,3.09-34.39,6.2-20.11,3.8-20.38,4.5-33.79,5.95-13.82,1.49-28.31.34-45.82.85-7.26.2-13.31-.22-18.5,0-7.43.3-11.58.13-15.66.16-2.69,0-5.37-3.47-7.83-2.37-2.65,1.18-7,6.08-7,7.71Z" style="fill:url(#linear-gradient)"/><path d="M318.11,27.93c-2.54-.36-5-.66-7.47-1.05l-7.52-1.37-7.48-1.57-7.45-1.71c-9.91-2.38-19.73-5.09-29.55-7.8C239,9,219.33,3.59,199.15.83h0a64.46,64.46,0,0,0-12.6,1.06c-4.17.7-8.32,1.59-12.45,2.56s-8.22,2.07-12.38,3.08-8.37,1.64-12.56,2.33c-8.4,1.32-16.75,2.76-25.08,4.44S107.49,18,99,18.87A187.73,187.73,0,0,1,73.47,20c-8.52-.06-17-.12-25.49.15-4.26.08-8.53-.08-12.75-.08-2.11,0-4.21.11-6.35.17s-4.27.1-6.4.1H16.11a7,7,0,0,1-3.37-1.08A15.79,15.79,0,0,0,10,17.94a2.3,2.3,0,0,0-1.17-.1,4.35,4.35,0,0,0-1.17.58,16.24,16.24,0,0,0-2.33,1.93,22.08,22.08,0,0,0-2.05,2.29,13.54,13.54,0,0,0-.85,1.23A3.38,3.38,0,0,0,2,24.94l-.79-.81,78.94.61,78.87,1,79.29,1.22Zm.2,0-78.71-.49-79.22-.28-79.62-.54L1.2,25.74H.34l.07-.8a4.09,4.09,0,0,1,.68-1.88,15.52,15.52,0,0,1,1-1.39,24.44,24.44,0,0,1,2.21-2.44A17.24,17.24,0,0,1,6.84,17.1a5.53,5.53,0,0,1,1.69-.79,3.8,3.8,0,0,1,2,.13,16.67,16.67,0,0,1,3,1.49,5.57,5.57,0,0,0,2.61.89l6.38,0c2.12,0,4.24,0,6.35-.07s4.26-.18,6.4-.15c4.27,0,8.5.18,12.74.13,8.48-.24,17-.15,25.5-.06a188.43,188.43,0,0,0,25.38-1.06c8.43-.86,16.68-2.88,25.05-4.45S140.64,10.13,149,8.84c4.19-.67,8.38-1.34,12.5-2.27s8.24-2.08,12.39-3S182.25,1.73,186.45,1a66.53,66.53,0,0,1,12.78-1h0c20.23,2.86,39.92,8.39,59.52,13.9,9.8,2.76,19.61,5.52,29.5,8l7.43,1.75,7.47,1.6,7.5,1.4C313.24,27,315.82,27.52,318.31,27.94Z" style="fill:url(#linear-gradient-2)"/><path d="M277.18,38.07H15" style="fill:url(#linear-gradient-3)"/><path d="M277.18,37.92c0-.07,0,.57,0,.3H275l-2.18,0-4.35,0-4.35,0-2.18,0h-2.17c0,.54,0-.73,0-.6v.6l-61.18.53-61.19.44c-20.39.18-40.79.41-61.18.18S35.41,39,15,38.22v-.3c20.39-.79,40.79-1.05,61.19-1.3s40.79,0,61.18.18l61.19.43,61.18.54v.6c0,.13,0-1.14,0-.6h2.17l2.18,0,4.35,0,4.35,0,2.18,0h2.17c0-.27,0,.37,0,.3Z" style="fill:url(#linear-gradient-4)"/><path d="M246.51,46.26l-110,.7c-18.34.1-36.67.33-55,.2s-36.67-.33-55-.9v-.2c18.33-.58,36.67-.72,55-.9s36.67.09,55,.2l110,.7Z" style="fill:url(#linear-gradient-5)"/></g></g></svg>
Note: I could not include resulting file from vectr as "this looks like spam" message prevented me from posting the question!
One more note: I'm choosing "Export Selection" from the 'file' menu to export the desired objects.
I'm sure this must be an export settings issue, but I can't seem to find anything to correct this problem. Any input would be greatly appreciated.