HTML5 FUN 的筆順練習工具，除了提供 PNG 格式的部件圖片下載（一個部件一個檔案）；也有提供 SVG 格式的圖形檔（一個檔案中，放多個可以單獨操作的部件）。不過，不是每個工具或平台都能直接匯入 SVG 圖形檔，或是匯入了 SVG 圖形，卻被轉為非向量圖片，無法輕鬆地將筆順部件拆解。試了一下大家常用的工具：
- InkScape : 本身就是向量圖的編輯器，還能儲存或是匯出為各種格式，SVG 支援度最高，但可能需要花一點時間學習怎麼使用。
- Google 文件：不支援匯入 SVG 檔案，貼上的 SVG 圖形會轉為點陣圖，無法直接拆解部件。
- MS Office 線上版 : 可以貼上或是匯入 SVG 圖形，但是會轉為點陣圖，無法直接分解部件。
- Canva 網站：可以貼上或是匯入 SVG 圖形，但是會轉為點陣圖，無法直接分解部件。
- LibreOffice : SVG 支援度極高，貼上或是匯入的 SVG 圖片，而且還能拆解圖中的各部件。
▋ 好轉通吃的 ODP 簡報
LibreOffice 很好用，跟 MS Office 也很像，不但免費，能匯貼或是貼上 SVG 圖形，而且它儲存的簡報檔案 (.odp) 可以使用 Google 簡報、MS 簡報、Canva ...... 等來開啟，將 LibreOffice 簡報檔 (.odp) 上載到各平台的雲端硬碟中，開啟時，除了能轉成各平台的簡報格式外， .odp 簡報中的 SVG 圖形如果有「斷開」、解除群組，也能在各平台中保有圖形部件，直接獨立操作的特性。
什麼！還要再學怎麼使用 LibreOffice 哦！應該又一堆人卻步了！
 |
| [圖1] svg2odp 可以將筆順 SVG 轉為 ODP 簡報 |
最近花了一點時間研究怎麼將筆順練習匯出的 SVG 部件檔案，甚至其它 SVG 圖形檔，置入 LibreOffice 簡報(Impress) 的 .odp 的格式，並寫成一個小工具 (svg2odp)。透過簡單的步聚，即可輕鬆下載 .odp 的簡報檔案，然後可以將簡報檔案上載到 Google 雲端硬碟、微軟雲端硬碟，或是 Canva 中。
 |
| [圖2] 將 ODP 簡報上載到 Canva 可自行重組 |
▋ 使用方法
以 HTML5 FUN 筆順練習來說：
- ✅ 在筆順練習的「部件拆解」功能中，按一下左下角綠色的下載圖示 📥 (如圖3)。
- ✅ 按下「下載部件 SVG」或「下載筆畫 SVG」，即可儲存為 SVG 圖檔 (如圖3)。
- ✅ 利用「SVG 轉 ODP 簡報小工具」將 SVG 轉為 ODP 簡報檔。
- ✅ 將 ODP 簡報檔上傳到雲端硬碟或網站，並開啟檔案，即可得到國字部件， (如圖4)。
 |
| [圖3] 在筆順練習中下載 SVG 圖檔 |
 |
| [圖4] 將轉好的 ODP 簡報檔案上傳到 Canva |
▋ SVG 轉 ODP 簡報小工具
拖曳 SVG 筆順部件檔案到這裡(支援多檔案)
或是按這裡來選取檔案
解除所有群組
▋ 操作示範影片
▋Q & A
- Q: 勾選「解除所有群組」有什麼效果？
- A: SVG 轉 ODP 簡報小工具除了筆順練習的 SVG 檔，預設會保留各物件的群組設定，勾選「解除所有群組」後，所有的群組都會被解除；以筆順練習的 SVG 檔來說，通通會變成以筆畫為最小單位。群組都被解除的好處是可以自己再重組。
- Q: 一個簡報檔案中可以放幾個 SVG 圖形？
- A: 當有多個 SVG 圖形時，程式會計算適合的大小，所以數量就看個人需求。
- Q: 拖曳到轉換工具的圖形，怎樣刪除不用？
- A: 在每一張預覽圖片的右下角有一個叉叉，按一下即可移除。
- Q: 在轉換工具區塊右下角的綠色圓圈是做什麼的？
- A: 綠色圓圈可以貼上 SVG 圖形的語法，或是放在網路上的 SVG 圖形網址，程式會載入 SVG 圖片供轉換。
- 可以試試這幾個有提供 SVG 圖片網址或語法的圖庫網站：
- https://flowbite.com/
選單找 Icons 或是 Illustration ，按一下圖片即可複製 SVG 語法。 - https://www.svgrepo.com/
找到圖片 >> 按圖示 >> 按「Download SVG Vector」。 - https://openclipart.org/
找到圖片 >> 按圖片 >> 複製瀏覽器網址列中的圖片網址。 - Q: 在預覽圖片的左下角有一個鎖頭是什麼用的？
- A: 初版的工具無法處理較複雜的 SVG 圖形，就只能以不轉換繪圖指令的方式，將 SVG 圖片篏入 ODP 簡報檔中，因此以鎖頭的圖示來區別；現在的版本已經用 flatten.js 預先處理過了，所以大部份的圖片應該都不會再「加鎖」。
- Q: 那個燈泡的圖示是做什麼用的呢？
- A: 哈！務必試試看，多按幾次就知道囉！
▋ 參考資料
SVG 轉 ODP 簡報小工具中使用到的一些專案及相關的資料列在下面做個記錄，也感謝大家的分享，解決了我不少問題：
- OpenDocument
https://www.datypic.com/sc/odf/ - svg2android
https://github.com/inloop/svg2android - JSZip
https://stuk.github.io/jszip/ - Get absolute coordinates of element inside SVG using JS @ StakOverflow
- Coordinate Systems, Transformations and Units
https://www.w3.org/TR/SVG11/coords.html - Transformation Matrix – SVG Code Examples
https://docs.aspose.com/svg/net/drawing-basics/transformation-matrix/ - SVG-to-PDFKit
https://github.com/alafr/SVG-to-PDFKit
▋相關連結
發表文章
