SVG to PNG

Marks SVG to PNG with canvg

by Mark Beharrell

HTML

<script src="https://canvg.github.io/canvg/rgbcolor.js"></script>
<script src="https://canvg.github.io/canvg/StackBlur.js"></script>
<script src="https://canvg.github.io/canvg/canvg.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!--[if lt IE 9]>
		<script type="text/javascript" src="flashcanvas.js"></script>
		<![endif]-->

<h1 id="title">SUPER SIMPLE SVG TO PNG</h1>
<div id="chart">
  
</div>

JavaScript

var svgMarkup = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="dxc dxc-chart" direction="ltr" fill="none" stroke="none" stroke-width="0" style="line-height:normal;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);display:block;overflow:hidden;touch-action:pan-x pan-y pinch-zoom;-ms-touch-action:pan-x pan-y pinch-zoom;" width="572" height="325" onclick="void(0)"><rect x="0" y="0" width="572" height="325" transform="translate(0,0)" fill="gray" opacity="0.0001"></rect><defs><clipPath id="DevExpress_9"><rect x="0" y="0" width="572" height="325" transform="translate(0,0)"></rect></clipPath><pattern id="DevExpress_10" width="6" height="6" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="#0099cc" opacity="0.75"></rect><path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="#0099cc"></path></pattern><pattern id="DevExpress_11" width="6" height="6" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="#0099cc" opacity="0.5"></rect><path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="#0099cc"></path></pattern><pattern id="DevExpress_12" width="6" height="6" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="#f15f35" opacity="0.75"></rect><path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="#f15f35"></path></pattern><pattern id="DevExpress_13" width="6" height="6" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="#f15f35" opacity="0.5"></rect><path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="#f15f35"></path></pattern><clipPath id="DevExpress_14"><rect x="92" y="10" width="480" height="281" transform="translate(0,0)"></rect></clipPath><clipPath id="DevExpress_15"><rect x="92" y="10" width="480" height="281"...