I'm trying to drag and drop svg img that are outside the canvas to the canvas himself, it does work with simple images (png, jpg, gif) but not with svg files and since I'm new to fabricJS I was wondering how I could configure it so it also works with SVG.
I do not want to create an fabric.Image object from SVGs, i would like to drop them as fabric.PathGroup so that they mantain the vector information and edit capabilities.

You can discover the project on this link :

<http://jsfiddle.net/w8kkc/309/>

**HTML**

```
<div id="images">
    <img draggable="true" src="http://i.imgur.com/8rmMZI3.jpg" width="100" height="100">
    <object draggable="true" type="image/svg+xml" data="http://fabricjs.com/assets/1.svg" width="100" height="100"></object>
</div>

<div id="canvas-container">
    <canvas id="canvas" width="400" height="250"></canvas>
</div>

```

---

**Javascript (FabricJS)**

```
var canvas = new fabric.Canvas('canvas');

function handleDragStart(e) {
    [].forEach.call(images, function (img) {
        img.classList.remove('img_dragging');
    });
    this.classList.add('img_dragging');
}

function handleDragOver(e) {
    if (e.preventDefault) {
        e.preventDefault(); // Necessary. Allows us to drop.
    }

    e.dataTransfer.dropEffect = 'copy'; // See the section on the DataTransfer object.
    // NOTE: comment above refers to the article (see top) -natchiketa

    return false;
}

function handleDragEnter(e) {
    // this / e.target is the current hover target.
    this.classList.add('over');
}

function handleDragLeave(e) {
    this.classList.remove('over'); // this / e.target is previous target element.
}

function handleDrop(e) {
    if (e.preventDefault) {
      e.preventDefault(); 
    }

    if (e.stopPropagation) {
        e.stopPropagation(); // stops the browser from redirecting.
    }

    var img = document.querySelector('#images img.img_dragging');

    // console.log('event: ', e);

    var newImage = new fabric.Image(img, {
        width: img.width,
        height: img.height,
        // Set the center of the new object based on the event coordinates relative
        // to the canvas container.
        left: e.layerX,
        top: e.layerY
    });
    canvas.add(newImage);

    return false;
}

function handleDragEnd(e) {
    // this/e.target is the source node.
    [].forEach.call(images, function (img) {
        img.classList.remove('img_dragging');
    });
}

if (Modernizr.draganddrop) {
    // Browser supports HTML5 DnD.

    // Bind the event listeners for the image elements
    var images = document.querySelectorAll('#images img');
    [].forEach.call(images, function (img) {
        img.addEventListener('dragstart', handleDragStart, false);
        img.addEventListener('dragend', handleDragEnd, false);
    });
    // Bind the event listeners for the canvas
    var canvasContainer = document.getElementById('canvas-container');
    canvasContainer.addEventListener('dragenter', handleDragEnter, false);
    canvasContainer.addEventListener('dragover', handleDragOver, false);
    canvasContainer.addEventListener('dragleave', handleDragLeave, false);
    canvasContainer.addEventListener('drop', handleDrop, false);
} else {
    // Replace with a fallback to a library solution.
    alert("This browser doesn't support the HTML5 Drag and Drop API.");
}

```

Any suggestion on how I can accept SVG to be drag and dropped into the canvas ?