如何將生成的 svg 代碼保存到客戶端計算機中的 .svg 文件中？

Question

我使用 snap.svg 庫通過加載其他外部 .svg 文件並操作它們以獲得最終的 svg 元素，在我的 asp.net 網頁表單頁面中使用 javascript 生成一個 svg 元素。 一旦所需 svg 對象的組合完成並且生成的 svg 元素在我的頁面中顯示正常，我需要將它保存為客戶端計算機中用戶選擇的路徑中的 .svg 文件。 關於如何直接做到這一點的任何想法？ 我的意思是，無需將代碼發送到服務器，在服務器中生成文件，然后將文件下載到客戶端機器。

Answer 1

您可以通過兩個簡單的步驟完成此操作：

1. 使用new XMLSerializer().serializeToString(svg); 從您的 SVG 獲取字符串
2. 使用 FileSaver.js 實際保存文件（ https://github.com/koffsyrup/FileSaver.js ）

這應該適用於大多數情況（當然，Safari 除外）。

Answer 2

您可以在img元素的數據 URI 中嵌入內聯 SVG 代碼：

 <img src='data:image/svg+xml;charset=UTF-8, <svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg>' />

保存不會自動啟動，但用戶可以右鍵單擊 → 將圖像另存為。 SVG 需要有xmlns="http://www.w3.org/2000/svg" ，就像在 SVG 文件中一樣。 要嵌入現有的 SVG 元素，請獲取其outerHTML HTML 並在數據 URI 中使用該 HTML 創建img元素，如上所示。

注意事項：

• 保存時，瀏覽器建議的默認文件名類似於download.svg ，我認為您無法更改它。
• 不能在 SVG 中使用單引號 ( ' )，因為它們用於表示數據 URI 的開始和結束位置。
• 之后您無法修改SVG 的內容，因為它位於img標簽中。
• SVG 不會使用頁面的樣式，但是使用任何其他方法保存的 SVG 文件也會遇到這個問題。