JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="something" data-svg="<svg viewBox='0 0 105 93' width='105' height='93' xmlns='http://www.w3.org/2000/svg'><path d='M66,0h39v93zM38,0h-38v93zM52,35l25,58h-16l-8-18h-18z' fill='#ED1C24'/></svg>">

</div>

JavaScript

$(function() {
  
  var svgData = $('#something').data('svg');
  var imageUrl = svgToImageURL(svgData);
 

  function svgToImageURL(svgString){
    //var svgString = new XMLSerializer().serializeToString(svgData);
    console.log('svgString = ' + svgString);
    var canvas = document.createElement("canvas");
    canvas.width = 260;		// Minimum width required to cover all potential favicon scenarios
    canvas.height = 260;	// Minimum height required to cover all potential favicon scenarios
    var ctx = canvas.getContext("2d");
    var DOMURL = self.URL || self.webkitURL || self;
    var img = new Image();
    var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
    var url = DOMURL.createObjectURL(svg);
    console.log('url = ' + url);
    img.onload = function() {
      ctx.drawImage(img, 0, 0);
      var png = canvas.toDataURL("image/png");
      document.getElementById('something').innerHTML = '<img src="'+png+'"/>';
      console.log(png);
      DOMURL.revokeObjectURL(png);
    };
    img.src = url;
  }
  
});