Canvas SVG to image

Adding a SVG to a canvas makes it invisible when creating the data url.

HTML

<button onclick="generateLogo()">Generate image</button>
<button onclick="toSvg()">Generate image</button>
<canvas id="canvas"></canvas>

JavaScript

var canvas = new fabric.Canvas('canvas');
              
function generateLogo() {
  canvas.clear();
  
  var svgString = "<svg xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' version='1.1' width='400' height='400'> <g><path d='M57.2461,75.0045 C57.2461,75.0045 102.605,89.8415 102.605,89.8415 C102.605,89.8415 55.5504,101.286 55.5504,101.286 C55.5504,101.286 62.7569,89.4175 62.7569,89.4175 C62.7569,89.4175 57.2461,75.0045 57.2461,75.0045 Z' style='stroke:none;fill-rule:evenodd;fill:#fc1997;fill-opacity:1;'/></g></svg>";
  
  //fabric.loadSVGFromString(svgString, function(results, options) {
  //  var arrow = results[0];
  //  canvas.add(arrow);
  //});
  
  var site_url = 'http://fabricjs.com/assets/1.svg';

  fabric.loadSVGFromURL(site_url, function(objects) {
    var group = new fabric.PathGroup(objects, {
      left: 165,
      top: 100,
      width: 295,
      height: 211
    });
    canvas.add(group);
    canvas.renderAll();
  });


}

function toSvg(){
	var newWin = open('about:blank;','windowName','height=300,width=300');
	newWin.document.write(canvas.toSVG());
}