JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://gabelerner.github.io/canvg/rgbcolor.js"></script>
<script src="http://gabelerner.github.io/canvg/StackBlur.js"></script>
<script src="http://gabelerner.github.io/canvg/canvg.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<div id="svg"></div>
<canvas id="canvas"></canvas>

CSS

#svg{ width: 200px ; height: 200px ; background: red ; position: relative ; }

/* this is being ignored */
svg{ position: absolute !important ; left: 0 ; top: 0 ; width: 100% ; margin: 0 auto !important; }

JavaScript

$(function(){
  paper = Raphael( 'svg' );
  paper.setSize('80%', '80%');
  paper.setViewBox(0,0,400,400,true);
  paper.circle(200, 200, 100).attr("fill", "#00ff00"); 
    
  paper = Raphael( 'svg' );
  paper.setSize('100%', '100%');
  paper.setViewBox(0,0,400,400,true);     
  paper.circle(200, 200, 200).attr("fill", "#ffffff");
    
  var content = $('#svg').html() ;
  canvg('canvas', "<svg>"+content+"</svg>");
}) ;