Remove selector from svg export + fix svg format

src/Components/Editor/Save.ts

@@ -38,14 +38,44 @@ export function SaveEditorAsJSON(
 
 export function SaveEditorAsSVG(): void {
   const svgWrapper = document.getElementById(ID) as HTMLElement;
-  const svg = svgWrapper.querySelector('svg') as SVGSVGElement;
-  const preface = '<?xml version="1.0" standalone="no"?>\r\n';
-  const svgBlob = new Blob([preface, svg.outerHTML], { type: 'image/svg+xml;charset=utf-8' });
-  const svgUrl = URL.createObjectURL(svgBlob);
-  createDownloadNode('state.svg', svgUrl);
+  let svg = svgWrapper.querySelector('svg') as SVGSVGElement;
+
+  if (svg === undefined) {
+    throw new Error('[SaveEditorAsSVG] Missing <svg> element');
   }
 
-function createDownloadNode(filename: string, datastring: string) {
+  // Recover svg from SVG Viewer
+  svg = svg.cloneNode(true) as SVGSVGElement;
+  svg.removeAttribute('height');
+  svg.removeAttribute('width');
+  const mainSvg = svg.children[1].children;
+  svg.replaceChildren(...mainSvg);
+
+  // remove the selector
+  const group = svg.children[svg.children.length - 1];
+  group.removeChild(group.children[group.children.length - 1]);
+
+  // get svg source.
+  const serializer = new XMLSerializer();
+  let source = serializer.serializeToString(svg);
+
+  // add name spaces.
+  if (source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/) == null) {
+    source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
+  }
+  if (source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/) == null) {
+    source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
+  }
+
+  // add xml declaration
+  source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
+
+  // convert svg source to URI data scheme.
+  const url = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source);
+  createDownloadNode('state.svg', url);
+}
+
+function createDownloadNode(filename: string, datastring: string): void {
   const downloadAnchorNode = document.createElement('a');
   downloadAnchorNode.href = datastring;
   downloadAnchorNode.download = filename;

src/Components/SVG/SVG.tsx

@@ -76,12 +76,12 @@ export const SVG: React.FC<ISVGProps> = (props: ISVGProps) => {
       >
         <svg {...properties}>
           { children }
-          <Selector selected={props.selected} />
           {
             SHOW_DIMENSIONS_PER_DEPTH
               ? <DepthDimensionLayer roots={props.children}/>
               : null
           }
+          <Selector selected={props.selected} /> {/* leave this at the end so it can be removed during the svg export */}
         </svg>
       </UncontrolledReactSVGPanZoom>
     </div>