JSFiddle - React, Tailwind, and code Playground

by Andrew Pougher

HTML

<script src="https://gabelerner.github.io/canvg/canvg.js"></script>
<script src="https://gabelerner.github.io/canvg/rgbcolor.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//cdn.rawgit.com/MrRio/jsPDF/master/dist/jspdf.min.js"></script>
<script src="//cdn.rawgit.com/niklasvh/html2canvas/0.5.0-alpha2/dist/html2canvas.min.js"></script>
 <div id="artboard">

<section>
<h2> <div class="btn btn-xs" id="create_pdf">Create PDF</div>
Scale multiple SVG to Base64 and save to file PDF / JPG
</h2>
  <header>
    <h1>SVG:</h1></header>
  <div id='svg-container'>
  <svg width="97" height="100" xmlns="http://www.w3.org/2000/svg">
<path d="m37.674,54.126c7.482,0 10.953,5.679 11.683,13.745c0.174,1.93 -0.008,4.743 -0.255,8.001c-0.841,10.825 -1.808,24.128 5.4,24.128c6.096,0 9.228,-11.695 11.035,-25.027c1.745,-13.197 -0.103,-19.765 0.806,-25.625c1.73299,-11.103 11.425,-21.058 8.431,-35.214c-1.658,-7.853 -5.982,-11.547 -10.266,-13.1c-9.868,-3.592 -16.239,3.329 -26.834,3.329s-16.966,-6.921 -26.839,-3.329c-4.28,1.553 -8.604,5.247 -10.266,13.1c-2.99,14.156 6.698,24.111 8.435,35.214c0.908,5.86 -0.939,12.427 0.806,25.625c1.807,13.331 4.94,25.027 11.035,25.027c7.205,0 6.242,-13.303 5.4,-24.127c-0.248,-3.258 -0.428,-6.071 -0.255,-8.001c0.727,-8.067 4.244,-13.746 11.684,-13.746z"></path>
</svg>
  </div>
</section>
<section>
  <header>
    <h1>Canvas:</h1></header>
  <canvas id="svg-canvas"></canvas>
</section>
<section>
  <header>
    <h1>PNG:</h1></header>
  <img id="svg-img" />
</section>

<section>
  <header>
    <h1>PNG Andrew:</h1></header>
  <img id="andrew" />
</section>
</div>

CSS

section {
  min-height: 175px;
}

h1 {
  font-size: 70%
}

.ui-resizable-handle {
  position: absolute;
  border: 1px solid black;
  background-color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px
}

JavaScript

var $container = $('#svg-container'),
      // Canvg requires trimmed content
      content = $container.html().trim(),
      canvas = document.getElementById('svg-canvas');

    // Draw svg on canvas
    canvg(canvas, content);
    
var data = canvas.toDataURL("image/png")//( "image/jpeg", 0.5 );
var img = new Image();
img.src = data;
$( "body" ).append( img );
$('#andrew').attr('src', data).draggable().resizable({
      aspectRatio: true,
      handles: 'ne,se'
    });

    // Change img be SVG representation
    var theImage = canvas.toDataURL('image/png');
    $('#svg-img').attr('src', theImage).draggable({
      opacity: .75,
      revert: false,
      snap: false
    }).resizable({
      aspectRatio: true,
      handles: 'ne,se',
      autoHide: true
    });
    $('#svg-container').draggable({
      opacity: .75,
      revert: false,
      snap: false
    }).resizable({
      aspectRatio: true,
      autoHide: true,
      handles: 'ne,se,sw',
       resize: function( event, ui ) { 
       	var rwidth =  ui.element.width();
   
					var rheight =  ui.element.height();
               console.log(rwidth +' x '+ rheight)
       var changesvg = document.querySelectorAll('#svg-container');
         // var changesvg = document.getElementsByTagName('svg')[0];
         var svgholder = document.getElementById("svg-container")[0];
			var svg = svgholder.outerHTML;
console.log(svgholder)
          var i;
		    for (i = 0; i < changesvg.length; i++) {
			    var mysvg =   changesvg[i];	

		         [].forEach.call(mysvg.querySelectorAll("path, circle, ellipse, polygon, line, rect, polyline"), function(p) {
			          p.style.fill =  "lightblue";
			          p.setAttribute("fill",  "lightblue");
			          p.setAttribute("height", rheight);
                 p.setAttribute("width", rwidth);
    
  
			          p.style.width=rwidth;
					  p.style.height=rheight;
			        });
			     };
       canvas.width=rwidth, canvas.height=rheight;
       }
       
    });
   ...