fabric.js load svg elements

by Vijay Gujar

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="c" width="800" height="600" class="c"></canvas>
<div>
<button id="svg-load">Load SVG</button>
<select id="option" size="1">
    <option value="group">Group</option>
    <option value="wgroup">Without Group</option>
</select>
</div>

<button id="json">Group</button>
<button id="ugroup">Ungroup</button>

<div id="svg3" class="svg" data-url="mics.svg">
    <?xml version="1.0" encoding="utf-8" ?>
    <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
    <!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="265.77px" height="442.41px" viewBox="0 0 265.77 442.41" enable-background="new 0 0 265.77 442.41" xml:space="preserve">
        <path fill="none" stroke="#999999" stroke-width="10" stroke-miterlimit="10" d="M206.25,222.92c0,40.12-32.85,72.64-73.36,72.64
	l0,0c-40.52,0-73.36-32.52-73.36-72.64V77.64C59.52,37.52,92.37,5,132.88,5l0,0c40.52,0,73.36,32.52,73.36,72.64V222.92z" />
        <path fill="#999999" d="M258.17,198.41v22.35c0,67.79-56.21,122.95-125.29,122.95c-69.09,0-125.29-55.15-125.29-122.95v-22.35H0
	v22.35c0,71.9,59.61,130.4,132.88,130.4s132.88-58.5,132.88-130.4v-22.35H258.17z" />
        <rect x="71.09" y="177.81" fill="#999999" width="123.6" height="14.61" />
        <rect x="71.09" y="427.81" fill="#999999" width="123.6" height="14.61" />
        <rect x="125.58" y="348.81" fill="#999999" width="14.61" height="80" />
        <g>
            <rect x="126.37" y="79.54" fill="#999999" width="13.03" height="13.03" />
            <rect x="169.81" y="79.54" fill="#999999" width="13.03" height="13.03" />
            <rect x="82.93" y="79.54" fill="#999999" width="13.03" height="13.03" />
        </g>
        <g>
            <rect x="126.37"...

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
});

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

var svgData = '<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">' +
           '<foreignObject width="100%" height="100%">' +
           '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:30px">' +
             '<table border="1"><thead><tr><td>Title</td></tr></thead><tbody><tr><td>Id</td><td>char</td></tr></tbody></table>' + 
           '</div>' +
           '</foreignObject>' +
           '</svg>';

    // creating image from svg
    var DOMURL = window.URL || window.webkitURL || window;
    var img = new Image();
    var svg = new Blob([svgData], {type: 'image/svg+xml'});
    var url = DOMURL.createObjectURL(svg);
    img.src = url; 

    var imgInstance = new fabric.Image(img, {
      left: 0,
      top: 0,
      width: 200,
      height: 100,  
    });
    canvas.add(imgInstance);