CANVAS vs SVG

First new version of lady-bug logo in canvas and svg. The SVG has been exported from AI and then converted in CANVAS using Inkscape.

Canvas

fallback if navigator does not support canvas or script is disable

SVG

Look at the code canvas
<style>
canvas{
width:100%;
max-width:219px;
}
</style>
<canvas id="canvas" width="219" height="182">
fallback if navigator does not support canvas or script is disable
</canvas>

<script>
var canvas, ctx;

const init = () => {
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
ctx.scale(0.5,0.5);

// #head
ctx.beginPath();
ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.moveTo(222.250000, 43.664000);
ctx.bezierCurveTo(193.163000, 43.664000, 166.785000, 61.000000, 147.465000, 89.000000);
ctx.bezierCurveTo(150.125000, 117.125000, 193.163000, 129.995000, 222.250000, 129.995000);
ctx.bezierCurveTo(251.555000, 129.995000, 295.750000, 117.375000, 297.466000, 89.000000);
ctx.bezierCurveTo(278.108000, 61.000000, 251.555000, 43.664000, 222.250000, 43.664000);
ctx.fill();

// #body
ctx.beginPath();
ctx.fillStyle = 'rgb(234, 99, 81)';
ctx.moveTo(297.466000, 89.000000);
ctx.bezierCurveTo(296.723000, 111.156000, 263.858000, 129.881000, 222.507000, 129.995000);
ctx.bezierCurveTo(222.631000, 129.995000, 222.753000, 130.000000, 222.877000, 130.000000);
ctx.lineTo(222.124000, 130.000000);
ctx.bezierCurveTo(222.252000, 130.000000, 222.378000, 129.995000, 222.507000, 129.995000);
ctx.bezierCurveTo(181.159000, 129.882000, 148.228000, 111.166000, 147.465000, 89.000000);
ctx.bezierCurveTo(127.755000, 117.602000, 115.000000, 157.059000, 115.000000, 200.999000);
ctx.bezierCurveTo(115.000000, 288.118000, 163.018000, 358.736000, 222.250000, 358.736000);
ctx.bezierCurveTo(281.483000, 358.736000, 329.500000, 288.118000, 329.500000, 200.999000);
ctx.bezierCurveTo(329.500000, 157.370000, 316.930000, 117.555000, 297.466000, 89.000000);
ctx.fill();

// #legs
// leg 1
ctx.beginPath();
ctx.strokeStyle = 'rgb(0, 0, 0)';
ctx.lineWidth = 4.000000;
ctx.lineCap = 'round';
ctx.miterLimit = 10;
ctx.moveTo(101.250000, 35.482000);
ctx.lineTo(142.500000, 55.982000);
ctx.lineTo(150.750000, 85.807000);
ctx.stroke();
//--
ctx.beginPath();
ctx.lineWidth = 4.000000;
ctx.lineCap = 'round';
ctx.miterLimit = 10;
ctx.moveTo(107.918000, 28.193000);
ctx.bezierCurveTo(101.486000, 30.727000, 98.711000, 38.945000, 101.715000, 46.566000);
ctx.stroke();
// leg 2
ctx.beginPath();
ctx.lineWidth = 4.000000;
ctx.lineCap = 'round';
ctx.miterLimit = 10;
ctx.moveTo(344.004000, 35.482000);
ctx.lineTo(302.754000, 55.982000);
ctx.lineTo(294.504000, 85.807000);
ctx.stroke();
//--
ctx.beginPath();
ctx.lineWidth = 4.000000;
ctx.lineCap = 'round';
ctx.miterLimit = 10;
ctx.moveTo(337.336000, 28.193000);
ctx.bezierCurveTo(343.768000, 30.727000, 346.542000, 38.945000, 343.539000, 46.566000);
ctx.stroke();
// leg 3
ctx.beginPath();
ctx.lineWidth = 4.000000;
ctx.lineCap = 'round';
ctx.miterLimit = 10;
ctx.moveTo(17.097000, 180.039000);
ctx.lineTo(78.973000, 143.779000);
ctx.lineTo(119.948000, 157.600000);
ctx.stroke();
//--
ctx.beginPath();
ctx.lineWidth = 4.000000;
ctx.lineCap = 'round';
ctx.miterLimit = 10;
ctx.moveTo(11.900000, 171.483000);
ctx.bezierCurveTo(10.782000, 178.305000, 16.419000, 184.897000, 24.503000, 186.220000);
ctx.stroke();
// leg 4
ctx.beginPath();
ctx.lineWidth = 4.000000;
ctx.lineCap = 'round';
ctx.miterLimit = 10;
ctx.moveTo(427.609000, 180.039000);
ctx.lineTo(365.734000, 143.779000);
ctx.lineTo(324.760000, 157.600000);
ctx.stroke();
//--
ctx.beginPath();
ctx.lineWidth = 4.000000;
ctx.lineCap = 'round';
ctx.miterLimit = 10;
ctx.moveTo(432.807000, 171.483000);
ctx.bezierCurveTo(433.926000, 178.305000, 428.288000, 184.897000, 420.205000, 186.220000);
ctx.stroke();
// leg 5
ctx.beginPath();
ctx.lineWidth = 4.000000;
ctx.lineCap = 'round';
ctx.miterLimit = 10;
ctx.moveTo(86.042000, 336.660000);
ctx.lineTo(86.238000, 264.943000);
ctx.lineTo(118.956000, 236.668000);
ctx.stroke();
//--
ctx.beginPath();
ctx.lineWidth = 4.000000;
ctx.lineCap = 'round';
ctx.miterLimit = 10;
ctx.moveTo(76.032000, 336.791000);
ctx.bezierCurveTo(81.341000, 341.220000, 89.882000, 339.712000, 95.128000, 333.421000);
ctx.stroke();
// leg 6
ctx.beginPath();
ctx.lineWidth = 4.000000;
ctx.lineCap = 'round';
ctx.miterLimit = 10;
ctx.moveTo(358.945000, 336.660000);
ctx.lineTo(358.750000, 264.943000);
ctx.lineTo(326.032000, 236.668000);
ctx.stroke();
//--
ctx.beginPath();
ctx.lineWidth = 4.000000;
ctx.lineCap = 'round';
ctx.miterLimit = 10;
ctx.moveTo(368.955000, 336.791000);
ctx.bezierCurveTo(363.646000, 341.220000, 355.105000, 339.712000, 349.859000, 333.421000);
ctx.stroke();

// #aerialleft
ctx.beginPath();
ctx.lineWidth = 4.000000;
ctx.lineCap = 'round';
ctx.miterLimit = 10;
ctx.moveTo(206.250000, 46.332000);
ctx.lineTo(169.250000, 25.168000);
ctx.lineTo(135.000000, 13.668000);
ctx.stroke();

// #aerial_right
ctx.beginPath();
ctx.lineWidth = 4.000000;
ctx.lineCap = 'round';
ctx.miterLimit = 10;
ctx.moveTo(239.000000, 46.332000);
ctx.lineTo(276.000000, 25.168000);
ctx.lineTo(310.250000, 13.668000);
ctx.stroke();

// #eye_left
ctx.beginPath();
ctx.fillStyle = 'rgb(255, 255, 255)';
ctx.arc(206.334000, 64.667000, 9.667000, 0.000000, 6.28318531, 1);
ctx.fill();

// #eye_right
ctx.beginPath();
ctx.arc(239.334000, 64.667000, 9.667000, 0.000000, 6.28318531, 1);
ctx.fill();

// #spot7
ctx.beginPath();
ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.arc(297.873000, 185.873000, 12.873000, 0.000000, 6.28318531, 1);
ctx.fill();
// #spot6
ctx.beginPath();
ctx.arc(257.498000, 227.498000, 18.498000, 0.000000, 6.28318531, 1);
ctx.fill();
// #spot5
ctx.beginPath();
ctx.arc(274.873000, 299.873000, 12.873000, 0.000000, 6.28318531, 1);
ctx.fill();
// #spot4
ctx.beginPath();
ctx.arc(170.873000, 299.873000, 12.873000, 0.000000, 6.28318531, 1);
ctx.fill();
// #spot3
ctx.beginPath();
ctx.arc(187.498000, 227.498000, 18.498000, 0.000000, 6.28318531, 1);
ctx.fill();
// #spot2
ctx.beginPath();
ctx.arc(146.873000, 185.873000, 12.873000, 0.000000, 6.28318531, 1);
ctx.fill();
// #spot1
ctx.beginPath();
ctx.arc(222.332000, 152.665000, 21.664000, 0.000000, 6.28318531, 1);
ctx.fill();

// #separator_body
ctx.beginPath();
ctx.strokeStyle = 'rgb(94, 94, 94)';
ctx.lineWidth = 4.000000;
ctx.lineCap = 'round';
ctx.miterLimit = 10;
ctx.moveTo(149.008000, 90.287000);
ctx.bezierCurveTo(149.008000, 111.484000, 182.283000, 130.000000, 223.408000, 130.000000);
ctx.lineTo(222.671000, 130.000000);
ctx.bezierCurveTo(263.793000, 130.000000, 295.950000, 111.483000, 295.950000, 90.287000);
ctx.stroke();

// #separator_head
ctx.beginPath();
ctx.lineWidth = 4.000000;
ctx.lineCap = 'round';
ctx.miterLimit = 10;
ctx.moveTo(222.000000, 357.000000);
ctx.lineTo(222.000000, 131.000000);
ctx.stroke();

}
window.onload = init;
</script>
Look at the code svg
<style>
svg{
width:100%;
max-width:219px;
}
</style>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="223px" height="187px" viewBox="0 0 445 374" style="enable-background:new 0 0 445 374;" xml:space="preserve">

