From 86c0e9cf03a2d04f96fba01e941b9aee78cd0f8c Mon Sep 17 00:00:00 2001
From: JFH <20402845+jfhenon@users.noreply.github.com>
Date: Wed, 11 Aug 2021 10:16:00 +0200
Subject: [PATCH] image folder variable used consistently

---
 package-lock.json                             | 367 +-----------------
 src/editor/Editor.js                          |  15 +-
 src/editor/EditorStartup.js                   |   2 +-
 src/editor/MainMenu.js                        |  19 +-
 src/editor/components/seButton.js             |   6 +-
 src/editor/components/seColorPicker.js        |   2 +-
 src/editor/components/seDropdown.js           |   4 +-
 src/editor/components/seExplorerButton.js     |   2 +-
 src/editor/components/seFlyingButton.js       |   2 +-
 src/editor/components/seInput.js              |   2 +-
 src/editor/components/seMenuItem.js           |   2 +-
 src/editor/components/seZoom.js               |  27 +-
 .../extensions/ext-connector/ext-connector.js |   3 +-
 .../ext-eyedropper/ext-eyedropper.js          |   3 +-
 src/editor/extensions/ext-grid/ext-grid.js    |   4 +-
 .../ext-helloworld/ext-helloworld.js          |   3 +-
 .../extensions/ext-imagelib/ext-imagelib.js   |   6 +-
 .../extensions/ext-panning/ext-panning.js     |   5 +-
 .../extensions/ext-polystar/ext-polystar.js   |   5 +-
 .../extensions/ext-shapes/ext-shapes.js       |   3 +-
 src/editor/panels/BottomPanel.js              |  22 +-
 src/editor/panels/LayersPanel.js              |  14 +-
 src/editor/panels/LeftPanel.js                |  28 +-
 src/editor/panels/TopPanel.js                 |  87 +++--
 src/svgcanvas/select.js                       |   2 +-
 src/svgcanvas/svgcanvas.js                    |   2 +-
 26 files changed, 136 insertions(+), 501 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 27f67cba..432124e9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
   "name": "svgedit",
-  "version": "7.0.0-beta.3",
+  "version": "7.0.0-beta.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "7.0.0-beta.3",
+      "version": "7.0.0-beta.4",
       "license": "(MIT AND Apache-2.0 AND ISC AND LGPL-3.0-or-later AND X11)",
       "dependencies": {
         "@babel/polyfill": "7.12.1",
@@ -63,7 +63,6 @@
         "eslint-plugin-node": "11.1.0",
         "eslint-plugin-promise": "5.1.0",
         "eslint-plugin-standard": "4.1.0",
-        "imageoptim-cli": "3.0.2",
         "jamilih": "0.54.0",
         "jsdoc": "3.6.7",
         "node-static": "0.7.11",
@@ -10697,200 +10696,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/imageoptim-cli": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/imageoptim-cli/-/imageoptim-cli-3.0.2.tgz",
-      "integrity": "sha512-zaoD9hqFvIUXWFye3sp+DyuQ2r5yPYSDksssZ6ytvgYkQgv0w+ebm0NaAHNU2qi97c9SB8p8hM7mBnQZocLM0w==",
-      "dev": true,
-      "dependencies": {
-        "chalk": "2.4.2",
-        "commander": "3.0.1",
-        "execa": "2.0.4",
-        "fs-extra": "8.1.0",
-        "globby": "10.0.1",
-        "pretty-bytes": "5.3.0"
-      },
-      "bin": {
-        "imageoptim": "dist/imageoptim"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "node_modules/imageoptim-cli/node_modules/commander": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-3.0.1.tgz",
-      "integrity": "sha512-UNgvDd+csKdc9GD4zjtkHKQbT8Aspt2jCBqNSPp53vAS0L1tS9sXB2TCEOPHJ7kt9bN/niWkYj8T3RQSoMXdSQ==",
-      "dev": true
-    },
-    "node_modules/imageoptim-cli/node_modules/cross-spawn": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
-      "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
-      "dev": true,
-      "dependencies": {
-        "nice-try": "^1.0.4",
-        "path-key": "^2.0.1",
-        "semver": "^5.5.0",
-        "shebang-command": "^1.2.0",
-        "which": "^1.2.9"
-      },
-      "engines": {
-        "node": ">=4.8"
-      }
-    },
-    "node_modules/imageoptim-cli/node_modules/execa": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-2.0.4.tgz",
-      "integrity": "sha512-VcQfhuGD51vQUQtKIq2fjGDLDbL6N1DTQVpYzxZ7LPIXw3HqTuIz6uxRmpV1qf8i31LHf2kjiaGI+GdHwRgbnQ==",
-      "dev": true,
-      "dependencies": {
-        "cross-spawn": "^6.0.5",
-        "get-stream": "^5.0.0",
-        "is-stream": "^2.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^3.0.0",
-        "onetime": "^5.1.0",
-        "p-finally": "^2.0.0",
-        "signal-exit": "^3.0.2",
-        "strip-final-newline": "^2.0.0"
-      },
-      "engines": {
-        "node": "^8.12.0 || >=9.7.0"
-      }
-    },
-    "node_modules/imageoptim-cli/node_modules/fs-extra": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
-      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
-      "dev": true,
-      "dependencies": {
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^4.0.0",
-        "universalify": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=6 <7 || >=8"
-      }
-    },
-    "node_modules/imageoptim-cli/node_modules/globby": {
-      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-10.0.1.tgz",
-      "integrity": "sha512-sSs4inE1FB2YQiymcmTv6NWENryABjUNPeWhOvmn4SjtKybglsyPZxFB3U1/+L1bYi0rNZDqCLlHyLYDl1Pq5A==",
-      "dev": true,
-      "dependencies": {
-        "@types/glob": "^7.1.1",
-        "array-union": "^2.1.0",
-        "dir-glob": "^3.0.1",
-        "fast-glob": "^3.0.3",
-        "glob": "^7.1.3",
-        "ignore": "^5.1.1",
-        "merge2": "^1.2.3",
-        "slash": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/imageoptim-cli/node_modules/jsonfile": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
-      "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
-      "dev": true,
-      "dependencies": {
-        "graceful-fs": "^4.1.6"
-      }
-    },
-    "node_modules/imageoptim-cli/node_modules/npm-run-path": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-3.1.0.tgz",
-      "integrity": "sha512-Dbl4A/VfiVGLgQv29URL9xshU8XDY1GeLy+fsaZ1AA8JDSfjvr5P5+pzRbWqRSBxk6/DW7MIh8lTM/PaGnP2kg==",
-      "dev": true,
-      "dependencies": {
-        "path-key": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/imageoptim-cli/node_modules/npm-run-path/node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/imageoptim-cli/node_modules/p-finally": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-2.0.1.tgz",
-      "integrity": "sha512-vpm09aKwq6H9phqRQzecoDpD8TmVyGw70qmWlyq5onxY7tqyTTFVvxMykxQSQKILBSFlbXpypIw2T1Ml7+DDtw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/imageoptim-cli/node_modules/path-key": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
-      "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/imageoptim-cli/node_modules/shebang-command": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
-      "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",
-      "dev": true,
-      "dependencies": {
-        "shebang-regex": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/imageoptim-cli/node_modules/shebang-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
-      "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/imageoptim-cli/node_modules/slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/imageoptim-cli/node_modules/universalify": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
-      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 4.0.0"
-      }
-    },
-    "node_modules/imageoptim-cli/node_modules/which": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
-      "dev": true,
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "which": "bin/which"
-      }
-    },
     "node_modules/import-meta-resolve": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-1.1.1.tgz",
@@ -16462,15 +16267,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/pretty-bytes": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.3.0.tgz",
-      "integrity": "sha512-hjGrh+P926p4R4WbaB6OckyRtO0F0/lQBiT+0gnxjV+5kjPBrfVBFCsCLbMqVQeydvIoouYTCmmEURiH3R1Bdg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -30646,159 +30442,6 @@
       "integrity": "sha512-Hiyv+mXHfFEP7LzUL/llg9RwFxxY+o9N3JVLIeG5E7iFIFAalxvRU9UZthBdYDEVnzHMgjnKJPPpay5BWf1g9g==",
       "dev": true
     },
