JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="16" height="16"></canvas>
<img id="output-img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="border: 1px solid black; width: 16px; height: 16px;">

JavaScript

var svgData = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><image x="0" y="0" width="16" height="16" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACNUlEQVR4AXWSQWsTURDH523qUqKweAn5AJ5FMODBSkkPDXgIFTTYhh5iDCwSRCQmioamkGIpKvbQgz1YTNGDX0Bv+gFyCvkEXRSSPWitMcnuvjfOPMxTGx34738y+35/5pEFRITVB6/trb0P3rP9jz71Ds/+pcVrdef2+p5fqOx4FxYLNs/4xVTI8r1XUyELV2qO+2jXX7373Du/sKJhEzBR/v6+vbH73tt48c7P3nhqQuazd5xibcdfLj/xzs3nDDwVwFq6uW3Xtt4eVDbf+OmlinPx8i2nUNn2c+7mwdlLVw08keBHtVpdB4CH3HOxJxKJGPdSSlBKQa/XkxOIZ4PBYKPVaq3N/ALqZ64/FnCsOE+SlEJQQxn79C2EoaQ5AHx5uVInW7OAKh6Pi8RJAZaYhiN6fD4MwSNFSkBMADAUhqE+bU1WnqVdkqcEzFi/4VEgwfsawFGgCCTYYoAkhL4GF2E6DUIJuk7PCvB/IIzGEvzvEaACDWuSehTaTYDeIAgCCBQ5zUJyWyAcjviAAM2SmBM014CAvzfgH7yB4tWVgiNKidsWzQggQp8lWKAA1NixgCiKYCxRrzuMkEJA3/NEDCEKxZ+wkVLKBOgrDMao1x+GBFG4RCQRRDAoobczMKAJ0P9AuVzGZrOJxWIRe3NzmM/nMZfLYaPRwGw2qz2TyWhPp9NYKpUwlUqh+RJd18VkMsn3+q+UUsZZnU4H2u220Ffo9/vQ7XbNSxYFT/XsLCrjPwHIqeN1LXEYAQAAAABJRU5ErkJggg=="/></svg>';

var image = new Image();
image.onload = function () {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.drawImage(image, 0, 0);
    var dataURL = canvas.toDataURL();

    document.getElementById("output-img").src = dataURL;
};
var dataURL = "data:image/svg+xml," + encodeURIComponent(svgData);
image.src = dataURL;