<g id="body">
	<path d="M222.25,43.664C193.163,43.664,166.785,61,147.465,89c2.66,28.125,45.698,40.995,74.785,40.995
		c29.305,0,73.5-12.62,75.216-40.995C278.108,61,251.555,43.664,222.25,43.664z"></path>
	<path style="fill:#EA6351;" d="M297.466,89c-0.743,22.156-33.608,40.881-74.959,40.995c0.124,0,0.246,0.005,0.37,0.005h-0.753
		c0.128,0,0.254-0.005,0.383-0.005c-41.348-0.113-74.279-18.829-75.042-40.995C127.755,117.602,115,157.059,115,200.999
		c0,87.119,48.018,157.737,107.25,157.737c59.233,0,107.25-70.618,107.25-157.737C329.5,157.37,316.93,117.555,297.466,89z"></path>
</g>
<g id="leg1">
	<polyline id="leg" style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" points="
		101.25,35.482 142.5,55.982 150.75,85.807 	"></polyline>
	<path id="fingers" style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" d="
		M107.918,28.193c-6.432,2.534-9.207,10.752-6.203,18.373"></path>
</g>
<g id="leg6">
	<polyline id="leg_2_" style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" points="
		344.004,35.482 302.754,55.982 294.504,85.807 	"></polyline>
	<path id="fingers_2_" style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" d="
		M337.336,28.193c6.432,2.534,9.206,10.752,6.203,18.373"></path>
