在 SVG 中嵌入圖片和字型
新增 1 個 SVG 及其參照的圖片（PNG、JPEG、WebP、GIF）或字型（TTF、OTF、WOFF、WOFF2），並合併為 1 個 SVG，無需分別分享素材。為每個參照指定要使用的素材並建立 SVG。只有在預覽成功顯示後才能儲存。外部 URL 上的素材不會自動取得。
可執行的操作
打包圖片和字型
將新增的本機素材嵌入 SVG，減少分別傳送素材的需求。
檢查參照和素材
為 SVG 中每個圖片路徑或字型名稱指定對應檔案。尚有未解決的參照時，不會建立 SVG。
檢查建立的 SVG 顯示效果並儲存
檢查圖片顯示效果，並儲存內含嵌入素材的 SVG。原始檔案不會遭到覆寫。
使用方式
新增 SVG 和素材
選取一個 SVG 及其參照的圖片和字型。也可以從資料夾中一併新增。
指定要嵌入的素材
檢查每個參照要使用的本機檔案。未自動比對的參照，請從已新增的素材中選取。
建立 SVG
所有參照都解決後，按下「建立含圖片和字型的 SVG」。
檢查顯示效果並儲存
儲存前請檢查預覽中建立的文字和圖片。若無法顯示，請檢查原始 SVG 和素材。
適用情境
一併交付 SVG 和素材
將參照不同資料夾中圖片和字型的圖像合併成一個易於交付的 SVG。
檢查參照失效的原因
比對所需素材和已新增檔案，再指定缺少的圖片或字型。
參照與嵌入的運作方式
相對路徑與檔案比對
若 SVG 的相對參照路徑與新增素材的路徑唯一相符，系統會自動比對。若不同資料夾中有同名檔案或候選項重疊，請手動選取。
為每個字型名稱指定檔案
工具不會只根據 SVG 中的字型名稱從裝置擷取字型。請新增所需字型檔案並指定相符的檔案。
不會自動擷取 URL 上的素材
即使參照使用外部 URL，也請在本機提供圖片或字型並加以指定。此畫面不會從 URL 擷取素材。
嵌入素材與縮小檔案大小是不同的
將圖片資料納入 SVG 可能會增加 SVG 檔案本身的大小。字型會轉換為 WOFF2 並嵌入。請使用其他工具最佳化 SVG 程式碼。
不同顯示方式的差異
預覽會將 SVG 當作圖片顯示。不保證所有應用程式中的外觀都相同，因此也請在目標環境中檢查所需的顯示效果。
常見問題
如果找不到素材，該怎麼辦？
新增圖片或字型，然後在對應參照的選取欄位中指定。若檔案位於不同資料夾、有重複路徑或使用外部 URL，自動比對可能無法運作。
可以使用哪些素材？
圖片可使用 PNG、JPEG、WebP 或 GIF；字型可使用 TTF、OTF、WOFF 或 WOFF2。SVG 請逐一指定。
工具會自動尋找字型嗎？
工具不會只根據字型名稱搜尋您裝置或網路上的字型。請新增並選取您本機擁有的檔案。
已嵌入的素材會如何處理？
以資料 URI 嵌入的圖片和字型，以及 SVG 中的 # 參照，都不會計為外部參照。若偵測到的參照都已解決，即可建立 SVG。
新增或重新選取素材時會發生什麼事？
只新增素材時，會將其加入清單並保留先前指定的素材。例如，若出現更多具有相同路徑的候選項，請檢查自動比對結果。若輸入包含新的 SVG，則會取代目前的 SVG 和所有素材。
如果有不支援的參照，該怎麼辦？
無法嵌入外部使用或指令碼參照。也無法載入包含外部 CSS 匯入的 SVG。請先在原始應用程式或其他適合的應用程式中整理參照，再選取 SVG。
SVG 檔案會變小嗎？
此工具的用途不是縮小檔案。將素材嵌入 SVG 可能會增加檔案大小。若要整理程式碼，請使用 SVG 最佳化工具。
如果建立的 SVG 無法顯示，該怎麼辦？
只有在此畫面成功顯示 SVG 後，才會出現儲存選項。請檢查原始 SVG 和素材，確認對應設定或檔案，然後重新建立。
輸入與結果
- 輸入
- 1 個 SVG 加上圖片和字型。可從檔案或資料夾新增。
- 圖片
- 會嵌入新增圖片的原始資料。不會調整圖片尺寸或進行壓縮。
- 字型
- 對應的字型會轉換為 WOFF2 並嵌入。
- 輸出
- original-name-embedded.svg。只有在建立的 SVG 成功顯示後才能儲存。