SVG 轉 ODP 簡報小工具

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 筆順部件檔案到這裡(支援多檔案)
或是按這裡來選取檔案

解除所有群組

▋ 操作示範影片

• 🎬 https://www.youtube.com/watch?v=9GrU_vWl4nM

▋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

▋相關連結

• 雄 : HTML5 : 筆順練習第三版(2019版)

• 雄 : HTML5 FUN 精選集