draw.io 是一個簡單易用的圖表 (diagram) 繪制工具 ¹, 可以用作一個簡單的矢量圖繪制工具, 畫一些簡單的圖標或者流程圖等等都很適合.

雖然好用, 但是在導出 *.drawio 文件為其他格式時, 大多數時候都需要額外注意.

導出設計時會遇到的問題及原因

對于 PNG 導出, 默認的設置下, 導出的圖像會很模糊. 幸運的是, 可以在導出時通過將圖表的縮放比例調制 250% ~ 300% (甚至更高) 來解決. ²

至于 SVG，事情就變得有點復雜. 在瀏覽器中查看軟件導出的 SVG 文件時, 一切似乎都很好. 但是, 當嘗試將這些 SVG 導入 Word 或 Inkscape 等軟件時，則可能會看到圖片上出現 “Viewer does not support full SVG 1.1 (查看器不支持完整的 SVG 1.1)” 字樣 ³.

圖 1: 在 draw.io 中繪制的圖片

圖 2: 顯示異常的圖片

大多數情況下, 這種情況是因為 draw.io 使用了 HTML 代碼來標記文本框中的自動換行的長文本 / 復雜格式的文本 / (或者還有其他的圖元), 并將這些代碼直接嵌入到了 SVG 的 <foreignObject> 標簽中.

現代瀏覽器自然是能夠解析這些 HTML 代碼的, 因此在其中查看不會出現太多的問題. 然而這些 “外來 (foreign)” 的 HTML 代碼并不能被 Inkscape 等專門處理 SVG 的軟件理解.

因此, draw.io 的開發人員在 SVG 中加入了一個 <switch> 標簽, 使得不支持 <foreignObject> 中內容的查看器在渲染這樣的 SVG 時, 會顯示上述的提示信息文本.

總之, 并不是這些查看器 “不支持 SVG 1.1”, 而是因為這些 SVG 中 <foreignObject> 部分包含了不能被瀏覽器 (或者其他能渲染 HTML 的程序) 之外的程序所解析的內容.

另一方面, 盡管瀏覽器能夠查看這些 SVG, 但是對于瀏覽器來說, 事實上 SVG 代碼才是 "外來 (foreign)’ 之物. ⁴

至于目前 draw.io 對于這長文本 / 復雜格式文本的 SVG 后備方案, draw.io 只是輸出了一段修剪過后的文本, 十分沒用.

不過, 按照 draw.io 的一位開發人員的說法, 其實 draw.io 這個項目最開始并不是為了畫圖, 更沒有導出 SVG 的選項; 就連現在, 其定位也不是一個矢量圖繪制軟件. 所以, 對于開發者來說, 上述這些, 并不能算是軟件的 BUG, 甚至不用去理會.

解決方案

法 1: 禁用換行與文本格式

目前, 官方博客中給出的解決方法, 就是手動全選圖表上的元素, 在 “格式面板 (Format Pannel)” 的 “Text (文本)” 選項卡下, 手動禁用掉 “Word Wrap (自動換行)” 和 “Formatted Text (格式化文本)”. ⁵

這樣處理之后, draw.io 導出的 SVG 就會干干凈凈的了 (不含 <foreignObject>, 可以被 Word 等軟件正常讀取).

需要注意的是:

• 禁用 “自動換行” 后, 之前適應文本框大小自動換行的文本將變為一行, 需要手動鍵入換行符將長文本分成多行;
• 禁用 “格式化文本” 后, 一個文本框中將不支持多種格式的文本, 必須以一個文本框為單位整體調整文本的樣式.

每次手動禁用這些選項可能會有點麻煩, 可以直接 “禁用 <foreignObject> 的使用”.

