SVG 字型
在 SVG 規範制定時，瀏覽器對 Web 字型的支援並不普遍。然而，為了正確渲染文字，訪問正確的字型檔案至關重要，因此 SVG 中添加了一種字型描述技術來提供此功能。它並非旨在與其他格式（如 PostScript 或 OTF）相容，而是作為一種簡單的方式，在渲染時將字形資訊嵌入 SVG 中。
注意： SVG 字型目前僅在 Safari 和 Android 瀏覽器中受支援。
此功能已從 Chrome 38（以及 Opera 25）中刪除，Firefox 也無限期推遲了實現，轉而集中精力於 WOFF。但是，其他工具（如 Batik 和 Inkscape 的部分功能）支援 SVG 字型嵌入。
定義 SVG 字型的基礎是 <font> 元素。
定義字型
在 SVG 中嵌入字型需要一些要素。讓我們展示一個示例宣告（來自規範），並解釋詳細資訊。
<font id="Font1" horiz-adv-x="1000">
<font-face
font-family="Super Sans"
font-weight="bold"
font-style="normal"
units-per-em="1000"
cap-height="600"
x-height="400"
ascent="700"
descent="300"
alphabetic="0"
mathematical="350"
ideographic="400"
hanging="500">
<font-face-src>
<font-face-name name="Super Sans Bold" />
</font-face-src>
</font-face>
<missing-glyph><path d="M0,0h200v200h-200z" /></missing-glyph>
<!-- Outline of exclamation point glyph -->
<glyph unicode="!" horiz-adv-x="300"></glyph>
<glyph unicode="@"><!-- Outline of @ glyph --></glyph>
<!-- more glyphs -->
</font>
我們從 <font> 元素開始。它帶有一個 id 屬性，以便透過 URI（見下文）進行引用。horiz-adv-x 屬性決定字元的平均寬度與單個字形的路徑定義相比如何。值 1000 設定了一個合理的參考值。還有其他一些輔助屬性有助於進一步定義基本的字形框佈局。
<font-face> 元素是 CSS @font-face 宣告的 SVG 等效項。它定義了最終字型的基本屬性，例如粗細、樣式等。在上面的示例中，首先也是最重要的要定義的是 font-family，它的值可以在 CSS 和 SVG font-family 屬性中引用。font-weight 和 font-style 屬性與 CSS 中的等效描述符具有相同的用途。所有後續屬性都是針對字型佈局引擎的渲染指令；例如，字形總高度的多少是 升部。
它的子元素 <font-face-src> 元素對應於 CSS 中 @font-face 宣告中的 src 描述符。您可以透過它的子元素 <font-face-name> 和 <font-face-uri> 指向外部字型宣告的來源。上面的示例說明，如果渲染器找到了名為“Super Sans Bold”的本地字型，則應該使用它。
<font-face-src> 元素之後是一個 <missing-glyph> 元素。它定義了在字型中找不到特定字形且沒有回退機制時應該顯示的內容。它還展示瞭如何建立字形：透過在其中新增任何圖形 SVG 內容。您可以在此處使用任何其他 SVG 元素，甚至包括 <filter>、<a> 或 <script>。但是，對於簡單的字形，您可以新增 d 屬性——它與標準 SVG 路徑的工作方式相同，定義了字形的形狀。
實際的字形由 <glyph> 元素定義。最重要的屬性是 unicode。它定義了此字形所代表的 Unicode 碼點。如果您還為字形指定了 lang 屬性，則可以進一步將其限制為特定語言（由目標上的 xml:lang 表示）。同樣，您可以使用任意 SVG 來定義字形，從而為支援的使用者代理提供強大的效果。
可以在 font 中定義另外兩個元素：<hkern> 和 <vkern>。它們都包含對至少兩個字元的引用（屬性 u1 和 u2）以及一個屬性 k，該屬性決定應該減少這兩個字元之間距離多少。下面的示例指示使用者代理將“A”和“V”字元的間距比字元之間的標準間距更近。
<hkern u1="A" u2="V" k="20" />
引用字型
當您按照上面描述的步驟將字型宣告組合在一起後，您可以使用簡單的 font-family 屬性將字型實際應用於一些 SVG 文字。
<font>
<font-face font-family="Super Sans" />
<!-- and so on -->
</font>
<text font-family="Super Sans">My text uses Super Sans</text>
但是，您可以自由地組合多種方法，以獲得更大的字型定義自由度。
選項：使用 CSS @font-face
您可以使用 @font-face 來引用遠端（以及非遠端）字型。
<font id="Super_Sans">
<!-- and so on -->
</font>
<style>
@font-face {
font-family: "Super Sans";
src: url(#Super_Sans);
}
</style>
<text font-family="Super Sans">My text uses Super Sans</text>