JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
<script src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
<canvas width="350" height="200"></canvas>
<canvas width="350" height="200"></canvas>

CSS

body { background:#eee }
canvas { display:block; background:#fff; border:1px solid #ccc; margin:1em auto }

JavaScript

var canvases = document.querySelectorAll('canvas');
var original = getSVG();
var cropped  = original .replace(/viewBox="[^"]+"/,'viewBox="150 80 400 420"');
canvg( canvases[0], original );
canvg( canvases[1], cropped  );

// Since I can't use XMLHTTP to fetch from another domain
function getSVG(){ return '<?xml version="1.0" encoding="UTF-8" standalone="no"?>\
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="150 80 700 620">\
<style type="text/css">.heart { fill:rgba(100,0,0,0.5) }</style>\
<path id="heart" class="heart" d="M410,652 C408,651 405,649 405,649 C404,649 406,646 409,643 C424,628 428,605 419,583 C406,549 370,510 289,446 C208,382 195,371 183,352 C175,340 165,317 161,301 C156,284 156,253 160,237 C172,195 204,163 245,155 C261,151 271,151 288,155 C318,161 342,175 369,202 L389,221 L391,209 C392,201 396,191 401,181 C407,168 411,163 424,150 C442,132 455,124 477,117 C488,114 494,113 511,113 C537,114 554,118 579,130 C617,148 640,173 651,210 C656,228 657,264 654,286 C650,308 644,329 633,355 C603,431 536,516 490,537 C479,543 469,545 469,542 C469,540 477,530 509,498 C539,467 567,433 585,405 C599,384 619,345 625,325 C639,285 640,242 630,212 C618,178 583,148 542,137 C525,133 494,133 479,138 C449,148 428,172 417,207 C411,225 408,240 407,267 L406,287 L400,287 C395,287 394,287 388,273 C373,240 366,227 356,215 C333,188 304,173 271,173 C221,173 184,208 180,258 C178,283 185,317 197,338 C206,353 240,387 266,406 C277,414 297,429 310,438 C364,478 379,493 407,536 C430,570 444,604 444,623 C444,642 424,659 410,652 L410,652 z" />\
<g id="exclamation-point" transform="translate(0,-150) scale(1.5)">\
   <path class="heart" d="M479.5,524.5c-14.2-3.5-17.9,24.7-0.1,25.8c17.4,1,16.6-21,1.1-24.8"/>\
   <path class="heart" d="M481.2,506.7c3.1,1.9,18.4-16.2,19.7-20.4c6.1-18.7,6.2-41.3,8.8-60.9c2.9-22.2,5.2-44.6,9.4-66.6 c12.2-63.9,22.1-115.2,12.9-196.7c-0.6-5.2-13,18-13.4,19.6c-2.2,9.6-2.7,19.6-3,29.4c-0.5,17.9,2,36.1,0.8,53.9...