Load SVGs to html

2 files changed, 20 insertions, 14 deletions

diff --git a/web/app/store/DeviceImages.js b/web/app/store/DeviceImages.js
index 57745f1..4e49482 100644
--- a/web/app/store/DeviceImages.js
+++ b/web/app/store/DeviceImages.js
@@ -22,28 +22,28 @@ Ext.define('Traccar.store.DeviceImages', {
     data: [{
         key: 'default',
         name: Strings.categoryDefault,
-        url: 'images/arrow.svg',
+        elementId: 'arrowSvg',
         rotateId: 'arrow',
         fillId: 'arrow',
         scale: 1
     }, {
         key: 'car',
         name: Strings.categoryCar,
-        url: 'images/car.svg',
+        elementId: 'carSvg',
         fillId: 'path4149',
         rotateId: 'g4207',
         scale: 0.06,
     }, {
         key: 'bus',
         name: Strings.categoryBus,
-        url: 'images/bus.svg',
+        elementId: 'busSvg',
         fillId: 'path4713',
         rotateId: 'layer2',
         scale: 0.12,
     }, {
         key: 'truck',
         name: Strings.categoryTruck,
-        url: 'images/truck.svg',
+        elementId: 'truckSvg',
         fillId: 'path4718',
         rotateId: 'layer2',
         scale: 0.1,
@@ -52,15 +52,7 @@ Ext.define('Traccar.store.DeviceImages', {
     constructor: function() {
         this.callParent(arguments);
         this.config.data.forEach(function (device) {
-            if (device.url) {
-                Ext.Ajax.request({
-                    url: device.url,
-                    scope: device,
-                    success: function (response) {
-                        this.svg = new DOMParser().parseFromString(response.responseText, "image/svg+xml");
-                    }
-                });
-            }
+            device.svg = document.getElementById(device.elementId).contentDocument;
         });
     }
 });
\ No newline at end of file
diff --git a/web/load.js b/web/load.js
index f4987ac..7f0caf9 100644
--- a/web/load.js
+++ b/web/load.js
@@ -14,6 +14,15 @@
         script.async = false
         document.head.appendChild(script);
     }
+    
+    function addSvgFile(file, id) {
+        var svg = document.createElement('object');
+        svg.setAttribute('id', id);
+        svg.setAttribute('data', file);
+        svg.setAttribute('type', 'image/svg+xml');
+        svg.setAttribute('style','visibility:hidden')
+        document.body.appendChild(svg);
+    }
 
     var debugMode = document.getElementById('loadScript').getAttribute('mode') === 'debug';
     var touchMode = 'ontouchstart' in window || navigator.maxTouchPoints;
@@ -119,6 +128,11 @@
     addScriptFile('//cdnjs.cloudflare.com/ajax/libs/ol3/' + olVersion + '/ol-debug.js');
 
     addStyleFile('app.css');
-    addScriptFile('arrow.js');
+    //addScriptFile('arrow.js');
+    
+    addSvgFile('images/arrow.svg', 'arrowSvg');
+    addSvgFile('images/car.svg', 'carSvg');
+    addSvgFile('images/bus.svg', 'busSvg');
+    addSvgFile('images/truck.svg', 'truckSvg');
 
 })();