expose the async nature of createSVGSkin and updateSVGSkin

src/RenderWebGL.js

@@ -350,12 +350,13 @@ class RenderWebGL extends EventEmitter {
      * @param {!string} svgData - new SVG to use.
      * @param {?Array<number>} rotationCenter Optional: rotation center of the skin. If not supplied, the center of the
      * skin will be used
+     * @param {function} [onSkinReady] - Optional: if present, will be called after the skin loads
      * @returns {!int} the ID for the new skin.
      */
-    createSVGSkin (svgData, rotationCenter) {
+    createSVGSkin (svgData, rotationCenter, onSkinReady) {
         const skinId = this._nextSkinId++;
         const newSkin = new SVGSkin(skinId, this);
-        newSkin.setSVG(svgData, rotationCenter);
+        newSkin.setSVG(svgData, rotationCenter, onSkinReady);
         this._allSkins[skinId] = newSkin;
         return skinId;
     }
@@ -393,6 +394,7 @@ class RenderWebGL extends EventEmitter {
      * @param {!string} svgData - new SVG to use.
      * @param {?Array<number>} rotationCenter Optional: rotation center of the skin. If not supplied, the center of the
      * skin will be used
+     * @returns {Promise} - a promise which resolves after the skin has updated
      */
     updateSVGSkin (skinId, svgData, rotationCenter) {
         if (this._allSkins[skinId] instanceof SVGSkin) {
@@ -401,8 +403,9 @@ class RenderWebGL extends EventEmitter {
         }
 
         const newSkin = new SVGSkin(skinId, this);
-        newSkin.setSVG(svgData, rotationCenter);
+        return newSkin.setSVG(svgData, rotationCenter).then(() => {
-        this._reskin(skinId, newSkin);
+            this._reskin(skinId, newSkin);
+        });
     }
 
     /**

src/SVGSkin.js

@@ -140,9 +140,11 @@ class SVGSkin extends Skin {
      * Set the contents of this skin to a snapshot of the provided SVG data.
      * @param {string} svgData - new SVG to use.
      * @param {Array<number>} [rotationCenter] - Optional rotation center for the SVG.
+     * @param {function} [onSkinReady] - Optional: if present, will be called after the skin loads
+     * @returns {Promise} - a promise which resolves after the SVG is loaded and ready
      */
-    setSVG (svgData, rotationCenter) {
+    setSVG (svgData, rotationCenter, onSkinReady) {
-        this._svgRenderer.loadSVG(svgData, false, () => {
+        return this._svgRenderer.loadSVG(svgData, false, () => {
             const svgSize = this._svgRenderer.size;
             if (svgSize[0] === 0 || svgSize[1] === 0) {
                 super.setEmptyImageData();
@@ -163,6 +165,9 @@ class SVGSkin extends Skin {
             this._rotationCenter[1] = rotationCenter[1] - viewOffset[1];
 
             this.emit(Skin.Events.WasAltered);
+            if (onSkinReady) {
+                onSkinReady();
+            }
         });
     }