From a422c7c48e8b009f19085c0e6016f9ea3bd357a3 Mon Sep 17 00:00:00 2001
From: Ian Harrigan <ianharrigan@hotmail.com>
Date: Tue, 28 Nov 2023 08:57:30 +0100
Subject: [PATCH] SvgImageLoader

---
 .../html5/loaders/image/SvgImageLoader.hx     | 35 +++++++++++++++++++
 haxe/ui/backend/module.xml                    |  6 ++++
 2 files changed, 41 insertions(+)
 create mode 100644 haxe/ui/backend/html5/loaders/image/SvgImageLoader.hx

diff --git a/haxe/ui/backend/html5/loaders/image/SvgImageLoader.hx b/haxe/ui/backend/html5/loaders/image/SvgImageLoader.hx
new file mode 100644
index 0000000..322949a
--- /dev/null
+++ b/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;
+    }
+}
\ No newline at end of file
diff --git a/haxe/ui/backend/module.xml b/haxe/ui/backend/module.xml
index f0f309b..249f3b0 100644
--- a/haxe/ui/backend/module.xml
+++ b/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" />