Added ability for the Loader to handle loading SVG files and creating Images from them (for use as Sprite textures)

Author: photonstorm

v3/src/checksum.js

@@ -1,4 +1,4 @@
 var CHECKSUM = {
-build: '8a8de700-18cc-11e7-bc06-b1929cecfc5e'
+build: '7ca218d0-18d8-11e7-adaa-6d4ae57a90ac'
 };
 module.exports = CHECKSUM;

v3/src/loader/filetypes/ImageFile.js

@@ -2,7 +2,7 @@
 var CONST = require('../const');
 var File = require('../File');
 
-var ImageFile = function (key, url, path, xhrSettings, options)
+var ImageFile = function (key, url, path, xhrSettings, config)
 {
     if (path === undefined) { path = ''; }
 
@@ -20,7 +20,7 @@ var ImageFile = function (key, url, path, xhrSettings, options)
         url = path.concat(url);
     }
 
-    File.call(this, 'image', key, url, 'blob', xhrSettings, options);
+    File.call(this, 'image', key, url, 'blob', xhrSettings, config);
 };
 
 ImageFile.prototype = Object.create(File.prototype);

v3/src/loader/filetypes/SVGFile.js

@@ -0,0 +1,88 @@
+
+var CONST = require('../const');
+var File = require('../File');
+
+var SVGFile = function (key, url, path, xhrSettings)
+{
+    if (path === undefined) { path = ''; }
+
+    if (!key)
+    {
+        throw new Error('Error calling \'Loader.svg\' invalid key provided.');
+    }
+
+    if (!url)
+    {
+        url = path + key + '.svg';
+    }
+    else
+    {
+        url = path.concat(url);
+    }
+
+    File.call(this, 'svg', key, url, 'text', xhrSettings);
+};
+
+SVGFile.prototype = Object.create(File.prototype);
+SVGFile.prototype.constructor = SVGFile;
+
+SVGFile.prototype.onProcess = function (callback)
+{
+    this.state = CONST.FILE_PROCESSING;
+
+    var svg = [ this.xhrLoader.responseText ];
+
+    try
+    {
+        var blob = new window.Blob(svg, { type: 'image/svg+xml;charset=utf-8' });
+    }
+    catch (e)
+    {
+        _this.state = CONST.FILE_ERRORED;
+
+        callback(_this);
+
+        return;
+    }
+
+    this.data = new Image();
+
+    this.data.crossOrigin = this.crossOrigin;
+
+    var _this = this;
+    var retry = false;
+
+    this.data.onload = function ()
+    {
+        URL.revokeObjectURL(_this.data.src);
+
+        _this.onComplete();
+
+        callback(_this);
+    };
+
+    this.data.onerror = function ()
+    {
+        URL.revokeObjectURL(_this.data.src);
+
+        //  Safari 8 re-try
+        if (!retry)
+        {
+            retry = true;
+
+            var url = 'data:image/svg+xml,' + encodeURIComponent(svg.join(''));
+
+            _this.data.src = URL.createObjectURL(url);
+        }
+        else
+        {
+            _this.state = CONST.FILE_ERRORED;
+
+            callback(_this);
+        }
+    };
+
+    this.data.src = URL.createObjectURL(blob);
+};
+
+module.exports = SVGFile;

v3/src/state/systems/Loader.js

@@ -11,6 +11,7 @@ var TextFile = require('../../loader/filetypes/TextFile');
 var AtlasJSONFile = require('../../loader/filetypes/AtlasJSONFile');
 var BitmapFontFile = require('../../loader/filetypes/BitmapFontFile');
 var SpriteSheet = require('../../loader/filetypes/SpriteSheet');
+var SVGFile = require('../../loader/filetypes/SVGFile');
 
 var ParseXMLBitmapFont = require('../../gameobjects/bitmaptext/ParseXMLBitmapFont');
 
@@ -55,6 +56,7 @@ Loader.prototype.file = function (file)
         case 'binary':
         case 'text':
         case 'glsl':
+        case 'svg':
             entry = this[file.type](file.key, file.url, file.xhrSettings);
             break;
 
@@ -150,6 +152,13 @@ Loader.prototype.bitmapFont = function (key, textureURL, xmlURL, textureXhrSetti
     return this;
 };
 
+Loader.prototype.svg = function (key, url, xhrSettings)
+{
+    var file = new SVGFile(key, url, this.path, xhrSettings);
+
+    return this.addFile(file);
+};
+
 Loader.prototype.multiatlas = function (key, textureURLs, atlasURLs, textureXhrSettings, atlasXhrSettings)
 {
     if (typeof textureURLs === 'number')
@@ -266,6 +275,7 @@ Loader.prototype.processCallback = function ()
         switch (file.type)
         {
             case 'image':
+            case 'svg':
                 textures.addImage(file.key, file.data);
                 break;