JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<svg id="svg" width="200" height="200" viewBox="0 0 24 24" fill="none" color="red">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M15.9991 13.0039L9.99907 12.9911L9.99054 16.9911L15.9905 17.0039L15.9991 13.0039Z" fill="currentColor" fill-opacity="0.5" />
  <path fill-rule="evenodd" clip-rule="evenodd" d="M19.978 18.0021L20.0036 6.00214L18.0036 5.99788L17.978 17.9979L19.978 18.0021Z" fill="currentColor" />
  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.9964 10.9851L15.9964 11.0107L16.0049 7.0107L4.00493 6.98512L3.9964 10.9851Z" fill="currentColor" />
</svg>
<img />
<canvas id="canvas1" width="200" height="200"></canvas>

CSS

canvas {
    border: 1px solid gray;
}
img {
  display:none;
}

JavaScript

var can = document.getElementById('canvas1');
var img = document.querySelector('img');
var ctx = can.getContext('2d');
var svg = document.getElementById('svg');
var xml = new XMLSerializer().serializeToString(svg);
// make it base64
var svg64 = btoa(xml);
var b64Start = 'data:image/svg+xml;base64,';

// prepend a "header"
var image64 = b64Start + svg64;
// set it as the source of the img element
img.onload = function() {
    // draw the image onto the canvas
    can.getContext('2d').drawImage(img, 0, 0);
}
img.src = image64;


/*var path = new Path2D('M 100,100 h 50 v 50 h 50');
ctx.stroke(path);*/