Add svg rendering with fabric.js

src/imageloader.js

@@ -34,6 +34,8 @@ ImageLoader.prototype.loadImage = function(imageData) {
         var src = imageData.args[0];
         if (src.match(/data:image\/.*;base64,/i)) {
             return new ImageContainer(src.replace(/url\(['"]{0,}|['"]{0,}\)$/ig, ''), false);
+        } else if (/(.+).svg$/i.test(src)) {
+            return new SVGContainer(src);
         } else if (this.isSameOrigin(src) || this.options.allowTaint === true) {
             return new ImageContainer(src, false);
         } else if (this.support.cors && !this.options.allowTaint && this.options.useCORS) {

src/svgcontainer.js

@@ -0,0 +1,19 @@
+function SVGContainer(src) {
+    this.src = src;
+    this.image = null;
+    var self = this;
+    this.promise = XHR(src).then(function(svg) {
+        return new Promise(function(resolve) {
+            html2canvas.fabric.loadSVGFromString(svg, function (objects, options) {
+                var canvas = new html2canvas.fabric.StaticCanvas('c');
+                self.image = canvas.lowerCanvasEl;
+                canvas
+                    .setWidth(options.width)
+                    .setHeight(options.height)
+                    .add(html2canvas.fabric.util.groupSVGElements(objects, options))
+                    .renderAll();
+                resolve(canvas.lowerCanvasEl);
+            });
+        });
+    });
+}

src/xhr.js

@@ -0,0 +1,20 @@
+function XHR(url) {
+    return new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open('GET', url);
+
+        xhr.onload = function() {
+            if (xhr.status === 200) {
+                resolve(xhr.response);
+            } else {
+                reject(Error(xhr.statusText));
+            }
+        };
+
+        xhr.onerror = function() {
+            reject(Error("Network Error"));
+        };
+
+        xhr.send();
+    });
+}