SvgImageLoader

haxe/ui/backend/html5/loaders/image/SvgImageLoader.hx

@@ -0,0 +1,35 @@
+package haxe.ui.backend.html5.loaders.image;
+
+import haxe.ui.assets.ImageInfo;
+import haxe.ui.loaders.image.ImageLoaderBase;
+import haxe.ui.util.Variant;
+import js.Browser;
+import js.html.Blob;
+import js.html.Image;
+import js.html.URL;
+
+using StringTools;
+
+class SvgImageLoader extends ImageLoaderBase {
+    public override function load(resource:Variant, callback:ImageInfo->Void) {
+        var image = new Image();
+        var svgData:String = resource.toString();
+        if (svgData.startsWith("svg://")) {
+            svgData = svgData.substr("svg://".length);
+        }
+        var svg = new Blob([svgData], {type: "image/svg+xml;charset=utf-8"});
+        var url = URL.createObjectURL(svg);
+        image.onload = function() {
+            callback({
+                data:image,
+                width: image.width,
+                height: image.height
+            });
+        }
+        image.onerror = function(e) {
+            trace(e);
+            callback(null);
+        }
+        image.src = url;
+    }
+}

haxe/ui/backend/module.xml

@@ -15,6 +15,12 @@
         </native>
     </themes>
 
+    <loaders>
+        <image-loaders>
+            <image-loader prefix="svg" pattern="^&lt;svg.*&gt;.*&lt;\/svg&gt;$" class="haxe.ui.backend.html5.loaders.image.SvgImageLoader" singleInstance="true" />
+        </image-loaders>
+    </loaders>
+
     <properties>
         <property name="haxe.ui.containers.menus.menubar.style" value="rounded" />
         <property name="haxe.ui.containers.menus.menu.style" value="rounded" />