loadSVGFromString probrem

by SooChangLee

HTML

loadSVGFromURL
<div class="div_background">
  <canvas id="html_canvas_source" width="500" height="300"></canvas>  
</div>

loadSVGFromString
<div class="div_background">
  <canvas id="html_canvas_target" width="500" height="300"></canvas>
</div>

<script src="http://fabricjs.com/lib/fabric.js"></script>

CSS

canvas {
	background:url(
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAB1JREFUGBljZGBgkARiogBRCpmIMgqoaFQh3pACAFoHAEQoNnJ9AAAAAElFTkSuQmCC
	) repeat;
}
.div_background {
  width: 500px;
  border-style: dashed; 
  border-width: 1px;
  margin-bottom: 10px;
}

JavaScript

var canvas_source;
var canvas_target;

$(document).ready(function(){
	canvas_source = new fabric.Canvas('html_canvas_source', {});
  canvas_target = new fabric.Canvas('html_canvas_target', {});
 
 fabric.loadSVGFromURL("http://fabricjs.com/assets/69.svg", function(objects, options){
   var svg_group = new fabric.Group(objects);
   svg_group.set({
     left: 0,
     top: 0,
     originX: 'left',
     originY: 'top'
   });
   canvas_source.add(svg_group);
 });
 
 var string_69 = "<?xml version=\"1.0\" encoding=\"utf-8\"?><!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\"><svg version=\"1.1\" id=\"Layer_1\"	 xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" width=\"512px\" height=\"512px\"	 viewBox=\"0 0 512 512\" enable-background=\"new 0 0 512 512\" xml:space=\"preserve\"><switch>	<g>		<g>			<!-- If you would like to customize the color of the badge, these two HSL colors are the primary oranges -->			<!--  The second one needs to be +6 hue, +9% saturation, and +3% lightness of the first -->			<polygon fill=\"hsl(13, 77%, 52%)\" points=\"107.644,470.877 74.633,100.62 437.367,100.62 404.321,470.819 255.778,512 			\"/>			<polygon fill=\"hsl(18, 86%, 55%)\" points=\"256,480.523 376.03,447.246 404.27,130.894 256,130.894 			\"/>			<g>				<polygon fill=\"#EBEBEB\" points=\"256,268.217 195.91,268.217 191.76,221.716 256,221.716 256,176.305 255.843,176.305 					142.132,176.305 143.219,188.488 154.38,313.627 256,313.627 				\"/>				<polygon fill=\"#EBEBEB\" points=\"256,386.153 255.801,386.206 205.227,372.55 201.994,336.333 177.419,336.333 156.409,336.333 					162.771,407.634 255.791,433.457 256,433.399 				\"/>			</g>			<g>				<path d=\"M108.382,0h23.077v22.8h21.11V0h23.078v69.044H152.57v-23.12h-21.11v23.12h-23.077V0z\"/>				<path d=\"M205.994,22.896h-20.316V0h63.72v22.896h-20.325v46.148h-23.078V22.896z\"/>				<path...