入門

一個基本示例

讓我們透過一個示例直接開始。看看下面的程式碼。

<svg version="1.1"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" fill="red" />

  <circle cx="150" cy="100" r="80" fill="green" />

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>

複製程式碼並貼上到一個名為 demo1.svg 的檔案中。然後，在瀏覽器中開啟該檔案。它將按以下螢幕截圖所示進行渲染。（或者 線上檢視）

渲染過程包括以下步驟：

1. 我們從 <svg> 根元素開始。

   • 應省略 DTD 宣告，就像 (X)HTML 中已知的那樣，因為基於 DTD 的 SVG 驗證會帶來比解決更多問題。
   • 在 SVG 2 之前，為了識別 SVG 的版本以進行其他型別的驗證，應始終使用 version 和 baseProfile 屬性。在 SVG 2 中，version 和 baseProfile 屬性均已棄用。
   • 作為 XML 方言，SVG 必須始終正確繫結名稱空間（在 xmlns 屬性中）。有關更多資訊，請參閱 名稱空間速成課程頁面。

2. 透過繪製一個覆蓋整個影像區域的矩形 <rect> 來將背景設定為紅色。

3. 在紅色矩形中心上方繪製一個半徑為 80px 的綠色圓 <circle>（圓心從左上角偏移 150px 向右，向下偏移 100px）。

4. 繪製文字“SVG”。每個字母的內部都填充白色。透過設定一個錨點來定位文字，我們將中點設定在那裡：在這種情況下，中點應對應於綠色圓的中心。可以透過調整字型大小和垂直位置來確保最終結果美觀。

SVG 檔案的基本屬性

• 首先需要注意的重要一點是渲染元素的順序。SVG 檔案的全域性有效規則是：*後面的*元素渲染在*前面*元素的*上方*。元素越靠下，它就越可見。

• Web 上的 SVG 檔案可以直接在瀏覽器中顯示，或透過多種方法嵌入到 HTML 檔案中：

  • 如果 HTML 是 XHTML 並且以 application/xhtml+xml 型別提供，則 SVG 可以直接嵌入到 XML 源中。

  • SVG 也可以直接嵌入到 HTML 中。

  • 可以使用 img 元素。

  • 可以透過 object 元素引用 SVG 檔案。

    html

    <object data="image.svg" type="image/svg+xml"></object>
    

  • 同樣，可以使用 iframe 元素。

    html

    <iframe src="image.svg"></iframe>
    

  • 最後，SVG 可以透過 JavaScript 動態建立並注入到 HTML DOM 中。

• SVG 如何處理大小和單位將在 下一頁中進行解釋。

SVG 檔案型別

SVG 檔案有兩種格式。普通的 SVG 檔案是包含 SVG 標記的文字檔案。這些檔案的推薦副檔名為“.svg”（全部小寫）。

由於 SVG 檔案在某些應用（例如地理應用）中可能會非常大，因此 SVG 規範也允許使用 gzip 壓縮的 SVG 檔案。這些檔案的推薦副檔名為“.svgz”（全部小寫）。不幸的是，當從 Microsoft IIS 伺服器提供時，讓 gzip 壓縮的 SVG 檔案在所有支援 SVG 的使用者代理中可靠執行非常困難，並且 Firefox 無法從本地計算機載入 gzip 壓縮的 SVG。避免使用 gzip 壓縮的 SVG，除非您要釋出到您知道會正確提供它的 Web 伺服器（見下文）。

關於 .svgz 檔案的 Web 伺服器說明

現在您對如何建立基本的 SVG 檔案有了初步瞭解，下一步是將它們上傳到 Web 伺服器。不過，在此階段會遇到一些棘手的問題。對於普通的 SVG 檔案，伺服器應傳送 HTTP 標頭：

Content-Type: image/svg+xml
Vary: Accept-Encoding

對於 gzip 壓縮的 SVG 檔案，伺服器應傳送 HTTP 標頭：

Content-Type: image/svg+xml
Content-Encoding: gzip
Vary: Accept-Encoding

您可以使用 網路監視器面板或像 websniffer.com 這樣的網站來檢查您的伺服器是否正在傳送正確的 HTTP 標頭以及您的 SVG 檔案。提交其中一個 SVG 檔案的 URL，然後檢視 HTTP 響應標頭。如果您發現您的伺服器沒有傳送具有上述值的標頭，那麼您應該聯絡您的 Web 主機。如果您在說服他們正確配置伺服器以支援 SVG 方面遇到困難，則可能有辦法自行解決。請參閱 w3.org 上的 伺服器配置頁面，瞭解一系列解決方案。

伺服器配置不正確是 SVG 無法載入的非常常見的原因，因此請務必檢查您的配置。如果您的伺服器未配置為傳送正確的標頭以及它提供的 SVG 檔案，那麼 Firefox 最有可能將檔案的標記顯示為文字或亂碼，甚至要求檢視者選擇一個應用程式來開啟它們。

• 上一頁
• 下一頁