Fix rendering of exported SVG (#2794)

Replace invalid characters in attribute value; fixes the error

        Unescaped '<' not allowed in attributes values

Fixes #2534

client/app/scripts/utils/__tests__/dom-utils-test.js

@@ -0,0 +1,15 @@
+import { encodeIdAttribute, decodeIdAttribute } from '../dom-utils';
+
+describe('DomUtils', () => {
+  describe('encodeIdAttribute/decodeIdAttribute', () => {
+    it('encode should be reversible by decode ', () => {
+      [
+        '123-abc;<foo>',
+        ';;<<><>',
+        '!@#$%^&*()+-\'"',
+      ].forEach((input) => {
+        expect(decodeIdAttribute(encodeIdAttribute(input))).toEqual(input);
+      });
+    });
+  });
+});

client/app/scripts/utils/dom-utils.js

@@ -0,0 +1,16 @@
+/**
+ * Cleans up a value to be used as an element ID.
+ *
+ * Encodes invalid characters to be valid in XHTML and makes it
+ * so that it can be reversed by {@link decodeIdAttribute}.
+ */
+export function encodeIdAttribute(id) {
+  return id.replace(/[<>&;]/gm, m => `__u${m.charCodeAt(0)}__`);
+}
+
+/**
+ * Reverts {@link encodeIdAttribute}.
+ */
+export function decodeIdAttribute(id) {
+  return id.replace(/__u(\d+)__/gm, (m, d) => String.fromCharCode(d));
+}