入門

讓我們直接從一個簡單的例子開始。檢視以下程式碼。

<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 的檔案中。然後在瀏覽器中開啟該檔案。它將按以下截圖所示進行渲染。（Firefox 使用者：點選 這裡）

渲染過程涉及以下步驟

1. 我們從 <svg> 根元素開始
   • 應省略 (X)HTML 中已知的文件型別宣告，因為基於 DTD 的 SVG 驗證會導致比解決問題更多的問題。
   • 在 SVG 2 之前，為了識別其他型別驗證的 SVG 版本，應該始終使用 version 和 baseProfile 屬性。version 和 baseProfile 屬性在 SVG 2 中已被棄用。
   • 作為 XML 語言，SVG 必須始終正確繫結名稱空間（在 xmlns 屬性中）。有關更多資訊，請參見 名稱空間速成課程 頁面。
2. 透過繪製一個覆蓋整個影像區域的矩形 <rect>，將背景設定為紅色。
3. 在紅色矩形中心（圓心向右偏移 150 畫素，向下偏移 100 畫素，從左上角算起）繪製一個半徑為 80 畫素的綠色圓形 <circle>。
4. 繪製文字“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>
    

  • 最後，可以使用 JavaScript 動態建立 SVG 並將其注入到 HTML DOM 中。
• SVG 如何處理大小和單位將在 下一頁 中解釋。

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

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

現在您已經瞭解瞭如何建立基本的 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 等網站檢查您的伺服器是否正在使用您的 SVG 檔案傳送正確的 HTTP 標頭。提交您其中一個 SVG 檔案的 URL，然後檢視 HTTP 響應標頭。如果您發現您的伺服器沒有以給定值傳送標頭，那麼您應該聯絡您的 Web 主機。如果您無法說服他們正確配置他們的伺服器以使用 SVG，那麼您可能可以自己進行配置。有關一系列簡單的解決方案，請參閱 w3.org 上的 伺服器配置頁面。

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

• « 上一頁
• 下一頁 »