• 如果是在線使用 app.diagrams.net, 可以直接訪問 app.diagrams.net/#_CONFIG_UzV3UjUyyk0tSk8F0qrGjqpggeLM3IKcVJ/EpNScYoh4SVFpqqq5CxABAA==, 直接配置對應的設置 ⁶;
• 或者在軟件的 “其他” 選項中選擇 “配置 (Configuration)”, 添加鍵值對 "simpleLabels": true, 結果如下:{"simpleLabels": true// Other configurations... }

法 2: 導出 PDF 后再轉換為 SVG

我們知道, PDF 中的數據一般是沒有上下文語義的; 可以說, 它只包含各個元素的樣式以及對應的位置, 是一種用來存儲排版結果的格式, 并不會輕易改變. ⁷

由于瀏覽器能夠渲染排版這樣包含 HTML 的 SVG, 并且瀏覽器一般具有 (將排版后的頁面內容) 導出為 (打印為) PDF 的功能 ⁸. 于是, 可以利用該功能, 將瀏覽器對該 SVG 的排版結果導出到 PDF 里, 再通過 Inkscape 從 PDF 中還原 SVG.

PDF 中包含的一般是穩定的格式, 從中還原出的 SVG 自然也相對穩定 (可能由于字體因素產生些許失真).

不過, 經過生成 PDF 再復原的過程, 一般會喪失許多 SVG 的語義, 比如文本不再能夠被連貫的復制出來; 如果生成 PDF 的過程進行了轉曲的操作, 這些文本可能甚至不再能夠被選取復制.

最新 draw.io 的 SVG 導出選項中可以修改 “文本設置”, 有一個 “將文本標簽 (label) 轉換為 SVG” 的選項. 據開發者所說, 就是將該文件上傳到他們的服務器, 以進行上述的轉換.

小結

綜上, 目前有這些可行的解決方案：

• 對于簡單的 SVG 圖表 (不包含長文本 / 復雜格式文本), 只需按照上面提到的方法操作即可;
• 嘗試 (使用瀏覽器) 將 SVG 導出為 PDF, 然后使用 Inkscape 從 PDF 生成 SVG.

其他資料

關于這個事情, 有一些相關的有意思的討論可以圍觀:

• Issue #774 · jgraph/drawio;
• Inkscape “Viewer does not support full SVG 1.1” - Using Inkscape with Other Programs - Inkscape Forum (還提到了 XSLT)
• Truly Headless Draw.io Exports - Hacker News (ycombinator.com) (提到了關于 “導出”, “SVG 暗黑模式適配” 等問題)

---

其他可能有用的文章:

• Things you need to know about working with SVG in VS Code (freecodecamp.org)

• How I use draw.io at the command line | Tom Donohue 以及下邊的評論:

  • 用代碼畫圖 / 代碼形式的圖表: Structurizr;
  • 一個基于 Web 的 PlantUML 編輯器: http://www.plantuml.com/plantuml;
  • …

• 處理已壓縮的 .drawio 文件 (可以在 ‘properties’ 中刪除): Text-editing a draw.io file exported as SVG with embedded drawing - Stack Overflow

• 4. Multiline SVG Text - SVG Text Layout [Book] (oreilly.com);

• SVG element reference | MDN 以及 <text> 元素的文檔;

---

• 解決draw.io生成SVG矢量圖導入Word顯示有誤的問題以及推薦幾種SVG繪圖方法 - CSDN
• draw.io 導出 SVG 圖片報錯

---

可以訪問 app.diagrams.net 在線使用, 也有很多平臺提供 draw.io 的換皮版本. ??

Export a diagram as a higher resolution PNG image : draw.io is becoming diagrams.net ??

最新版中, 文本已更改為 “Text is not SVG - cannot display (文本不是 SVG - 無法顯示)”. ??

引用自 Inkscape 論壇 中 @Xav 的回答. ??

參見 Why text in exported SVG images may not display correctly (diagrams.net). ??

來自 Inkscape 論壇 下的 回復 ??

可以參考視頻 “PDF 里, 到底都是些什么 - 嗶哩嗶哩”. ??

通常, 這個選項可以在上下文菜單的 “分享”, “打印” / “另存為 PDF” 中找到. ??

總結

以上是生活随笔為你收集整理的关于 draw.io 矢量图 SVG 导出的研究的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。