fabric.js load svg elements

by Vijay Gujar

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="300" height="300" class="c"></canvas>
<div>
<button id="svg-load">Load SVG</button>
<select id="svg-select" size="1">
    <option value="svg1">Heart</option>
</select>
</div>

<button id="fill">Fill</button>


<div id="svg1" class="svg" data-url="heart.svg">
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">

  <!-- to hide the path, it is usually wrapped in a <defs> element -->
  <!-- <defs> -->
  <path id="MyPath" fill="none" stroke="red"
        d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
  <!-- </defs> -->

  <text>
    <textPath href="#MyPath">
      Quick brown fox jumps over the lazy dog.
    </textPath>
  </text>

</svg>
    
    
</div>

CSS

.canvas-container {
    border: 1px solid #999;
}
.svg {
    display: none;
}

JavaScript

// Do some initializing stuff
fabric.Object.prototype.set({
    transparentCorners: false,
    cornerColor: 'rgba(102,153,255,0.5)',
    cornerSize: 12,
    padding: 5,
    statefullCache:true
});

var canvas = window._canvas = new fabric.Canvas('c');

function loadSVG(id) {
    var elem = document.getElementById(id),
        svgStr = elem.innerHTML;
    
    fabric.loadSVGFromString(svgStr, function(objects, options) {
       // Group elements to fabric.PathGroup (more than 1 elements) or
       // to fabric.Path
       var loadedObject = fabric.util.groupSVGElements(objects, options);
       // Set sourcePath
       loadedObject.set('sourcePath', elem.getAttribute('data-url'));

       canvas.add(loadedObject);
       loadedObject.center().setCoords();
       canvas.renderAll();
    });
}

document.getElementById('svg-load').addEventListener('click', function() {
    var elem = document.getElementById('svg-select'),
        value = elem.options[elem.selectedIndex].value;
    loadSVG(value);
});


document.getElementById('fill').addEventListener('click', function() {
    //canvas.getActiveObject().set({fill: '#00FF00'});
    var object = canvas.getActiveObject();
    if (object.paths) {
			  		for (var i = 0; i < object.paths.length; i++) {
				      object.paths[i]['fill'] = '#00FF00';
				    }
			    }
          
    //object['fill'] = '#00FF00';
    canvas.renderAll();
 });
 
 var svgData = '<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path id="MyPath" fill="none" stroke="red" d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" /> <text> <textPath href="#MyPath">Quick brown fox jumps over the lazy dog.</textPath>  </text></svg>';
           
 var DOMURL = window.URL || window.webkitURL || window;
    var img = new Image();
    var svg1 = new Blob([svgData], {type: 'image/svg+xml'});
    var url = DOMURL.createObjectURL(svg1);
    img.src = url; 

    var imgInstance = new fabric.Image(img, {
      left: 0,
     ...