1

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.

Improve this question
0

1 Answer 1

Reset to default
3

When exporting as SVG, make sure to uncheck the "Responsive" option in the export dialog if you want to include width and height parameters

enter image description here

Example showing the first line of code after unchecking "Responsive".

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="320.42" height="62.95" viewBox="0 0 320.42 62.95">
Improve this answer
4
  • Well, I had never seen this menu before and discovered that it only appears when you select 'File-->Export-->Export As' and I have been choosing 'File-->Export Selection' which gives you a completely different screen and options and I also see that this is where I can select "Embed" to embed images I have used in opacity masks. I don't have that option if I 'Export Selection'.
    – Fishbite
    Oct 31, 2021 at 16:37
  • One thing I will say is that I actually do want my images to be responsive on canvas, however, I can achieve that programmatically so it's not too much of an issue as long as the original artwork is created at the maximum size I'll ever need it. Strange how the canvas wont render svg files without those width and height parameters. It's the first failing of the canvas API I've come across. This has fixed all my issues though. Many thanks for that.
    – Fishbite
    Oct 31, 2021 at 16:38
  • @Fishbite Actually you can also embed a raster image using the button in the tool options along the top when you have a raster image selected, also you can click the cog icon in the Export Selection dialog to get to the "Responsive" option
    – Billy Kerr
    Oct 31, 2021 at 21:44
  • @Fishbite Illustrator often seems to have too many ways of doing the same thing . . . it can be quite annoying sometimes ;)
    – Billy Kerr
    Oct 31, 2021 at 21:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.