-    "imageoptim-cli": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/imageoptim-cli/-/imageoptim-cli-3.0.2.tgz",
-      "integrity": "sha512-zaoD9hqFvIUXWFye3sp+DyuQ2r5yPYSDksssZ6ytvgYkQgv0w+ebm0NaAHNU2qi97c9SB8p8hM7mBnQZocLM0w==",
-      "dev": true,
-      "requires": {
-        "chalk": "2.4.2",
-        "commander": "3.0.1",
-        "execa": "2.0.4",
-        "fs-extra": "8.1.0",
-        "globby": "10.0.1",
-        "pretty-bytes": "5.3.0"
-      },
-      "dependencies": {
-        "commander": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-3.0.1.tgz",
-          "integrity": "sha512-UNgvDd+csKdc9GD4zjtkHKQbT8Aspt2jCBqNSPp53vAS0L1tS9sXB2TCEOPHJ7kt9bN/niWkYj8T3RQSoMXdSQ==",
-          "dev": true
-        },
-        "cross-spawn": {
-          "version": "6.0.5",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
-          "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
-          "dev": true,
-          "requires": {
-            "nice-try": "^1.0.4",
-            "path-key": "^2.0.1",
-            "semver": "^5.5.0",
-            "shebang-command": "^1.2.0",
-            "which": "^1.2.9"
-          }
-        },
-        "execa": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-2.0.4.tgz",
-          "integrity": "sha512-VcQfhuGD51vQUQtKIq2fjGDLDbL6N1DTQVpYzxZ7LPIXw3HqTuIz6uxRmpV1qf8i31LHf2kjiaGI+GdHwRgbnQ==",
-          "dev": true,
-          "requires": {
-            "cross-spawn": "^6.0.5",
-            "get-stream": "^5.0.0",
-            "is-stream": "^2.0.0",
-            "merge-stream": "^2.0.0",
-            "npm-run-path": "^3.0.0",
-            "onetime": "^5.1.0",
-            "p-finally": "^2.0.0",
-            "signal-exit": "^3.0.2",
-            "strip-final-newline": "^2.0.0"
-          }
-        },
-        "fs-extra": {
-          "version": "8.1.0",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
-          "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.2.0",
-            "jsonfile": "^4.0.0",
-            "universalify": "^0.1.0"
-          }
-        },
-        "globby": {
-          "version": "10.0.1",
-          "resolved": "https://registry.npmjs.org/globby/-/globby-10.0.1.tgz",
-          "integrity": "sha512-sSs4inE1FB2YQiymcmTv6NWENryABjUNPeWhOvmn4SjtKybglsyPZxFB3U1/+L1bYi0rNZDqCLlHyLYDl1Pq5A==",
-          "dev": true,
-          "requires": {
-            "@types/glob": "^7.1.1",
-            "array-union": "^2.1.0",
-            "dir-glob": "^3.0.1",
-            "fast-glob": "^3.0.3",
-            "glob": "^7.1.3",
-            "ignore": "^5.1.1",
-            "merge2": "^1.2.3",
-            "slash": "^3.0.0"
-          }
-        },
-        "jsonfile": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
-          "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.6"
-          }
-        },
-        "npm-run-path": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-3.1.0.tgz",
-          "integrity": "sha512-Dbl4A/VfiVGLgQv29URL9xshU8XDY1GeLy+fsaZ1AA8JDSfjvr5P5+pzRbWqRSBxk6/DW7MIh8lTM/PaGnP2kg==",
-          "dev": true,
-          "requires": {
-            "path-key": "^3.0.0"
-          },
-          "dependencies": {
-            "path-key": {
-              "version": "3.1.1",
-              "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-              "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-              "dev": true
-            }
-          }
-        },
-        "p-finally": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-2.0.1.tgz",
-          "integrity": "sha512-vpm09aKwq6H9phqRQzecoDpD8TmVyGw70qmWlyq5onxY7tqyTTFVvxMykxQSQKILBSFlbXpypIw2T1Ml7+DDtw==",
-          "dev": true
-        },
-        "path-key": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
-          "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=",
-          "dev": true
-        },
-        "shebang-command": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
-          "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",
-          "dev": true,
-          "requires": {
-            "shebang-regex": "^1.0.0"
-          }
-        },
-        "shebang-regex": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
-          "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
-          "dev": true
-        },
-        "slash": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-          "dev": true
-        },
-        "universalify": {
-          "version": "0.1.2",
-          "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
-          "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
-          "dev": true
-        },
-        "which": {
-          "version": "1.3.1",
-          "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-          "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
-          "dev": true,
-          "requires": {
-            "isexe": "^2.0.0"
-          }
-        }
-      }
-    },
     "import-meta-resolve": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-1.1.1.tgz",
@@ -35068,12 +34711,6 @@
       "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
       "dev": true
     },
