canvg playground

by hajime_nagahata

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/canvg/1.4/rgbcolor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stackblur-canvas/1.4.1/stackblur.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js"></script>
<canvas id="canvas" width="800px" height="600px"></canvas>

JavaScript

svg = '<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><svg version="1.1" id="_x31_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 width="31.6px" height="10.22px" viewBox="0 0 31.6 10.22" enable-background="new 0 0 31.6 10.22" xml:space="preserve"><g id="LINE">	<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="6.3" y1="10.22" x2="25.3" y2="10.22"/></g><g id="LINE_1_">	<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="25.8" y1="9.82" x2="25.8" y2="0.5"/></g><g id="LINE_2_">	<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="25.4" y1="0" x2="6.3" y2="0"/></g><g id="LINE_3_">	<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="5.8" y1="0.4" x2="5.8" y2="9.72"/></g><g id="ARC">	<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M6.3,0C6.02,0,5.8,0.22,5.8,0.5"/></g><g id="ARC_1_">	<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M5.8,9.72c0,0.28,0.22,0.5,0.5,0.5"/></g><g id="ARC_2_">	<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M25.3,10.22c0.28,0,0.5-0.22,0.5-0.5"/></g><g id="ARC_3_">	<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M25.8,0.5c0-0.28-0.22-0.5-0.5-0.5"/></g><g id="CIRCLE">	<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M0,5.11c0,0.99,0.81,1.8,1.8,1.8s1.8-0.81,1.8-1.8s-0.81-1.8-1.8-1.8		S0,4.12,0,5.11L0,5.11z"/></g><g id="CIRCLE_1_">	<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M28,5.11c0,0.99,0.81,1.8,1.8,1.8c0.99,0,1.8-0.81,1.8-1.8		s-0.81-1.8-1.8-1.8C28.81,3.31,28,4.12,28,5.11L28,5.11z"/></g></svg>';

canvg(document.getElementById('canvas'), svg);