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

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

導(dǎo)出設(shè)計(jì)時(shí)會(huì)遇到的問題及原因

對(duì)于 PNG 導(dǎo)出, 默認(rèn)的設(shè)置下, 導(dǎo)出的圖像會(huì)很模糊. 幸運(yùn)的是, 可以在導(dǎo)出時(shí)通過將圖表的縮放比例調(diào)制 250% ~ 300% (甚至更高) 來解決. ²

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

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

圖 2: 顯示異常的圖片

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

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

因此, draw.io 的開發(fā)人員在 SVG 中加入了一個(gè) <switch> 標(biāo)簽, 使得不支持 <foreignObject> 中內(nèi)容的查看器在渲染這樣的 SVG 時(shí), 會(huì)顯示上述的提示信息文本.

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

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

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

不過, 按照 draw.io 的一位開發(fā)人員的說法, 其實(shí) draw.io 這個(gè)項(xiàng)目最開始并不是為了畫圖, 更沒有導(dǎo)出 SVG 的選項(xiàng); 就連現(xiàn)在, 其定位也不是一個(gè)矢量圖繪制軟件. 所以, 對(duì)于開發(fā)者來說, 上述這些, 并不能算是軟件的 BUG, 甚至不用去理會(huì).

解決方案

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

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

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

需要注意的是:

• 禁用 “自動(dòng)換行” 后, 之前適應(yīng)文本框大小自動(dòng)換行的文本將變?yōu)橐恍? 需要手動(dòng)鍵入換行符將長文本分成多行;
• 禁用 “格式化文本” 后, 一個(gè)文本框中將不支持多種格式的文本, 必須以一個(gè)文本框?yàn)閱挝徽w調(diào)整文本的樣式.

每次手動(dòng)禁用這些選項(xiàng)可能會(huì)有點(diǎn)麻煩, 可以直接 “禁用 <foreignObject> 的使用”.

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

法 2: 導(dǎo)出 PDF 后再轉(zhuǎn)換為 SVG

我們知道, PDF 中的數(shù)據(jù)一般是沒有上下文語義的; 可以說, 它只包含各個(gè)元素的樣式以及對(duì)應(yīng)的位置, 是一種用來存儲(chǔ)排版結(jié)果的格式, 并不會(huì)輕易改變. ⁷

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

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

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

最新 draw.io 的 SVG 導(dǎo)出選項(xiàng)中可以修改 “文本設(shè)置”, 有一個(gè) “將文本標(biāo)簽 (label) 轉(zhuǎn)換為 SVG” 的選項(xiàng). 據(jù)開發(fā)者所說, 就是將該文件上傳到他們的服務(wù)器, 以進(jìn)行上述的轉(zhuǎn)換.

小結(jié)

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

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

其他資料

關(guān)于這個(gè)事情, 有一些相關(guān)的有意思的討論可以圍觀:

• 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) (提到了關(guān)于 “導(dǎo)出”, “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 以及下邊的評(píng)論:

  • 用代碼畫圖 / 代碼形式的圖表: Structurizr;
  • 一個(gè)基于 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矢量圖導(dǎo)入Word顯示有誤的問題以及推薦幾種SVG繪圖方法 - CSDN
• draw.io 導(dǎo)出 SVG 圖片報(bào)錯(cuò)

---

可以訪問 app.diagrams.net 在線使用, 也有很多平臺(tái)提供 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 論壇 下的 回復(fù) ??

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。