TTF 轉 SVG 轉換器

Q: SVG 字型會保留字距調整和連字嗎？

只能部分保留。SVG 字型格式可用 `hkern` 元素儲存字距調整配對，也支援多字元字形，但沒有對應 OpenType 功能表的機制，例如小型大寫字母、替代字形或上下文規則。如果需要這些功能，請保留 TTF。

本頁可將 TrueType 字型轉成 SVG 字型：一個 XML 檔案，其中每個字元都是一個 <glyph> 元素，輪廓以 SVG 路徑資料寫成。這對圖示字型工具和字型編輯器很實用，但它和文字的圖片不是同一回事。

或將TTF, OTF, WOFF … 檔案拖曳到這裡 ·

每個檔案最大 95 MB· 最多 20 個檔案· 30 分鐘後刪除

輸出

轉換為

檔案會在我們的伺服器上處理，並於 30 分鐘後刪除。

使用方式

1
上傳 TTF
加入一個或多個 .ttf 檔案，每批最多 20 個，每個檔案最大 95 MB。圖示字型與文字字型都可以使用。
2
輸出格式維持 SVG 字型
轉換為已設定為 SVG 字型。Hinting 不適用於 SVG 輸出，因此該選項不會顯示；進階設定中的字型家族名稱仍可用來重新命名字型。
3
轉換為 SVG
按下轉換為 SVG →並下載 .svg 檔案。用文字編輯器、Inkscape 或 FontForge 開啟，即可取得字形路徑。

SVG 字型與文字的 SVG 圖片差在哪裡

搜尋 TTF 轉 SVG 時，會看到兩種不同的目標混在一起。一種是 SVG 字型：這是 W3C 在 2001 年 SVG 1.0 建議規範中定義的字型格式，由 <font> 元素包含每個字元的 <glyph>，內含 Unicode 值、字寬與以路徑表示的外框。另一種是文字的 SVG 圖片，也就是已排成一行並存成形狀的商標字母或名稱。本轉換器產生的是第一種。如果你手上的是商標圖片而不是字型，請改用 PNG 轉 SVG 將圖片描繪成路徑。

將 TrueType 外框轉成 SVG 路徑資料，形狀不會有任何損失。SVG 路徑支援 TrueType 使用的同一種二次曲線，因此每個輪廓都會原樣寫出。無法保留的是外框以外的一切：hinting 指令、簡單字距調整以外的 OpenType 功能，以及作業系統安裝字型所需的二進位表。SVG 字型無法安裝在 Windows 或 macOS 上。

SVG 字型檔案長什麼樣子

SVG 字型標記的簡短範例

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <font id="BrandSans" horiz-adv-x="1229">
      <font-face font-family="Brand Sans" units-per-em="2048" ascent="1638" descent="-410" />
      <!-- 每個字元對應一個 glyph 元素 -->
      <glyph unicode="L" glyph-name="L" horiz-adv-x="1100" d="M180 0V1456H360V160H1040V0Z" />
    </font>
  </defs>
</svg>

本頁產生的內容：一個檔案，每個字元一個 <glyph>，以字型單位表示，y 軸向上。

可在 FontForge、Inkscape 與圖示字型工具中開啟
無法安裝到電腦上
目前的 Chrome、Edge 與 Firefox 都不會載入

一般的 OTF 或 TTF，另外含有一個 SVG 表，存放彩色、分層的字形。

與一般字型一樣安裝
用於表情符號與多色字體
支援程度依應用程式與瀏覽器而異

SVG 字型的由來與現況

SVG 1.0 定義了 font 元素: 2001
最後一個需要 SVG 網頁字型的 iPhone Safari 版本: iOS 4.1
於 2014 年移除 SVG 字型: Chrome 38
刪除字型章節: SVG 2

TTF

TrueType 字型

TTF 是 Apple 在 1980 年代末開發、1991 年發布，之後授權給 Microsoft 的 TrueType 字型格式。它以二次曲線定義字形輪廓，並包含讓文字在螢幕上顯示清晰的 hinting 指令。所有桌面作業系統、文書處理軟體和設計應用程式都支援 TrueType。它缺少 OpenType 的一些進階排版功能，也比網頁字型格式大。

壓縮方式: 無損
透明度: –
動畫: –
推出年份: 1991 · Apple

TTF 轉檔工具

SVG

可縮放向量圖形（SVG）

SVG 是 W3C 於 2001 年標準化、以 XML 為基礎的向量格式。它描述的是形狀、路徑和文字而非像素，因此任何尺寸都保持清晰，用於標誌和圖示時檔案通常非常小。它支援透明度、CSS 樣式、指令碼和動畫，所有瀏覽器都能原生顯示。SVG 不適合照片，複雜的插圖也可能繪製得很慢。Illustrator、Inkscape、Figma 和瀏覽器都能開啟與編輯。

壓縮方式: –
透明度: 支援
動畫: 支援
推出年份: 2001 · W3C

SVG 轉檔工具

TTF 轉 SVG 會把每個字形的外框寫成 SVG 字型內可編輯的 SVG 路徑資料，供圖示字型工具、字型編輯器與舊式網頁字型套件使用；這並不是在現代網頁上載入字型的方法。

TTF 轉 SVG 常見問題

現在還能在 CSS @font-face 中使用 SVG 字型嗎？

大多數瀏覽器都不行。Chrome 在 2014 年的第 38 版移除了 SVG 字型支援，Firefox 與 Internet Explorer 則從未支援。若是用於網站，請改用 TTF 轉 WOFF2 轉換 TTF。

為什麼把字符貼進繪圖裡會上下顛倒？

SVG 字型使用字型本身的座標系統，y 軸從基線向上；一般 SVG 圖形的 y 軸則是從頂端向下計算。將路徑垂直翻轉，例如套用 scale(1,-1) 變形，就能正確顯示。

如何把文字轉成 SVG 路徑給 Cricut 或雷射切割機使用？

先安裝 TTF，在 Inkscape 或 Illustrator 中輸入文字，再將文字轉為外框：Inkscape 用「路徑 › 物件轉成路徑」，Illustrator 用「文字 › 建立外框」，然後儲存為 SVG。SVG 字型是把每個字母分開存放，不會排成文字。

SVG 字型會保留字距調整和連字嗎？

只能部分保留。SVG 字型格式可用 hkern 元素儲存字距調整配對，也支援多字元字形，但沒有對應 OpenType 功能表的機制，例如小型大寫字母、替代字形或上下文規則。如果需要這些功能，請保留 TTF。

SVG 字型輸出對圖示字型有用嗎？

可以，這正是它現在的主要用途。IcoMoon 等圖示字型工具可匯入 SVG 字型，讓你從舊的圖示字型中取出圖示、編輯後建立新的圖示組，或將每個圖示匯出成獨立的 SVG。