JSFiddle - React, Tailwind, and code Playground

by emepyc

JavaScript

var svg = '<svg class="tnt_tracks_svg" width="800" height="180" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect width="10" height="10" fill="red"></rect></svg>';

var src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svg)));

var xml_img = new Image();
xml_img.src = src;
xml_img.onload = function() {
    var canvas = document.createElement('canvas');
    canvas.width = xml_img.width;
    canvas.height = xml_img.height;
    var context = canvas.getContext('2d');
    context.drawImage(xml_img, 0, 0);

    var src = canvas.toDataURL();

    var body = document.querySelector("body");
    var png_img = document.createElement("img");
    png_img.src = src;
    body.appendChild(png_img);
};