diff --git a/buildtools/svg-viewbox-cmd.js b/buildtools/svg-viewbox-cmd.js
new file mode 100755
index 000000000000..dbc1366bd79a
--- /dev/null
+++ b/buildtools/svg-viewbox-cmd.js
@@ -0,0 +1,94 @@
+const simpleHTMLTokenizer = require('simple-html-tokenizer');
+const querystring = require('querystring');
+const generate = require('./generate-xml-from-tokens.js');
+const parseUnit = require('parse-absolute-css-unit');
+const {program} = require('commander');
+console.log('11');
+
+function process(source, resourceQuery) {
+ let tokens = simpleHTMLTokenizer.tokenize(source);
+
+ tokens = tokens.map((tag) => {
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
+ if (tag.type === 'StartTag' && tag.tagName === 'svg') {
+ let width = undefined;
+ let height = undefined;
+ let viewBox = undefined;
+ for (const attribute of tag.attributes) {
+ if (attribute[0] === 'width') {
+ try {
+ width = parseUnit(attribute[1]);
+ } catch (e) {
+ console.warn('Unable to read width: ' + attribute[1]);
+ }
+ }
+ if (attribute[0] === 'height') {
+ try {
+ height = parseUnit(attribute[1]);
+ } catch (e) {
+ console.warn('Unable to read height: ' + attribute[1]);
+ }
+ }
+ if (attribute[0] === 'viewBox') {
+ viewBox = attribute[1];
+ }
+ }
+ if (viewBox !== undefined && width === undefined && height === undefined) {
+ try {
+ const attrs = viewBox.split(' ');
+ width = parseFloat(attrs[2]);
+ height = parseFloat(attrs[3]);
+ } catch (e) {
+ console.warn('Unable to read viewBox: ' + viewBox);
+ }
+ }
+ if (width !== undefined && height != undefined) {
+ tag.attributes = tag.attributes.filter((attribute) => {
+ return (
+ attribute[0] !== 'width' &&
+ attribute[0] !== 'height' &&
+ attribute[0] !== 'x' &&
+ attribute[0] !== 'y'
+ );
+ });
+ if (viewBox === undefined) {
+ tag.attributes.push(['viewBox', `0 0 ${width} ${height}`, true]);
+ }
+ const queryString = resourceQuery.startsWith('?') ? resourceQuery.substring(1) : resourceQuery;
+ const query = querystring.decode(queryString);
+ if (query.width !== undefined) {
+ const parsed = query.width.match(/^([0-9]+)([a-z]*)$/);
+ tag.attributes.push(['width', query.width, true]);
+ tag.attributes.push(['height', `${(height / width) * parseFloat(parsed[1])}${parsed[2]}`, true]);
+ } else if (query.height !== undefined) {
+ const parsed = query.height.match(/^([0-9]+)([a-z]*)$/);
+ tag.attributes.push(['width', `${(width / height) * parseFloat(parsed[1])}${parsed[2]}`, true]);
+ tag.attributes.push(['height', query.height, true]);
+ } else {
+ tag.attributes.push(['width', width, true]);
+ tag.attributes.push(['height', height, true]);
+ }
+ }
+ }
+ return tag;
+ });
+
+ return generate(tokens);
+}
+
+function main(args) {
+ uri = args[0];
+ resourceQuery = args[1];
+ const fs = require('fs');
+ const source = fs.readFileSync(uri, 'utf-8');
+ const result = process(source, resourceQuery);
+ fs.writeFileSync(uri, result, 'utf-8');
+}
+
+// If running this module directly then call the main function.
+if (require.main === module) {
+ program.parse(process.argv);
+ main(program.args);
+}
+
+module.exports = main;
diff --git a/contribs/gmf/apps/desktop/index.html.ejs b/contribs/gmf/apps/desktop/index.html.ejs
index 6cb865c50ee4..4971fc057236 100644
--- a/contribs/gmf/apps/desktop/index.html.ejs
+++ b/contribs/gmf/apps/desktop/index.html.ejs
@@ -14,7 +14,7 @@
- <%=require('gmf/icons/spinner.svg?viewbox&height=1em')%>
+ <%=require('gmf/icons/spinner-1em.svg')%>
diff --git a/contribs/gmf/apps/desktop_alt/index.html.ejs b/contribs/gmf/apps/desktop_alt/index.html.ejs
index 44156416446d..a715a68d0b17 100644
--- a/contribs/gmf/apps/desktop_alt/index.html.ejs
+++ b/contribs/gmf/apps/desktop_alt/index.html.ejs
@@ -14,7 +14,7 @@
- <%=require('gmf/icons/spinner.svg?viewbox&height=1em')%>
+ <%=require('gmf/icons/spinner-1em.svg')%>
diff --git a/contribs/gmf/apps/iframe_api/index.html.ejs b/contribs/gmf/apps/iframe_api/index.html.ejs
index af3bfe772d16..6fcefbf9dc6d 100644
--- a/contribs/gmf/apps/iframe_api/index.html.ejs
+++ b/contribs/gmf/apps/iframe_api/index.html.ejs
@@ -14,7 +14,7 @@
- <%=require('gmf/icons/spinner.svg?viewbox&height=1em')%>
+ <%=require('gmf/icons/spinner-1em.svg')%>
diff --git a/contribs/gmf/apps/mobile/index.html.ejs b/contribs/gmf/apps/mobile/index.html.ejs
index 682651af76a3..495711793106 100644
--- a/contribs/gmf/apps/mobile/index.html.ejs
+++ b/contribs/gmf/apps/mobile/index.html.ejs
@@ -19,7 +19,7 @@
'gmf-mobile-nav-right-is-visible': mainCtrl.rightNavVisible}">
- <%=require('gmf/icons/spinner.svg?viewbox&height=1em')%>
+ <%=require('gmf/icons/spinner-1em.svg')%>
diff --git a/contribs/gmf/apps/mobile_alt/index.html.ejs b/contribs/gmf/apps/mobile_alt/index.html.ejs
index c7700138069a..355c67b5130e 100644
--- a/contribs/gmf/apps/mobile_alt/index.html.ejs
+++ b/contribs/gmf/apps/mobile_alt/index.html.ejs
@@ -19,7 +19,7 @@
'gmf-mobile-nav-right-is-visible': mainCtrl.rightNavVisible}">
- <%=require('gmf/icons/spinner.svg?viewbox&height=1em')%>
+ <%=require('gmf/icons/spinner-1em.svg')%>
diff --git a/package.json b/package.json
index 6b17685cf527..cafa03d7f063 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,8 @@
},
"bin": {
"compile-catalog": "buildtools/compile-catalog.js",
- "check-example": "buildtools/check-example.js"
+ "check-example": "buildtools/check-example.js",
+ "svg-viewbox": "buildtools/svg-viewbox-cmd.js"
},
"browser": {
"ngeo/test": "./test/spec",
diff --git a/src/icons/spinner-1em.svg b/src/icons/spinner-1em.svg
new file mode 100644
index 000000000000..dba6afc28875
--- /dev/null
+++ b/src/icons/spinner-1em.svg
@@ -0,0 +1 @@
+
diff --git a/src/icons/spinner-1rem.svg b/src/icons/spinner-1rem.svg
new file mode 100644
index 000000000000..69053c793485
--- /dev/null
+++ b/src/icons/spinner-1rem.svg
@@ -0,0 +1 @@
+
diff --git a/src/icons/spinner-3rem.svg b/src/icons/spinner-3rem.svg
new file mode 100644
index 000000000000..80cb3658333b
--- /dev/null
+++ b/src/icons/spinner-3rem.svg
@@ -0,0 +1 @@
+
diff --git a/src/import/importdatasourceComponent.html b/src/import/importdatasourceComponent.html
index ad35c48e70e2..535ecab6760d 100644
--- a/src/import/importdatasourceComponent.html
+++ b/src/import/importdatasourceComponent.html
@@ -63,9 +63,7 @@
-
- <%=require('gmf/icons/spinner.svg?viewbox&height=1em')%>
-
+ <%=require('gmf/icons/spinner-1em.svg')%>
<%=require('gmf/icons/spinner.svg?viewbox&height=1rem')%><%=require('gmf/icons/spinner-1rem.svg')%>
Share this map
>
-
- <%=require('gmf/icons/spinner.svg?viewbox&height=1rem')%>
-
+ <%=require('gmf/icons/spinner-1rem.svg')%>
diff --git a/src/print/component.html b/src/print/component.html
index f5fc151c50f0..2dd6b5f14dea 100644
--- a/src/print/component.html
+++ b/src/print/component.html
@@ -153,9 +153,7 @@
diff --git a/src/query/windowComponent.html b/src/query/windowComponent.html
index fa85a91bdc1d..5bcebd3ebaf3 100644
--- a/src/query/windowComponent.html
+++ b/src/query/windowComponent.html
@@ -1,5 +1,5 @@
- <%=require('gmf/icons/spinner.svg?viewbox&height=3rem')%>
+ <%=require('gmf/icons/spinner-3rem.svg')%>
{{ctrl.elevationValue}}
- <%=require('gmf/icons/spinner.svg?viewbox&height=1rem')%>
+ <%=require('gmf/icons/spinner-1rem.svg')%>
Raster