-    "pretty-bytes": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.3.0.tgz",
-      "integrity": "sha512-hjGrh+P926p4R4WbaB6OckyRtO0F0/lQBiT+0gnxjV+5kjPBrfVBFCsCLbMqVQeydvIoouYTCmmEURiH3R1Bdg==",
-      "dev": true
-    },
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
diff --git a/src/editor/Editor.js b/src/editor/Editor.js
index 38a93a24..8121efeb 100644
--- a/src/editor/Editor.js
+++ b/src/editor/Editor.js
@@ -342,20 +342,25 @@ class Editor extends EditorStartup {
   * @param {module:svgcanvas.SvgCanvas#event:selected} elems
   * @returns {void}
   */
-  togglePathEditMode(editmode, elems) {
-    $id('path_node_panel').style.display = (editmode) ? 'block' : 'none';
-    if (editmode) {
+  togglePathEditMode(editMode, elems) {
+    const { imgPath } = this.configObj.curConfig;
+    if (editMode) {
+      $id('path_node_panel').style.removeProperty('display');
+    } else {
+      $id('path_node_panel').style.display = 'none';
+    }
+    if (editMode) {
       // Change select icon
       $id('tool_path').pressed = false;
       $id('tool_select').pressed = true;
-      $id('tool_select').setAttribute('src', './images/select_node.svg');
+      $id('tool_select').setAttribute('src', `${imgPath}/select_node.svg`);
       this.multiselected = false;
       if (elems.length) {
         this.selectedElement = elems[0];
       }
     } else {
       setTimeout(() => {
-        $id('tool_select').setAttribute('src', './images/select.svg');
+        $id('tool_select').setAttribute('src', `${imgPath}/select.svg`);
       }, 1000);
     }
   }
diff --git a/src/editor/EditorStartup.js b/src/editor/EditorStartup.js
index abae6c0a..e9a135ef 100644
--- a/src/editor/EditorStartup.js
+++ b/src/editor/EditorStartup.js
@@ -126,7 +126,7 @@ class EditorStartup {
     const { undoMgr } = this.svgCanvas;
     this.canvMenu = $id('se-cmenu_canvas');
     this.exportWindow = null;
-    this.defaultImageURL = this.configObj.curConfig.imgPath + 'logo.svg';
+    this.defaultImageURL = `${this.configObj.curConfig.imgPath}/logo.svg`;
     const zoomInIcon = 'crosshair';
     const zoomOutIcon = 'crosshair';
     this.uiContext = 'toolbars';
diff --git a/src/editor/MainMenu.js b/src/editor/MainMenu.js
index f6b8355f..1e12c8a1 100644
--- a/src/editor/MainMenu.js
+++ b/src/editor/MainMenu.js
@@ -303,17 +303,18 @@ class MainMenu {
     // add Top panel
     const template = document.createElement("template");
     const { i18next } = this.editor;
+    const { imgPath } = this.editor.configObj.curConfig;
     // eslint-disable-next-line no-unsanitized/property
     template.innerHTML = `
-    <se-menu id="main_button" label="SVG-Edit" src="./images/logo.svg" alt="logo">
-        <se-menu-item id="tool_clear" label="${i18next.t('tools.new_doc')}" shortcut="N" src="./images/new.svg"></se-menu-item>
-        <se-menu-item id="tool_open" label="${i18next.t('tools.open_doc')}" src="./images/open.svg"></se-menu-item>
-        <se-menu-item id="tool_save" label="${i18next.t('tools.save_doc')}" shortcut="S" src="./images/saveImg.svg"></se-menu-item>
-        <se-menu-item id="tool_import" label="${i18next.t('tools.import_doc')}" src="./images/importImg.svg"></se-menu-item>
-        <se-menu-item id="tool_export" label="${i18next.t('tools.export_img')}" src="./images/export.svg"></se-menu-item>
-        <se-menu-item id="tool_docprops" label="${i18next.t('tools.docprops')}" shortcut="D" src="./images/docprop.svg"></se-menu-item>
-        <se-menu-item id="tool_editor_prefs" label="${i18next.t('config.editor_prefs')}" src="./images/editPref.svg"></se-menu-item>
-        <se-menu-item id="tool_editor_homepage" label="${i18next.t('tools.editor_homepage')}" src="./images/logo.svg"></se-menu-item>
+    <se-menu id="main_button" label="SVG-Edit" src="${imgPath}/logo.svg" alt="logo">
+        <se-menu-item id="tool_clear" label="${i18next.t('tools.new_doc')}" shortcut="N" src="${imgPath}/new.svg"></se-menu-item>
+        <se-menu-item id="tool_open" label="${i18next.t('tools.open_doc')}" src="${imgPath}/open.svg"></se-menu-item>
+        <se-menu-item id="tool_save" label="${i18next.t('tools.save_doc')}" shortcut="S" src="${imgPath}/saveImg.svg"></se-menu-item>
+        <se-menu-item id="tool_import" label="${i18next.t('tools.import_doc')}" src="${imgPath}/importImg.svg"></se-menu-item>
+        <se-menu-item id="tool_export" label="${i18next.t('tools.export_img')}" src="${imgPath}/export.svg"></se-menu-item>
+        <se-menu-item id="tool_docprops" label="${i18next.t('tools.docprops')}" shortcut="D" src="${imgPath}/docprop.svg"></se-menu-item>
+        <se-menu-item id="tool_editor_prefs" label="${i18next.t('config.editor_prefs')}" src="${imgPath}/editPref.svg"></se-menu-item>
+        <se-menu-item id="tool_editor_homepage" label="${i18next.t('tools.editor_homepage')}" src="${imgPath}/logo.svg"></se-menu-item>
     </se-menu>
        `;
     $id('tools_top').prepend(template.content.cloneNode(true));
diff --git a/src/editor/components/seButton.js b/src/editor/components/seButton.js
index 52e18f7b..56ffbb4d 100644
--- a/src/editor/components/seButton.js
+++ b/src/editor/components/seButton.js
@@ -1,7 +1,5 @@
-// import {isMac} from '../../common/browser.js';
-// if (isMac() && !window.opera) 'Ctrl+' 'Cmd+'
-
 const template = document.createElement('template');
+// eslint-disable-next-line no-unsanitized/property
 template.innerHTML = `
   <style>
   :host(:hover) :not(.disabled)
@@ -38,7 +36,7 @@ template.innerHTML = `
   }
   </style>
   <div title="title">
-    <img src="./images/logo.svg" alt="icon">
+    <img src="logo.svg" alt="icon">
   </div>
 `;
 /**
diff --git a/src/editor/components/seColorPicker.js b/src/editor/components/seColorPicker.js
index 5bb03156..27d7875a 100644
--- a/src/editor/components/seColorPicker.js
+++ b/src/editor/components/seColorPicker.js
@@ -638,7 +638,7 @@ div.jGraduate_Slider img {
   }
   </style>
   <div id="picker">
-      <img src="./images/logo.svg" alt="icon" id="logo">
+      <img src="logo.svg" alt="icon" id="logo">
       <label for="color" title="" id="label"></label>
       <div id="block">
       </div>
diff --git a/src/editor/components/seDropdown.js b/src/editor/components/seDropdown.js
index aaf1039b..d150b4e4 100644
--- a/src/editor/components/seDropdown.js
+++ b/src/editor/components/seDropdown.js
@@ -15,7 +15,7 @@ class Dropdown extends ListComboBox {
   get [defaultState] () {
     return Object.assign(super[defaultState], {
       inputPartType: NumberSpinBox,
-      src: './images/logo.svg',
+      src: "logo.svg",
       inputsize: '100%'
     });
   }
@@ -28,7 +28,7 @@ class Dropdown extends ListComboBox {
     const source = result.content.getElementById('source');
     // add a icon before our dropdown
     source.prepend(fragmentFrom.html`
-      <img src="./images/logo.svg" alt="icon" width="18" height="18"></img>
+      <img src="logo.svg" alt="icon" width="18" height="18"></img>
       `.cloneNode(true));
     // change the style so it fits in our toolbar
     result.content.append(
diff --git a/src/editor/components/seExplorerButton.js b/src/editor/components/seExplorerButton.js
index f64ddc00..c3eb2f7f 100644
--- a/src/editor/components/seExplorerButton.js
+++ b/src/editor/components/seExplorerButton.js
@@ -85,7 +85,7 @@ template.innerHTML = `
 
   <div class="overall">
     <div class="menu-button">
-      <img class="button-icon" src="./images/logo.svg" alt="icon">
+      <img class="button-icon" src="logo.svg" alt="icon">
       <div class="handle"></div>
     </div>
     <div class="image-lib"">
diff --git a/src/editor/components/seFlyingButton.js b/src/editor/components/seFlyingButton.js
index 45944d1e..b083d211 100644
--- a/src/editor/components/seFlyingButton.js
+++ b/src/editor/components/seFlyingButton.js
@@ -71,7 +71,7 @@ template.innerHTML = `
   <slot></slot>
 </div>
     <div class="menu-button">
-      <img class="button-icon" src="./images/logo.svg" alt="icon">
+      <img class="button-icon" src="logo.svg" alt="icon">
       <div class="handle"></div>
     </div>
    
diff --git a/src/editor/components/seInput.js b/src/editor/components/seInput.js
index 708bc413..27bb57c4 100644
--- a/src/editor/components/seInput.js
+++ b/src/editor/components/seInput.js
@@ -26,7 +26,7 @@ template.innerHTML = `
   }
   </style>
   <div>
-  <img src="./images/logo.svg" alt="icon" width="12" height="12" />
+  <img src="logo.svg" alt="icon" width="12" height="12" />
   <span id="label">label</span>
   <elix-input></elix-input>
   </div>
diff --git a/src/editor/components/seMenuItem.js b/src/editor/components/seMenuItem.js
index 67cbd9d7..d005fb8e 100644
--- a/src/editor/components/seMenuItem.js
+++ b/src/editor/components/seMenuItem.js
@@ -7,7 +7,7 @@ template.innerHTML = `
   </style>
   <elix-menu-item>
     <div style="display:flex; align-items: center;">
-      <img src="./images/logo.svg" alt="icon" style="display:none;" width="24"/>
+      <img src="logo.svg" alt="icon" style="display:none;" width="24"/>
       <span style="margin-left: 7px;"></span>
     </div>
   </elix-menu-item>
diff --git a/src/editor/components/seZoom.js b/src/editor/components/seZoom.js
index 05f90ad0..34cc54d9 100644
--- a/src/editor/components/seZoom.js
+++ b/src/editor/components/seZoom.js
@@ -14,7 +14,7 @@ class Zoom extends ListComboBox {
   get [internal.defaultState] () {
     return Object.assign(super[internal.defaultState], {
       inputPartType: NumberSpinBox,
-      src: './images/logo.svg',
+      src: 'logo.svg',
       inputsize: '100%'
     });
   }
@@ -27,7 +27,8 @@ class Zoom extends ListComboBox {
     const source = result.content.getElementById('source');
     // add a icon before our dropdown
     source.prepend(fragmentFrom.html`
-      <img src="./images/logo.svg" alt="icon" width="18" height="18"></img>
+      <img src="zoom" alt="icon" width="18" height="18">
+      </img>
       `.cloneNode(true));
     // change the style so it fits in our toolbar
     result.content.append(
@@ -39,9 +40,6 @@ class Zoom extends ListComboBox {
         ::slotted(*) {
           padding: 4px;
           width: 100%;
-          background-color: var(--icon-bg-color);
-          color: #fff;
-        }
         }
         [part~="popup"] {
           width: 150%;
@@ -167,22 +165,3 @@ class Zoom extends ListComboBox {
 
 // Register
 customElements.define('se-zoom', Zoom);
-
-/*
-{TODO
-    min: 0.001, max: 10000, step: 50, stepfunc: stepZoom,
-  function stepZoom (elem, step) {
-    const origVal = Number(elem.value);
-    if (origVal === 0) { return 100; }
-    const sugVal = origVal + step;
-    if (step === 0) { return origVal; }
-
-    if (origVal >= 100) {
-      return sugVal;
-    }
-    if (sugVal >= origVal) {
-      return origVal * 2;
-    }
-    return origVal / 2;
-  }
-*/
diff --git a/src/editor/extensions/ext-connector/ext-connector.js b/src/editor/extensions/ext-connector/ext-connector.js
index e06ea039..45278681 100644
--- a/src/editor/extensions/ext-connector/ext-connector.js
+++ b/src/editor/extensions/ext-connector/ext-connector.js
@@ -31,6 +31,7 @@ export default {
     const { svgCanvas } = svgEditor;
     const { getElem, $id, mergeDeep } = svgCanvas;
     const { svgroot } = S;
+    const { imgPath } = svgEditor.configObj.curConfig;
     const addElem = svgCanvas.addSVGElementFromJson;
     const selManager = S.selectorManager;
     await loadExtensionTranslation(svgEditor);
@@ -360,7 +361,7 @@ export default {
         const btitle = svgEditor.i18next.t(`${name}:langListTitle`);
         // eslint-disable-next-line no-unsanitized/property
         const buttonTemplate = `
-        <se-button id="mode_connect" title="${btitle}" src="./images/conn.svg"></se-button>
+        <se-button id="mode_connect" title="${btitle}" src="${imgPath}/conn.svg"></se-button>
         `;
         svgCanvas.insertChildAtIndex($id('tools_left'), buttonTemplate, 13);
         $id('mode_connect').addEventListener("click", () => {
diff --git a/src/editor/extensions/ext-eyedropper/ext-eyedropper.js b/src/editor/extensions/ext-eyedropper/ext-eyedropper.js
index 88b9d166..d10f0aec 100644
--- a/src/editor/extensions/ext-eyedropper/ext-eyedropper.js
+++ b/src/editor/extensions/ext-eyedropper/ext-eyedropper.js
@@ -29,6 +29,7 @@ export default {
   name,
   async init(S) {
     const svgEditor = this;
+    const { imgPath } = svgEditor.configObj.curConfig;
     await loadExtensionTranslation(svgEditor);
     const { ChangeElementCommand } = S; // , svgcontent,
     // svgdoc = S.svgroot.parentNode.ownerDocument,
@@ -86,7 +87,7 @@ export default {
         const key = svgEditor.i18next.t(`${name}:buttons.0.key`);
         // eslint-disable-next-line no-unsanitized/property
         const buttonTemplate = `
-        <se-button id="tool_eyedropper" title="${title}" src="./images/eye_dropper.svg" shortcut=${key}></se-button>
+        <se-button id="tool_eyedropper" title="${title}" src="${imgPath}/eye_dropper.svg" shortcut=${key}></se-button>
         `;
         svgCanvas.insertChildAtIndex($id('tools_left'), buttonTemplate, 12);
         $id('tool_eyedropper').addEventListener("click", () => {
diff --git a/src/editor/extensions/ext-grid/ext-grid.js b/src/editor/extensions/ext-grid/ext-grid.js
index 3a5e2ca5..059188c5 100644
--- a/src/editor/extensions/ext-grid/ext-grid.js
+++ b/src/editor/extensions/ext-grid/ext-grid.js
@@ -28,6 +28,7 @@ export default {
   name,
   async init ({ NS, getTypeMap }) {
     const svgEditor = this;
+    const { imgPath } = svgEditor.configObj.curConfig;
     await loadExtensionTranslation(svgEditor);
     const { svgCanvas } = svgEditor;
     const { $id } = svgCanvas;
@@ -167,14 +168,13 @@ export default {
 
         // eslint-disable-next-line no-unsanitized/property
         buttonTemplate.innerHTML = `
-          <se-button id="view_grid" title="${title}" src="./images/grid.svg"></se-button>
+          <se-button id="view_grid" title="${title}" src="${imgPath}/grid.svg"></se-button>
         `;
         $id('editor_panel').append(buttonTemplate.content.cloneNode(true));
         $id('view_grid').addEventListener("click", () => {
           svgEditor.configObj.curConfig.showGrid = showGrid = !showGrid;
           gridUpdate();
         });
-
         if (showGrid) {
           gridUpdate();
         }
diff --git a/src/editor/extensions/ext-helloworld/ext-helloworld.js b/src/editor/extensions/ext-helloworld/ext-helloworld.js
index 43bc7598..297a70eb 100644
--- a/src/editor/extensions/ext-helloworld/ext-helloworld.js
+++ b/src/editor/extensions/ext-helloworld/ext-helloworld.js
@@ -34,6 +34,7 @@ export default {
   name,
   async init ({ _importLocale }) {
     const svgEditor = this;
+    const { imgPath } = svgEditor.configObj.curConfig;
     await loadExtensionTranslation(svgEditor);
     const { svgCanvas } = svgEditor;
     const { $id } = svgCanvas;
@@ -45,7 +46,7 @@ export default {
         const title = svgEditor.i18next.t(`${name}:buttons.0.title`);
         // eslint-disable-next-line no-unsanitized/property
         buttonTemplate.innerHTML = `
-        <se-button id="hello_world" title="${title}" src="./images/hello_world.svg"></se-button>
+        <se-button id="hello_world" title="${title}" src="${imgPath}/hello_world.svg"></se-button>
         `;
         $id('tools_left').append(buttonTemplate.content.cloneNode(true));
         $id('hello_world').addEventListener("click", () => {
diff --git a/src/editor/extensions/ext-imagelib/ext-imagelib.js b/src/editor/extensions/ext-imagelib/ext-imagelib.js
index 5f1c9aa2..09dc11f8 100644
--- a/src/editor/extensions/ext-imagelib/ext-imagelib.js
+++ b/src/editor/extensions/ext-imagelib/ext-imagelib.js
@@ -32,6 +32,8 @@ export default {
     const svgEditor = this;
     const { $id } = svgEditor.svgCanvas;
     const { $svgEditor } = svgEditor;
+    const { imgPath } = svgEditor.configObj.curConfig;
+
     await loadExtensionTranslation(svgEditor);
 
     const { svgCanvas } = svgEditor;
@@ -447,7 +449,7 @@ export default {
         const back = document.createElement('button');
         back.style.visibility = "hidden";
         // eslint-disable-next-line max-len
-        back.innerHTML = '<img class="svg_icon" src="./images/library.svg" alt="icon" width="16" height="16" />' + svgEditor.i18next.t(`${name}:show_list`);
+        back.innerHTML = `<img class="svg_icon" src="${imgPath}/library.svg" alt="icon" width="16" height="16" />` + svgEditor.i18next.t(`${name}:show_list`);
         leftBlock.appendChild(back);
         back.addEventListener('click', function () {
           frame.setAttribute('src', 'about:blank');
@@ -521,7 +523,7 @@ export default {
         // Add the button and its handler(s)
         const buttonTemplate = document.createElement("template");
         buttonTemplate.innerHTML = `
-        <se-menu-item id="tool_imagelib" label="Image library" src="./images/library.svg"></se-menu-item>
+        <se-menu-item id="tool_imagelib" label="Image library" src="${imgPath}/library.svg"></se-menu-item>
         `;
         insertAfter($id('tool_export'), buttonTemplate.content.cloneNode(true));
         $id('tool_imagelib').addEventListener("click", () => {
diff --git a/src/editor/extensions/ext-panning/ext-panning.js b/src/editor/extensions/ext-panning/ext-panning.js
index 299b6223..8ec7cd48 100644
--- a/src/editor/extensions/ext-panning/ext-panning.js
+++ b/src/editor/extensions/ext-panning/ext-panning.js
@@ -31,6 +31,8 @@ export default {
   name,
   async init() {
     const svgEditor = this;
+    const { imgPath } = svgEditor.configObj.curConfig;
+
     await loadExtensionTranslation(svgEditor);
     const {
       svgCanvas
@@ -42,7 +44,6 @@ export default {
       referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
     };
     return {
-      newUI: true,
       name: svgEditor.i18next.t(`${name}:name`),
       callback() {
         const btitle = svgEditor.i18next.t(`${name}:buttons.0.title`);
@@ -50,7 +51,7 @@ export default {
         const buttonTemplate = document.createElement("template");
         // eslint-disable-next-line no-unsanitized/property
         buttonTemplate.innerHTML = `
-        <se-button id="ext-panning" title="${btitle}" src="./images/panning.svg"></se-button>
+        <se-button id="ext-panning" title="${btitle}" src="${imgPath}/panning.svg"></se-button>
         `;
         insertAfter($id('tool_zoom'), buttonTemplate.content.cloneNode(true));
         $id('ext-panning').addEventListener("click", () => {
diff --git a/src/editor/extensions/ext-polystar/ext-polystar.js b/src/editor/extensions/ext-polystar/ext-polystar.js
index f7bcbead..ce8801fc 100644
--- a/src/editor/extensions/ext-polystar/ext-polystar.js
+++ b/src/editor/extensions/ext-polystar/ext-polystar.js
@@ -29,6 +29,7 @@ export default {
   name,
   async init(_S) {
     const svgEditor = this;
+    const { imgPath } = svgEditor.configObj.curConfig;
     const { ChangeElementCommand } = _S; // , svgcontent,
     const addToHistory = function (cmd) { svgCanvas.undoMgr.addCommandToHistory(cmd); };
     const { svgCanvas } = svgEditor;
@@ -86,9 +87,9 @@ export default {
         // eslint-disable-next-line no-unsanitized/property
         const buttonTemplate = `
             <se-flyingbutton id="tools_polygon" title="${fbtitle}">
-              <se-button id="tool_star" title="${title_star}" src="./images/star.svg">
+              <se-button id="tool_star" title="${title_star}" src="${imgPath}/star.svg">
               </se-button>
-              <se-button id="tool_polygon" title="${title_polygon}" src="./images/polygon.svg">
+              <se-button id="tool_polygon" title="${title_polygon}" src="${imgPath}/polygon.svg">
               </se-button>
             </se-flyingbutton>
           `;
diff --git a/src/editor/extensions/ext-shapes/ext-shapes.js b/src/editor/extensions/ext-shapes/ext-shapes.js
index d7dfcad3..a415663c 100644
--- a/src/editor/extensions/ext-shapes/ext-shapes.js
+++ b/src/editor/extensions/ext-shapes/ext-shapes.js
@@ -27,6 +27,7 @@ export default {
   name,
   async init () {
     const svgEditor = this;
+    const { imgPath } = svgEditor.configObj.curConfig;
     const canv = svgEditor.svgCanvas;
     const { $id } = canv;
     const svgroot = canv.getRootElem();
@@ -46,7 +47,7 @@ export default {
           // eslint-disable-next-line no-unsanitized/property
           const buttonTemplate = `
           <se-explorerbutton id="tool_shapelib" title="${svgEditor.i18next.t(`${name}:buttons.0.title`)}" lib="./extensions/ext-shapes/shapelib/"
-          src="./images/shapelib.svg"></se-explorerbutton>
+          src="${imgPath}/shapelib.svg"></se-explorerbutton>
           `;
           canv.insertChildAtIndex($id('tools_left'), buttonTemplate, 9);
           $id('tool_shapelib').addEventListener("click", () => {
diff --git a/src/editor/panels/BottomPanel.js b/src/editor/panels/BottomPanel.js
index 5581baa5..2137ec5c 100644
--- a/src/editor/panels/BottomPanel.js
+++ b/src/editor/panels/BottomPanel.js
@@ -164,11 +164,13 @@ class BottomPanel {
     // register actions for Bottom panel
     const template = document.createElement('template');
     const { i18next } = this.editor;
+    const { imgPath } = this.editor.configObj.curConfig;
+
     // eslint-disable-next-line no-unsanitized/property
     template.innerHTML = `
       <div id="tools_bottom">
         <!-- Zoom buttons -->
-        <se-zoom id="zoom" src="./images/zoom.svg" title="Change zoom level" inputsize="40px">
+        <se-zoom id="zoom" src="${imgPath}/zoom.svg" title="Change zoom level" inputsize="40px">
           <div value="1000">1000</div>
           <div value="400">400</div>
           <div value="200">200</div>
@@ -180,8 +182,8 @@ class BottomPanel {
           <div value="layer">${i18next.t('tools.fit_to_layer_content')}</div>
           <div value="content">${i18next.t('tools.fit_to_all')}</div>
         </se-zoom>
-        <se-colorpicker id="fill_color" src="./images/fill.svg" title="${i18next.t('properties.fill_color')}" type="fill"></se-colorpicker>
-        <se-colorpicker id="stroke_color" src="./images/stroke.svg" title="${i18next.t('properties.stroke_color')}" type="stroke">
+        <se-colorpicker id="fill_color" src="${imgPath}/fill.svg" title="${i18next.t('properties.fill_color')}" type="fill"></se-colorpicker>
+        <se-colorpicker id="stroke_color" src="${imgPath}/stroke.svg" title="${i18next.t('properties.stroke_color')}" type="stroke">
         </se-colorpicker>
         <se-spin-input id="stroke_width" min=0 max=99 step=1 title="${i18next.t('properties.stroke_width')}" label=""></se-spin-input>
         <se-list id="stroke_style" title="${i18next.t('properties.stroke_style')}" label="" width="22px" height="24px">
@@ -192,23 +194,23 @@ class BottomPanel {
           <se-list-item value="5,2,2,2,2,2">- ..</se-list-item>
         </se-list>
         <se-list id="stroke_linejoin" title="${i18next.t('properties.linejoin_miter')}" label="" width="22px" height="24px">
-          <se-list-item id="linejoin_miter" value="miter"><img title="${i18next.t('properties.linejoin_miter')}" src="./images/linejoin_miter.svg"
+          <se-list-item id="linejoin_miter" value="miter"><img title="${i18next.t('properties.linejoin_miter')}" src="${imgPath}/linejoin_miter.svg"
               height="22px"></img></se-list-item>
-          <se-list-item id="linejoin_round" value="round"><img title="${i18next.t('properties.linejoin_round')}" src="./images/linejoin_round.svg"
+          <se-list-item id="linejoin_round" value="round"><img title="${i18next.t('properties.linejoin_round')}" src="${imgPath}/linejoin_round.svg"
               height="22px"></img></se-list-item>
-          <se-list-item id="linejoin_bevel" value="bevel"><img title="${i18next.t('properties.linejoin_bevel')}" src="./images/linejoin_bevel.svg"
+          <se-list-item id="linejoin_bevel" value="bevel"><img title="${i18next.t('properties.linejoin_bevel')}" src="${imgPath}/linejoin_bevel.svg"
               height="22px"></img></se-list-item>
         </se-list>
         <se-list id="stroke_linecap" title="${i18next.t('properties.linecap_butt')}" label="" width="22px" height="24px">
-          <se-list-item id="linecap_butt" value="butt"><img title="${i18next.t('properties.linecap_butt')}" src="./images/linecap_butt.svg"
+          <se-list-item id="linecap_butt" value="butt"><img title="${i18next.t('properties.linecap_butt')}" src="${imgPath}/linecap_butt.svg"
               height="22px"></img></se-list-item>
-          <se-list-item id="linecap_square" value="square"><img title="${i18next.t('properties.linecap_square')}" src="./images/linecap_square.svg"
+          <se-list-item id="linecap_square" value="square"><img title="${i18next.t('properties.linecap_square')}" src="${imgPath}/linecap_square.svg"
               height="22px"></img></se-list-item>
-          <se-list-item id="linecap_round" value="round"><img title="${i18next.t('properties.linecap_round')}" src="./images/linecap_round.svg"
+          <se-list-item id="linecap_round" value="round"><img title="${i18next.t('properties.linecap_round')}" src="${imgPath}/linecap_round.svg"
               height="22px"></img></se-list-item>
         </se-list>
         <se-spin-input size="3" id="opacity" min=0 max=100 step=5 title="${i18next.t('properties.opacity')}"
-          src="./images/opacity.svg"></se-spin-input>
+          src="${imgPath}/opacity.svg"></se-spin-input>
         <se-palette id="palette"></se-palette>
       </div>
     `;
diff --git a/src/editor/panels/LayersPanel.js b/src/editor/panels/LayersPanel.js
index 5a15a891..5dc8c259 100644
--- a/src/editor/panels/LayersPanel.js
+++ b/src/editor/panels/LayersPanel.js
@@ -114,18 +114,20 @@ class LayersPanel {
   init() {
     const template = document.createElement("template");
     const { i18next } = this.editor;
+    const { imgPath } = this.editor.configObj.curConfig;
+
     // eslint-disable-next-line no-unsanitized/property
     template.innerHTML = `
     <div id="sidepanels">
     <div id="layerpanel">
       <h3 id="layersLabel">${i18next.t('layers.layers')}</h3>
       <fieldset id="layerbuttons">
-        <se-button id="layer_new" title="${i18next.t('layers.new')}" size="small" src="./images/new.svg"></se-button>
-        <se-button id="layer_delete" title="${i18next.t('layers.del')}" size="small" src="./images/delete.svg"></se-button>
-        <se-button id="layer_rename" title="${i18next.t('layers.rename')}" size="small" src="./images/text.svg"></se-button>
-        <se-button id="layer_up" title="${i18next.t('layers.move_up')}" size="small" src="./images/go_up.svg"></se-button>
-        <se-button id="layer_down" title="${i18next.t('layers.move_down')}" size="small" src="./images/go_down.svg"></se-button>
-        <se-button id="layer_moreopts" title="${i18next.t('common.more_opts')}" size="small" src="./images/context_menu.svg">
+        <se-button id="layer_new" title="${i18next.t('layers.new')}" size="small" src="${imgPath}/new.svg"></se-button>
+        <se-button id="layer_delete" title="${i18next.t('layers.del')}" size="small" src="${imgPath}/delete.svg"></se-button>
+        <se-button id="layer_rename" title="${i18next.t('layers.rename')}" size="small" src="${imgPath}/text.svg"></se-button>
+        <se-button id="layer_up" title="${i18next.t('layers.move_up')}" size="small" src="${imgPath}/go_up.svg"></se-button>
+        <se-button id="layer_down" title="${i18next.t('layers.move_down')}" size="small" src="${imgPath}/go_down.svg"></se-button>
+        <se-button id="layer_moreopts" title="${i18next.t('common.more_opts')}" size="small" src="${imgPath}/context_menu.svg">
         </se-button>
       </fieldset>
       <table id="layerlist">
diff --git a/src/editor/panels/LeftPanel.js b/src/editor/panels/LeftPanel.js
index a06e1667..8a16642e 100644
--- a/src/editor/panels/LeftPanel.js
+++ b/src/editor/panels/LeftPanel.js
@@ -196,50 +196,52 @@ class LeftPanel {
    */
   init() {
     const { i18next } = this.editor;
+    const { imgPath } = this.editor.configObj.curConfig;
+
     // add Left panel
     const leftMenu = [
       {
-        menu: `<se-button id="tool_select" title="${i18next.t('tools.mode_select')}" src="./images/select.svg"></se-button>`,
+        menu: `<se-button id="tool_select" title="${i18next.t('tools.mode_select')}" src="${imgPath}/select.svg"></se-button>`,
         position: 1
       },
       {
-        menu: `<se-button id="tool_zoom" title="${i18next.t('tools.mode_zoom')}" src="./images/zoom.svg" shortcut="Z"></se-button>`,
+        menu: `<se-button id="tool_zoom" title="${i18next.t('tools.mode_zoom')}" src="${imgPath}/zoom.svg" shortcut="Z"></se-button>`,
         position: 2
       },
       {
-        menu: `<se-button id="tool_fhpath" title="${i18next.t('tools.mode_fhpath')}" src="./images/pencil.svg" shortcut="Q"></se-button>`,
+        menu: `<se-button id="tool_fhpath" title="${i18next.t('tools.mode_fhpath')}" src="${imgPath}/pencil.svg" shortcut="Q"></se-button>`,
         position: 3
       },
       {
-        menu: `<se-button id="tool_line" title="${i18next.t('tools.mode_line')}" src="./images/pen.svg" shortcut="L"></se-button>`,
+        menu: `<se-button id="tool_line" title="${i18next.t('tools.mode_line')}" src="${imgPath}/pen.svg" shortcut="L"></se-button>`,
         position: 4
       },
       {
-        menu: `<se-button id="tool_path" title="${i18next.t('tools.mode_path')}" src="./images/path.svg" shortcut="P"></se-button>`,
+        menu: `<se-button id="tool_path" title="${i18next.t('tools.mode_path')}" src="${imgPath}/path.svg" shortcut="P"></se-button>`,
         position: 5
       },
       {
         menu: `<se-flyingbutton id="tools_rect" title="${i18next.t('tools.square_rect_tool')}">
-        <se-button id="tool_rect" title="${i18next.t('tools.mode_rect')}" src="./images/rect.svg" shortcut="R"></se-button>
-        <se-button id="tool_square" title="${i18next.t('tools.mode_square')}" src="./images/square.svg"></se-button>
-        <se-button id="tool_fhrect" title="${i18next.t('tools.mode_fhrect')}" src="./images/fh_rect.svg"></se-button>
+        <se-button id="tool_rect" title="${i18next.t('tools.mode_rect')}" src="${imgPath}/rect.svg" shortcut="R"></se-button>
+        <se-button id="tool_square" title="${i18next.t('tools.mode_square')}" src="${imgPath}/square.svg"></se-button>
+        <se-button id="tool_fhrect" title="${i18next.t('tools.mode_fhrect')}" src="${imgPath}/fh_rect.svg"></se-button>
       </se-flyingbutton>`,
         position: 6
       },
       {
         menu: `<se-flyingbutton id="tools_ellipse" title="${i18next.t('tools.ellipse_circle_tool')}">
-          <se-button id="tool_ellipse" title="${i18next.t('tools.mode_ellipse')}" src="./images/ellipse.svg" shortcut="E"></se-button>
-          <se-button id="tool_circle" title="${i18next.t('tools.mode_circle')}" src="./images/circle.svg"></se-button>
-          <se-button id="tool_fhellipse" title="${i18next.t('tools.mode_fhellipse')}" src="./images/fh_ellipse.svg"></se-button>
+          <se-button id="tool_ellipse" title="${i18next.t('tools.mode_ellipse')}" src="${imgPath}/ellipse.svg" shortcut="E"></se-button>
+          <se-button id="tool_circle" title="${i18next.t('tools.mode_circle')}" src="${imgPath}/circle.svg"></se-button>
+          <se-button id="tool_fhellipse" title="${i18next.t('tools.mode_fhellipse')}" src="${imgPath}/fh_ellipse.svg"></se-button>
         </se-flyingbutton>`,
         position: 7
       },
       {
-        menu: `<se-button id="tool_text" title="${i18next.t('tools.mode_text')}" src="./images/text.svg" shortcut="T"></se-button>`,
+        menu: `<se-button id="tool_text" title="${i18next.t('tools.mode_text')}" src="${imgPath}/text.svg" shortcut="T"></se-button>`,
         position: 8
       },
       {
-        menu: `<se-button id="tool_image" title="${i18next.t('tools.mode_image')}" src="./images/image.svg"></se-button>`,
+        menu: `<se-button id="tool_image" title="${i18next.t('tools.mode_image')}" src="${imgPath}/image.svg"></se-button>`,
         position: 11
       }
     ];
diff --git a/src/editor/panels/TopPanel.js b/src/editor/panels/TopPanel.js
index ca22d2c9..4d969bd6 100644
--- a/src/editor/panels/TopPanel.js
+++ b/src/editor/panels/TopPanel.js
@@ -747,6 +747,7 @@ class TopPanel {
     // add Top panel
     const template = document.createElement("template");
     const { i18next } = this.editor;
+    const { imgPath } = this.editor.configObj.curConfig;
     // eslint-disable-next-line no-unsanitized/property
     template.innerHTML = `
       <div id="tools_top">
@@ -756,39 +757,39 @@ class TopPanel {
             id="tool_source"
             title="${i18next.t('tools.tool_source')}"
             shortcut="U"
-            src="./images/source.svg"
+            src="${imgPath}/source.svg"
           ></se-button>
           <se-button
             id="tool_wireframe"
             title="${i18next.t('tools.wireframe_mode')}"
             shortcut="F"
-            src="./images/wireframe.svg"
+            src="${imgPath}/wireframe.svg"
           ></se-button>
         </div> <!-- editor_panel -->
         <div id="history_panel">
           <div class="tool_sep"></div>
-          <se-button id="tool_undo" title="${i18next.t('tools.undo')}" shortcut="Z" src="./images/undo.svg" disabled></se-button>
-          <se-button id="tool_redo" title="${i18next.t('tools.redo')}" shortcut="Y" src="./images/redo.svg" disabled></se-button>
+          <se-button id="tool_undo" title="${i18next.t('tools.undo')}" shortcut="Z" src="${imgPath}/undo.svg" disabled></se-button>
+          <se-button id="tool_redo" title="${i18next.t('tools.redo')}" shortcut="Y" src="${imgPath}/redo.svg" disabled></se-button>
         </div> <!-- history_panel -->
         <!-- Buttons when a single element is selected -->
         <div id="selected_panel">
           <div class="toolset">
             <div class="tool_sep"></div>
-            <se-button id="tool_clone" title="${i18next.t('tools.clone')}" shortcut="D" src="./images/clone.svg"></se-button>
-            <se-button id="tool_delete" title="${i18next.t('tools.del')}" shortcut="Delete/Backspace" src="./images/delete.svg">
+            <se-button id="tool_clone" title="${i18next.t('tools.clone')}" shortcut="D" src="${imgPath}/clone.svg"></se-button>
+            <se-button id="tool_delete" title="${i18next.t('tools.del')}" shortcut="Delete/Backspace" src="${imgPath}/delete.svg">
             </se-button>
           </div>
           <div class="toolset">
             <div class="tool_sep"></div>
-            <se-button id="tool_move_top" title="${i18next.t('tools.move_top')}" shortcut="Ctrl+Shift+]" src="./images/move_top.svg">
+            <se-button id="tool_move_top" title="${i18next.t('tools.move_top')}" shortcut="Ctrl+Shift+]" src="${imgPath}/move_top.svg">
             </se-button>
-            <se-button id="tool_move_bottom" title="${i18next.t('tools.move_bottom')}" shortcut="Ctrl+Shift+[" src="./images/move_bottom.svg">
+            <se-button id="tool_move_bottom" title="${i18next.t('tools.move_bottom')}" shortcut="Ctrl+Shift+[" src="${imgPath}/move_bottom.svg">
             </se-button>
           </div>
           <div class="toolset">
-            <se-button id="tool_topath" title="${i18next.t('tools.to_path')}" src="./images/to_path.svg"></se-button>
-            <se-button id="tool_reorient" title="${i18next.t('tools.reorient_path')}" src="./images/reorient.svg"></se-button>
-            <se-button id="tool_make_link" title="${i18next.t('tools.make_link')}" src="./images/globe_link.svg"></se-button>
+            <se-button id="tool_topath" title="${i18next.t('tools.to_path')}" src="${imgPath}/to_path.svg"></se-button>
+            <se-button id="tool_reorient" title="${i18next.t('tools.reorient_path')}" src="${imgPath}/reorient.svg"></se-button>
+            <se-button id="tool_make_link" title="${i18next.t('tools.make_link')}" src="${imgPath}/globe_link.svg"></se-button>
           </div>
           <div class="toolset">
             <div class="tool_sep"></div>
@@ -797,28 +798,28 @@ class TopPanel {
           <div class="toolset">
             <se-input id="elem_class" data-attr="class" size="10" label="class" title="${i18next.t('properties.class')}"></se-input>
           </div>
-          <se-spin-input size="3" id="angle" min=-180 max=180 step=5 src="./images/angle.svg"
+          <se-spin-input size="3" id="angle" min=-180 max=180 step=5 src="${imgPath}/angle.svg"
             title="${i18next.t('properties.angle')}"></se-spin-input>
-          <se-spin-input size="2" id="blur" min=0 max=100 step=5 src="./images/blur.svg"
+          <se-spin-input size="2" id="blur" min=0 max=100 step=5 src="${imgPath}/blur.svg"
             title="${i18next.t('properties.blur')}"></se-spin-input>
           <se-list id="tool_position" title="${i18next.t('tools.align_to_page')}" label="" width="22px" height="24px">
             <se-list-item id="tool_posleft" value="l">
-              <img title="${i18next.t('tools.align_left')}" src="./images/align_left.svg" height="22px">
+              <img title="${i18next.t('tools.align_left')}" src="${imgPath}/align_left.svg" height="22px">
             </se-list-item>
             <se-list-item id="tool_poscenter" value="c">
-              <img title="${i18next.t('tools.align_center')}" src="./images/align_center.svg" height="22px">
+              <img title="${i18next.t('tools.align_center')}" src="${imgPath}/align_center.svg" height="22px">
             </se-list-item>
             <se-list-item id="tool_posright" value="r">
-              <img title="${i18next.t('tools.align_right')}" src="./images/align_right.svg" height="22px">
+              <img title="${i18next.t('tools.align_right')}" src="${imgPath}/align_right.svg" height="22px">
             </se-list-item>
             <se-list-item id="tool_postop" value="t">
-              <img title="${i18next.t('tools.align_top')}" src="./images/align_top.svg" height="22px">
+              <img title="${i18next.t('tools.align_top')}" src="${imgPath}/align_top.svg" height="22px">
             </se-list-item>
             <se-list-item id="tool_posmiddle" value="m">
-              <img title="${i18next.t('tools.align_middle')}" src="./images/align_middle.svg" height="22px">
+              <img title="${i18next.t('tools.align_middle')}" src="${imgPath}/align_middle.svg" height="22px">
             </se-list-item>
             <se-list-item id="tool_posbottom" value="b">
-              <img title="${i18next.t('tools.align_bottom')}" src="./images/align_bottom.svg" height="22px">
+              <img title="${i18next.t('tools.align_bottom')}" src="${imgPath}/align_bottom.svg" height="22px">
             </se-list-item>
           </se-list>
           <div id="xy_panel" class="toolset">
@@ -831,19 +832,19 @@ class TopPanel {
         <!-- Buttons when multiple elements are selected -->
         <div id="multiselected_panel">
           <div class="tool_sep"></div>
-          <se-button id="tool_clone_multi" title="${i18next.t('tools.clone')}" shortcut="C" src="./images/clone.svg"></se-button>
+          <se-button id="tool_clone_multi" title="${i18next.t('tools.clone')}" shortcut="C" src="${imgPath}/clone.svg"></se-button>
           <se-button id="tool_delete_multi" title="${i18next.t('tools.del')}" shortcut="Delete/Backspace"
-            src="./images/delete.svg"></se-button>
+            src="${imgPath}/delete.svg"></se-button>
           <div class="tool_sep"></div>
-          <se-button id="tool_group_elements" title="${i18next.t('tools.group_elements')}" shortcut="G" src="./images/group_elements.svg">
+          <se-button id="tool_group_elements" title="${i18next.t('tools.group_elements')}" shortcut="G" src="${imgPath}/group_elements.svg">
           </se-button>
-          <se-button id="tool_make_link_multi" title="${i18next.t('tools.make_link')}" src="./images/globe_link.svg"></se-button>
-          <se-button id="tool_align_left" title="${i18next.t('tools.align_left')}" src="./images/align_left.svg"></se-button>
-          <se-button id="tool_align_center" title="${i18next.t('tools.align_center')}" src="./images/align_center.svg"></se-button>
-          <se-button id="tool_align_right" title="${i18next.t('tools.align_right')}" src="./images/align_right.svg"></se-button>
-          <se-button id="tool_align_top" title="${i18next.t('tools.align_top')}" src="./images/align_top.svg"></se-button>
-          <se-button id="tool_align_middle" title="${i18next.t('tools.align_middle')}" src="./images/align_middle.svg"></se-button>
-          <se-button id="tool_align_bottom" title="${i18next.t('tools.align_bottom')}" src="./images/align_bottom.svg"></se-button>
+          <se-button id="tool_make_link_multi" title="${i18next.t('tools.make_link')}" src="${imgPath}/globe_link.svg"></se-button>
+          <se-button id="tool_align_left" title="${i18next.t('tools.align_left')}" src="${imgPath}/align_left.svg"></se-button>
+          <se-button id="tool_align_center" title="${i18next.t('tools.align_center')}" src="${imgPath}/align_center.svg"></se-button>
+          <se-button id="tool_align_right" title="${i18next.t('tools.align_right')}" src="${imgPath}/align_right.svg"></se-button>
+          <se-button id="tool_align_top" title="${i18next.t('tools.align_top')}" src="${imgPath}/align_top.svg"></se-button>
+          <se-button id="tool_align_middle" title="${i18next.t('tools.align_middle')}" src="${imgPath}/align_middle.svg"></se-button>
+          <se-button id="tool_align_bottom" title="${i18next.t('tools.align_bottom')}" src="${imgPath}/align_bottom.svg"></se-button>
           <se-list id="tool_align_relative" label="relative to:">
             <se-list-item id="selected_objects" value="selected">${i18next.t('tools.selected_objects')}</se-list-item>
             <se-list-item id="largest_object" value="largest">${i18next.t('tools.largest_object')}</se-list-item>
@@ -860,7 +861,7 @@ class TopPanel {
             </se-spin-input>
           </div>
           <se-spin-input id="rect_rx" min=0 max=1000 step=1 size="3" title="${i18next.t('properties.corner_radius')}"
-            data-attr="Corner Radius" src="./images/c_radius.svg"></se-spin-input>
+            data-attr="Corner Radius" src="${imgPath}/c_radius.svg"></se-spin-input>
         </div> <!-- rect_panel -->
         <div id="image_panel">
           <div class="toolset">
@@ -917,15 +918,15 @@ class TopPanel {
         </div> <!-- line_panel -->
         <div id="text_panel">
           <div class="toolset">
-          <se-button id="tool_bold" title="${i18next.t('properties.bold')}" src="./images/bold.svg" shortcut="B"></se-button>
-          <se-button id="tool_italic" title="${i18next.t('properties.italic')}" src="./images/italic.svg" shortcut="I"></se-button>
+          <se-button id="tool_bold" title="${i18next.t('properties.bold')}" src="${imgPath}/bold.svg" shortcut="B"></se-button>
+          <se-button id="tool_italic" title="${i18next.t('properties.italic')}" src="${imgPath}/italic.svg" shortcut="I"></se-button>
           </div>
           <div class="toolset">
-          <se-button id="tool_text_anchor_start" title="${i18next.t('properties.text_anchor_start')}" src="./images/anchor_start.svg">
+          <se-button id="tool_text_anchor_start" title="${i18next.t('properties.text_anchor_start')}" src="${imgPath}/anchor_start.svg">
           </se-button>
-          <se-button id="tool_text_anchor_middle" title="${i18next.t('properties.text_anchor_middle')}" src="./images/anchor_middle.svg">
+          <se-button id="tool_text_anchor_middle" title="${i18next.t('properties.text_anchor_middle')}" src="${imgPath}/anchor_middle.svg">
           </se-button>
-          <se-button id="tool_text_anchor_end" title="${i18next.t('properties.text_anchor_end')}" src="./images/anchor_end.svg">
+          <se-button id="tool_text_anchor_end" title="${i18next.t('properties.text_anchor_end')}" src="${imgPath}/anchor_end.svg">
           </se-button>
           </div>
           <se-list id="tool_font_family" label="Font:">
@@ -939,7 +940,7 @@ class TopPanel {
           <se-list-item value="Times" style="font-family:times;">${i18next.t('properties.times')}</se-list-item>
           </se-list>
           <se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="${i18next.t('properties.font_size')}"
-          src="./images/fontsize.svg"></se-spin-input>
+          src="${imgPath}/fontsize.svg"></se-spin-input>
           <!-- Not visible, but still used -->
           <input id="text" type="text" size="35" />
         </div> <!-- text_panel -->
@@ -954,11 +955,11 @@ class TopPanel {
         </div> <!-- container_panel -->
         <div id="use_panel">
           <se-button id="tool_unlink_use" title="${i18next.t('tools.tool_unlink_use')}"
-            src="./images/unlink_use.svg">
+            src="${imgPath}/unlink_use.svg">
           </se-button>
         </div> <!-- use_panel -->
         <div id="g_panel">
-          <se-button id="tool_ungroup" title="${i18next.t('tools.ungroup')}" src="./images/ungroup.svg">
+          <se-button id="tool_ungroup" title="${i18next.t('tools.ungroup')}" src="${imgPath}/ungroup.svg">
           </se-button>
         </div> <!-- g_panel -->
         <!-- For anchor elements -->
@@ -970,7 +971,7 @@ class TopPanel {
         </div> <!-- a_panel -->
         <div id="path_node_panel">
           <div class="tool_sep"></div>
-          <se-button id="tool_node_link" title="${i18next.t('tools.node_link')}" src="./images/tool_node_link.svg" pressed>
+          <se-button id="tool_node_link" title="${i18next.t('tools.node_link')}" src="${imgPath}/tool_node_link.svg" pressed>
           </se-button>
           <div class="tool_sep"></div>
           <se-spin-input id="path_node_x" data-attr="x" size="4" title="${i18next.t('properties.node_x')}" label="x:">
@@ -981,11 +982,11 @@ class TopPanel {
             <option id="straight_segments" selected="selected" value="4">${i18next.t('properties.straight_segments')}</option>
             <option id="curve_segments" value="6">${i18next.t('properties.curve_segments')}</option>
           </select>
-          <se-button id="tool_node_clone" title="${i18next.t('tools.node_clone')}" src="./images/tool_node_clone.svg"></se-button>
-          <se-button id="tool_node_delete" title="${i18next.t('tools.node_delete')}" src="./images/tool_node_delete.svg"></se-button>
-          <se-button id="tool_openclose_path" title="${i18next.t('tools.openclose_path')}" src="./images/tool_openclose_path.svg">
+          <se-button id="tool_node_clone" title="${i18next.t('tools.node_clone')}" src="${imgPath}/tool_node_clone.svg"></se-button>
+          <se-button id="tool_node_delete" title="${i18next.t('tools.node_delete')}" src="${imgPath}/tool_node_delete.svg"></se-button>
+          <se-button id="tool_openclose_path" title="${i18next.t('tools.openclose_path')}" src="${imgPath}/tool_openclose_path.svg">
           </se-button>
-          <se-button id="tool_add_subpath" title="${i18next.t('tools.add_subpath')}" src="./images/tool_add_subpath.svg"></se-button>
+          <se-button id="tool_add_subpath" title="${i18next.t('tools.add_subpath')}" src="${imgPath}/tool_add_subpath.svg"></se-button>
         </div> <!-- path_node_panel -->
         <div id="cur_context_panel"></div>
      </div>
diff --git a/src/svgcanvas/select.js b/src/svgcanvas/select.js
index d0c10f85..8b99bfba 100644
--- a/src/svgcanvas/select.js
+++ b/src/svgcanvas/select.js
@@ -365,7 +365,7 @@ export class SelectorManager {
           r: gripRadius,
           stroke: '#22C',
           'stroke-width': 2,
-          style: 'cursor:url(' + config_.imgPath + 'rotate.svg) 12 12, auto;'
+          style: `cursor:url(${config_.imgPath}/rotate.svg) 12 12, auto;`
         }
       });
     this.selectorGripsGroup.append(this.rotateGrip);
diff --git a/src/svgcanvas/svgcanvas.js b/src/svgcanvas/svgcanvas.js
index 8c442de9..f4ac97ff 100644
--- a/src/svgcanvas/svgcanvas.js
+++ b/src/svgcanvas/svgcanvas.js
@@ -804,7 +804,7 @@ class SvgCanvas {
     const removedElements = {};
 
     // String with image URL of last loadable image
-    let lastGoodImgUrl = curConfig.imgPath + 'logo.svg';
+    let lastGoodImgUrl = `${curConfig.imgPath}/logo.svg`;
     // Boolean indicating whether or not a draw action has been started
     let started = false;
     // String with an element's initial transform attribute value