svg files exported from adobe illustrator aren't rendered on HTML Canvas-CodePudding

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, the image just doesn't appear.

this is the code for demonstration purposes:


// function to set up a canvas
function makeCanvas(
  width = 256,
  height = 256,
  border = "1px solid black",
  backgroundColor = "white"
) {
  // make the canvas element and add it to the DOM
  let canvas = document.createElement("canvas");
  canvas.width = width;
  canvas.height = height;
  canvas.style.border = border;
  canvas.style.backgroundColor = backgroundColor;
  document.body.appendChild(canvas);
  canvas.ctx = canvas.getContext("2d");

  // return the canvas
  return canvas;
}

// make the canvas
let canvas = makeCanvas(512, 512);
let ctx = canvas.getContext("2d");

// create an image object
let test = new Image();

// add an event listener for image load
test.addEventListener("load", loadHandler, false);

// set the source of the image file
test.src = "../images/speedboat.svg";

// function to draw the image on canvas once it has finished loading
function loadHandler() {
  ctx.drawImage(test, -0, -0);
}

This is the Adobe exported file:

<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>

It opens fine with a browser BTW but not on canvas. I wonder if anyone knows why this is and how to fix it. Currently I found that if I import the files into vectr.com and then export them directly without making any mods they render fine.

Here's the same image file from Adobe after doing the above:

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="500" height="500" viewBox="0 0 500 500" xml:space="preserve">
<desc>Created with Fabric.js 4.6.0</desc>
<defs>
</defs>
<g transform="matrix(1 0 0 1 249.42 262.97)" id="OwCWBaXZauXVwoYOZrP2v"  >
<path style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(252,238,33); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-159.63, -44.44)" d="M 1.09 26.44 L 318.17999999999995 28.14 C 259 55.4 218 61.45 190.71 61.44 C 184.38 61.44 134 61.08 104.71000000000001 61.44 C 89.71000000000001 61.62 82.14000000000001 61.769999999999996 76.57000000000001 61.879999999999995 Q 64.57000000000001 62.12 52.71000000000001 62.44 C 39.21000000000001 61.94 31.47000000000001 62.809999999999995 27.210000000000008 59.94 C 22.58000000000001 56.809999999999995 21.08000000000001 53.059999999999995 13.900000000000007 42.94 C 8.69 35.6 4.08 30 1.09 26.44 Z" stroke-linecap="round" />
</g>
<g transform="matrix(1 0 0 1 249.5 232.7)" id="aYFv55jKhxIwdKyh2Obz9"  >
<linearGradient id="SVGID_6" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 1 0 0)"  x1="39.97" y1="-42.69" x2="279.23" y2="95.44">
<stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity: 1"/>
<stop offset="39%" style="stop-color:rgb(96,29,2);stop-opacity: 1"/>
<stop offset="100%" style="stop-color:rgb(255,78,5);stop-opacity: 1"/>
</linearGradient>
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: url(#SVGID_6); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-159.71, -14.17)" d="M 318.21 27.94 C 277.53999999999996 22.270000000000003 239.88 6.100000000000001 199.20999999999998 0.4400000000000013 C 191.29 0.0900000000000013 179.70999999999998 2.4400000000000013 164.20999999999998 6.440000000000001 C 155.20999999999998 8.760000000000002 146.20999999999998 9.530000000000001 129.82 12.64 C 109.71 16.44 109.44 17.14 96.03 18.59 C 82.21000000000001 20.08 67.72 18.93 50.21 19.44 C 42.95 19.64 36.9 19.220000000000002 31.71 19.44 C 24.28 19.740000000000002 20.130000000000003 19.57 16.05 19.6 C 13.360000000000001 19.6 10.68 16.130000000000003 8.22 17.23 C 5.57 18.41 1.2200000000000006 23.310000000000002 1.2200000000000006 24.94 Z" stroke-linecap="round" />
</g>
<g transform="matrix(1 0 0 1 249.11 232.49)" id="5BdeRvNFeXpDNuC8Qwt0e"  >
<linearGradient id="SVGID_7" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 1 0 0)"  x1="0.34" y1="13.97" x2="318.31" y2="13.97">
<stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity: 1"/>
<stop offset="21%" style="stop-color:rgb(3,1,0);stop-opacity: 1"/>
<stop offset="35%" style="stop-color:rgb(11,3,0);stop-opacity: 1"/>
<stop offset="46%" style="stop-color:rgb(26,8,1);stop-opacity: 1"/>
<stop offset="56.00000000000001%" style="stop-color:rgb(47,14,1);stop-opacity: 1"/>
<stop offset="66%" style="stop-color:rgb(74,23,1);stop-opacity: 1"/>
<stop offset="74%" style="stop-color:rgb(108,33,2);stop-opacity: 1"/>
<stop offset="83%" style="stop-color:rgb(147,45,3);stop-opacity: 1"/>
<stop offset="91%" style="stop-color:rgb(193,59,4);stop-opacity: 1"/>
<stop offset="98%" style="stop-color:rgb(244,75,5);stop-opacity: 1"/>
<stop offset="100%" style="stop-color:rgb(255,78,5);stop-opacity: 1"/>
</linearGradient>
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: url(#SVGID_7); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-159.33, -13.96)" d="M 318.11 27.93 C 315.57 27.57 313.11 27.27 310.64 26.88 L 303.12 25.509999999999998 L 295.64 23.939999999999998 L 288.19 22.229999999999997 C 278.28 19.849999999999998 268.46 17.139999999999997 258.64 14.429999999999996 C 239 9 219.33 3.59 199.15 0.83 L 199.15 0.83 C 194.9254108281506 0.7695468586689685 190.70511162006662 1.1245879031585793 186.54999999999998 1.8900000000000095 C 182.38000000000002 2.59 178.23000000000002 3.4800000000000004 174.10000000000002 4.45 C 169.97000000000003 5.42 165.88000000000002 6.52 161.72000000000003 7.53 C 157.56000000000003 8.540000000000001 153.35000000000002 9.17 149.16000000000003 9.86 C 140.76000000000002 11.18 132.41000000000003 12.62 124.08000000000003 14.3 C 115.75000000000003 15.980000000000002 107.49 18 99 18.87 C 90.52554562549393 19.82611932220004 81.99578814595296 20.203660487569486 73.46999999999997 20.000000000000025 C 64.95 19.94 56.47 19.88 47.980000000000004 20.15 C 43.720000000000006 20.229999999999997 39.45 20.07 35.230000000000004 20.07 C 33.120000000000005 20.07 31.020000000000003 20.18 28.880000000000003 20.240000000000002 C 26.740000000000002 20.300000000000004 24.610000000000003 20.340000000000003 22.480000000000004 20.340000000000003 L 16.11 20.340000000000003 C 14.912707185920118 20.274577309314758 13.752292069336121 19.902693533080125 12.739999999999997 19.260000000000005 C 11.871268237448712 18.732859533026932 10.953679528579139 18.29080949809706 9.999999999999993 17.939999999999998 C 9.625221988866867 17.80599382367263 9.22208302602757 17.771537502062433 8.829999999999998 17.84 C 8.413037097156597 17.973359387621418 8.018593536659592 18.16889551162848 7.659999999999998 18.419999999999998 C 6.824968150355553 18.989427267930306 6.0449172184344935 19.635563876774786 5.329999999999993 20.35 C 4.594303789063106 21.06478898510074 3.909311350940971 21.82997565988108 3.2799999999999976 22.64 C 2.974228955937695 23.034031895096764 2.6904631204350435 23.44465775117707 2.4300000000000024 23.869999999999994 C 2.226432907408886 24.19940211288462 2.080983166934095 24.56133518801957 1.9999999999999996 24.940000000000005 L 1.21 24.130000000000003 L 80.14999999999999 24.740000000000002 L 159.01999999999998 25.740000000000002 L 238.31 26.96 Z M 318.31 27.93 L 239.60000000000002 27.44 L 160.38000000000002 27.16 L 80.76000000000002 26.62 L 1.2 25.74 L 0.34 25.74 L 0.41000000000000003 24.939999999999998 C 0.47766083080112026 24.266731226111396 0.7113071635164789 23.620767835663052 1.0899999999999994 23.06 C 1.3974998460273111 22.578617195576733 1.7313411582774718 22.11457777154901 2.089999999999998 21.67 C 2.7709891532459254 20.80792022385207 3.5093303864838745 19.992738047788443 4.299999999999997 19.229999999999997 C 5.076283659970828 18.440061136302038 5.926881302770748 17.726764687812338 6.839999999999992 17.1 C 7.35453061483465 16.742861739858906 7.925993645612407 16.475728133755695 8.529999999999998 16.310000000000002 C 9.196287911563147 16.17357593306615 9.886979047090648 16.218470856875438 10.53 16.44 C 11.57748991438215 16.834682973741646 12.58256257468562 17.333869061692365 13.529999999999998 17.929999999999993 C 14.3116510195315 18.440739340720114 15.209154945070207 18.746784740616455 16.14 18.82 L 22.52 18.82 C 24.64 18.82 26.759999999999998 18.82 28.869999999999997 18.75 C 30.979999999999997 18.68 33.129999999999995 18.57 35.269999999999996 18.6 C 39.53999999999999 18.6 43.769999999999996 18.78 48.01 18.73 C 56.489999999999995 18.490000000000002 65.00999999999999 18.580000000000002 73.50999999999999 18.67 C 81.9842122700337 18.88796165129064 90.46347459377768 18.533823823742644 98.8899999999999 17.610000000000028 C 107.32 16.750000000000004 115.57 14.730000000000004 123.93999999999998 13.160000000000004 C 132.30999999999997 11.590000000000003 140.64 10.13 149 8.84 C 153.19 8.17 157.38 7.5 161.5 6.57 C 165.62 5.640000000000001 169.74 4.49 173.89 3.5700000000000003 C 178.03999999999996 2.6500000000000004 182.25 1.73 186.45 1 C 190.66788071956438 0.25607655039533206 194.9477425693329 -0.0788109182876493 199.23 0 L 199.23 0 C 219.45999999999998 2.86 239.14999999999998 8.39 258.75 13.9 C 268.55 16.66 278.36 19.42 288.25 21.9 L 295.68 23.65 L 303.15000000000003 25.25 L 310.65000000000003 26.65 C 313.24 27 315.82 27.52 318.31 27.94 Z" stroke-linecap="round" />
</g>
<g transform="matrix(1 0 0 1 235.88 256.6)" id="Rpwx5XyJw8m_Z0qfsQXWS"  >
<linearGradient id="SVGID_8" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 1 0 0)"  x1="146.1" y1="38.07" x2="146.1" y2="38.07">
<stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity: 1"/>
<stop offset="49%" style="stop-color:rgb(96,96,96);stop-opacity: 1"/>
<stop offset="100%" style="stop-color:rgb(198,198,198);stop-opacity: 1"/>
</linearGradient>
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: url(#SVGID_8); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-146.09, -38.07)" d="M 277.18 38.07 L 15 38.07" stroke-linecap="round" />
</g>
<g transform="matrix(1 0 0 1 235.88 256.52)" id="KnqDNiVRTvAfPKqVA9KM-"  >
<linearGradient id="SVGID_9" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 1 0 0)"  x1="146.03" y1="34.28" x2="146.17" y2="41.86">
<stop offset="0%" style="stop-color:rgb(255,194,33);stop-opacity: 1"/>
<stop offset="18%" style="stop-color:rgb(254,194,36);stop-opacity: 1"/>
<stop offset="34%" style="stop-color:rgb(250,194,47);stop-opacity: 1"/>
<stop offset="48%" style="stop-color:rgb(244,195,65);stop-opacity: 1"/>
<stop offset="62%" style="stop-color:rgb(235,195,90);stop-opacity: 1"/>
<stop offset="76%" style="stop-color:rgb(224,196,122);stop-opacity: 1"/>
<stop offset="89%" style="stop-color:rgb(211,197,161);stop-opacity: 1"/>
<stop offset="100%" style="stop-color:rgb(198,198,198);stop-opacity: 1"/>
</linearGradient>
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: url(#SVGID_9); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-146.09, -37.99)" d="M 277.18 37.92 C 277.18 37.85 277.18 38.49 277.18 38.22 L 275 38.22 L 272.82 38.22 L 268.46999999999997 38.22 L 264.11999999999995 38.22 L 261.93999999999994 38.22 L 259.7699999999999 38.22 C 259.7699999999999 38.76 259.7699999999999 37.49 259.7699999999999 37.62 L 259.7699999999999 38.22 L 198.58999999999992 38.75 L 137.39999999999992 39.19 C 117.00999999999992 39.37 96.60999999999993 39.599999999999994 76.21999999999991 39.37 C 55.8299999999999 39.14 35.41 39 15 38.22 L 15 37.92 C 35.39 37.13 55.79 36.870000000000005 76.19 36.620000000000005 C 96.59 36.370000000000005 116.97999999999999 36.620000000000005 137.37 36.800000000000004 L 198.56 37.230000000000004 L 259.74 37.77 L 259.74 38.370000000000005 C 259.74 38.50000000000001 259.74 37.230000000000004 259.74 37.77 L 261.91 37.77 L 264.09000000000003 37.77 L 268.44000000000005 37.77 L 272.7900000000001 37.77 L 274.9700000000001 37.77 L 277.1400000000001 37.77 C 277.1400000000001 37.5 277.1400000000001 38.14 277.1400000000001 38.07 Z" stroke-linecap="round" />
</g>
<g transform="matrix(1 0 0 1 226.29 264.68)" id="1zIiSwz8fV-4fO4FPWADO"  >
<linearGradient id="SVGID_10" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 1 0 0)"  x1="136.45" y1="43.24" x2="136.56" y2="49.07">
<stop offset="0%" style="stop-color:rgb(253,194,74);stop-opacity: 1"/>
<stop offset="20%" style="stop-color:rgb(251,194,77);stop-opacity: 1"/>
<stop offset="38%" style="stop-color:rgb(247,194,88);stop-opacity: 1"/>
<stop offset="55.00000000000001%" style="stop-color:rgb(239,195,106);stop-opacity: 1"/>
<stop offset="71%" style="stop-color:rgb(228,196,131);stop-opacity: 1"/>
<stop offset="86%" style="stop-color:rgb(214,197,163);stop-opacity: 1"/>
<stop offset="100%" style="stop-color:rgb(198,198,198);stop-opacity: 1"/>
</linearGradient>
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: url(#SVGID_10); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-136.51, -46.15)" d="M 246.51 46.26 L 136.51 46.96 C 118.16999999999999 47.06 99.83999999999999 47.29 81.50999999999999 47.160000000000004 C 63.17999999999999 47.03000000000001 44.83999999999999 46.830000000000005 26.50999999999999 46.260000000000005 L 26.50999999999999 46.06 C 44.83999999999999 45.480000000000004 63.17999999999999 45.34 81.50999999999999 45.160000000000004 C 99.83999999999999 44.980000000000004 118.17999999999999 45.25000000000001 136.51 45.36000000000001 L 246.51 46.06000000000001 Z" stroke-linecap="round" />
</g>
</svg>

Now this extra step of importing / exporting to and from vectr was working fine until I tried including masked textures on images and these don't import into vectr at all, so, I'm back trying to figure out why the svg files from Adobe Ilustrator don't render on canvas and if there is something I can do to get these to work?

If anyone has any experience of this, I would really appreciate any help I can get.

CodePudding user response：

OK! There are a few things going on here and after some head banging with some fantastic folks over on the

A big shout out to @Billy Kerr and @Wolff for helping out on these issues.

Hope this helps someone else here.

Fishbite