devtools: dots-viewer: Add a button to download the SVG file

Part-of: <https://gitlab.freedesktop.org/gstreamer/gstreamer/-/merge_requests/8696>

subprojects/gst-devtools/dots-viewer/static/overlay.html

@@ -48,6 +48,10 @@ furnished to do so, subject to the following conditions:
       Click node to highlight<br/>Shift-Ctrl-scroll or w/s to zoom<br/>Esc to unhighlight
     </div>
 
+    <div class="floating-rectangle" id="actions" style="top: auto; bottom: 100px; left: 10px;">
+      <button id="save-svg" class="btn btn-primary btn-sm" style="margin-right: 5px;">Save SVG</button>
+    </div>
+
 
 
     <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
@@ -82,11 +86,25 @@ furnished to do so, subject to the following conditions:
               } else if (evt.key == "s") {
                 gv.scaleInView((gv.zoom.percentage - 100) || 100);
               }
-            })
+            });
+
+            $("#save-svg").click(function() {
+              const svgElement = $("#graph svg")[0];
+              const svgData = new XMLSerializer().serializeToString(svgElement);
+              const blob = new Blob([svgData], {type: "image/svg+xml;charset=utf-8"});
+              const url = URL.createObjectURL(blob);
+              const title = document.getElementById("title").textContent.trim();
+              const downloadLink = document.createElement("a");
+              downloadLink.href = url;
+              downloadLink.download = title + ".svg";
+              document.body.appendChild(downloadLink);
+              downloadLink.click();
+              document.body.removeChild(downloadLink);
+              URL.revokeObjectURL(url);
+            });
           }
         });
       });
       </script>
   </body>
 </html>
-