</g>
<g id="leg2">
	<polyline id="leg_1_" style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" points="
		17.097,180.039 78.973,143.779 119.948,157.6 	"></polyline>
	<path id="fingers_1_" style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" d="
		M11.9,171.483c-1.118,6.822,4.519,13.414,12.603,14.737"></path>
</g>
<g id="leg5">
	<polyline id="leg_3_" style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" points="
		427.609,180.039 365.734,143.779 324.76,157.6 	"></polyline>
	<path id="fingers_3_" style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" d="
		M432.807,171.483c1.119,6.822-4.519,13.414-12.602,14.737"></path>
</g>
<g id="leg2_1_">
	<polyline id="leg_4_" style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" points="
		86.042,336.66 86.238,264.943 118.956,236.668 	"></polyline>
	<path id="fingers_4_" style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" d="
		M76.032,336.791c5.309,4.429,13.85,2.921,19.096-3.37"></path>
</g>
<g id="leg2_2_">
	<polyline id="leg_5_" style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" points="
		358.945,336.66 358.75,264.943 326.032,236.668 	"></polyline>
	<path id="fingers_5_" style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" d="
		M368.955,336.791c-5.309,4.429-13.85,2.921-19.096-3.37"></path>
</g>
<polyline id="aerialleft" style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" points="
	206.25,46.332 169.25,25.168 135,13.668 "></polyline>
<polyline id="aerial_right" style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" points="
	239,46.332 276,25.168 310.25,13.668 "></polyline>
<circle id="eye_lefy" style="fill:#FFFFFF;" cx="206.334" cy="64.667" r="9.667"></circle>
<circle id="eye_right" style="fill:#FFFFFF;" cx="239.334" cy="64.667" r="9.667"></circle>
<circle id="spot7" cx="297.873" cy="185.873" r="12.873"></circle>
<circle id="spot6" cx="257.498" cy="227.498" r="18.498"></circle>
<circle id="spot5" cx="274.873" cy="299.873" r="12.873"></circle>
<circle id="spot4" cx="170.873" cy="299.873" r="12.873"></circle>
<circle id="spot3" cx="187.498" cy="227.498" r="18.498"></circle>
<circle id="spot2" cx="146.873" cy="185.873" r="12.873"></circle>
<circle id="spot1" cx="222.332" cy="152.665" r="21.664"></circle>
<path id="separator_body" style="fill:none;stroke:#5E5E5E;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" d="
	M149.008,90.287c0,21.197,33.275,39.713,74.4,39.713h-0.737c41.122,0,73.279-18.517,73.279-39.713"></path>
<line id="separator_head" style="fill:none;stroke:#5E5E5E;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="222" y1="357" x2="222" y2="131"></line>
</svg>