本主題介紹了在網頁中呈現 SVG 的常見方法，並假定你已掌握有關 HTML 和 JavaScript 的基礎知識。
如果你只瞭解可縮放向量圖形 (SVG)，並希望體驗 SVG，則你首先需要解決的問題之一是如何向基本網頁添加 SVG。 如果你看一下相對基本的網頁模板，便可獲知如何開始執行此操作。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>My First SVG Page</title></head><body> <p>SVG to be inserted here.</p></body></html>
可通過多種方法向此基本模板添加 SVG。下面的樣本示範了一種直接執行此操作的方法。
<?xml version="1.0" encoding="utf-8" standalone="no"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <!-- <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> --> <title> My First SVG Page</title></head><body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" height="200px"> <rect x="0" y="0" width="100%" height="100%" fill="none" stroke="black"/> <circle cx="100" cy="100" r="50" style="stroke: black; fill: red;"/> </svg></body></html>
提示 為提高現代瀏覽器之間的相容性，請將上述範例程式碼以 xhtml 副檔名儲存。通過將副檔名從html 更改為xhtml，可有效地將模板從 HTML 文檔轉換為 XHTML 文檔。這就是為何添加 xml 聲明（上一樣本中的第一行）並注釋掉meta 元素的原因。有關上一樣本的更多詳細資料，請參見以下列表。
<?xml version="1.0" encoding="utf-8" standalone="no"?>
xml 聲明是一個將文檔標識為 XML/XHMTL 的瀏覽器處理指示。所需的版本特性會指定 XML 文檔將遵循的 XML 標準的版本。可選encoding 特性會指示瀏覽器如何基於特定字元集解釋文檔的關聯位元組（預設編碼為 UTF-8）。可選standalone="no" 特性指示在DOCTYPE 元素中指定的文件類型定義 (DTD) 將不只是用於驗證。請注意，實際上無需指定standalone=”no”。存在外部標記聲明（此樣本中為 DTD）時會假定standalone=”no” 值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
從技術上來說，DOCTYPE 聲明不是 HTML 元素。此聲明是對 網頁瀏覽器的說明，它介紹了寫入頁面的標記語言版本。請注意，此聲明指用於指定標記語言規則的 DTD，以便瀏覽器可以正確呈現內容。DOCTYPE 還允許你使用頁面驗證程式。在此樣本中，XHTML 1.0 Transitional
DTD 啟用了所有 HTML 元素和特性，包括表象元素和棄用的元素（例如 <font>）。但不允許架構，並且必須將標記編寫為格式正確的 XML。
<html xmlns="http://www.w3.org/1999/xhtml">
html 元素會告知瀏覽器，這是一個普通意義上的 HTML 文檔，具體而言，它是由DOCTYPE 指示的 XHTML 文檔。xmlns
特性指定 XHTML 文檔的 XML 命名空間。通常，開發人員在編寫 XHTML 文檔時應顯式包括 XHTML xmlns 聲明。
<head>
利用網頁的 head 部分，可以定義網頁標題、提供搜尋引擎資訊、設定頁位置、添加樣式表、編寫指令碼等。 （例如base、link、meta、script 和style）。
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
meta 元素提供有關文檔的中繼資料。 中繼資料是有關文檔內容的資訊（對讀者不可見）。此中繼資料可供瀏覽器或其他軟體（例如，搜尋引擎、文件管理系統等）使用。第一個模板（不具有svg 元素）中的內容特性指定，在伺服器傳送實際頁面內容之前，應先使用名為Content-Type（其值為 text/html; charset=utf-8）的 HTTP 標題來提供頁面（從 Web 服務器到用戶端）。利用此過程，瀏覽器可使用正確的字元編碼 (charset=utf-8) 來正常呈現傳入頁資料 (text/html)。第二個 XHTML (SVG) 樣本中注釋掉了meta 元素，因為 XML/XHML 文檔中已忽略使用meta 元素指定字元編碼，並且必須將其轉換為 xml 聲明。開發人員可在對 HTML 使用 meta 元素與對 XML/XHTML 使用xml 聲明之間進行切換。
<title>
通常，title 元素會在瀏覽器的選項卡中呈現其關聯文本。
</head>
head 的結束元素。
<body>
body 元素是顯示的 XHTML 文檔的內容的容器。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" height="200px">
svg 元素定義了 SVG 文檔片斷。xmlns 特性定義了 SVG 片斷的命名空間。version 特性指示此文檔片斷遵循的 SVG 語言版本，width 和height
特性定義 SVG 視區的大小（此樣本中為 200 x 200 像素方形）。
<rect x="0" y="0" width="100%" height="100%" fill="none" stroke="black"/>
SVG rect 元素會從視區的左上方或點 (0, 0) 處開始繪製一個具有最大寬度和高度的黑色矩形，該矩形與 SVG 視區相對。此定位勾勒了給定 SVG 視區的輪廓。
<circle cx="100" cy="100" r="50" style="stroke: black; fill: red;"/>
類似地，SVG circle 元素會繪製一個帶黑色邊框的紅色圓圈，其半徑為 50 像素。該圓圈位於 200 x 200 像素的 SVG 視區的中心位置。
</svg>
svg 的結束元素。
</body>
body 的結束元素。
</html>
html 的結束元素。
還可使用其他方法來呈現 SVG。下表總結了這些方法。
| 方法 | 建議副檔名 | 所需的瀏覽器 | 優點和缺點 |
|---|---|---|---|
| 內聯 HTML5 | .html | 本地支援 HTML5 中內嵌 SVG 的瀏覽器，例如 Windows Internet Explorer 9。 | 優點：可充分利用 HTML5 構造。 缺點：可能需要為不支援 HTML5 中的內嵌 SVG 的瀏覽器實現回調代碼。 |
| 內聯 XHTML | .xhtml | 本地支援 SVG 的瀏覽器，例如 Internet Explorer 9。 | 優點：許多瀏覽器當前都支援基於 XHTML 的內嵌 SVG。 缺點：無法利用 HTML5 構造。 |
| 獨立 | .svg | 本地支援 SVG 的瀏覽器，例如 Internet Explorer 9。 | 優點：可使用“嵌入”方法輕鬆嵌入現有內容中。 缺點：無法利用所有 HTML/XHTML 構造。 |
| 嵌入 | .xhtml | 本地支援 SVG 的瀏覽器，例如 Internet Explorer 9。 | 優點：通過使用嵌入，使得實現和回調行為變得相對簡單。 缺點：為嵌入頁中的 SVG 內容編寫指令碼可能會比較困難。另外，一些瀏覽器可能不支援所有形式的嵌入，例如，通過 |
| 外掛程式 | .html | 可能本地支援、也可能不本地支援 SVG 的瀏覽器。 | 優點：瀏覽器無需本地支援 SVG。統一各個瀏覽器間的 SVG 行為。 優點：外掛程式可能會導致瀏覽器不穩定，W3C SVG 規範可能會過時，和/或外掛程式提供者不再為外掛程式提供支援（如 Adobe SVG Viewer 外掛程式的情況）。 |
注意 Windows Internet Explorer 8 不本地支援 SVG，從而需要外掛程式來呈現 SVG。但通過實現適當的回調代碼（如本主題稍後所述），你可能不需要 SVG 外掛程式。
下一部分描述了上述五種方法的樣本。
內聯 HTML5下面的樣本示範了一個基本內聯 HTML5 SVG 模板。此程式碼範例會在 SVG 標記中建立一個圓圈並註冊單擊事件。單擊該圓圈時，其大小會發生更改。
<!DOCTYPE html><html><head> <meta http-equiv="X-UA-Compatible" content="IE=9"/> <script> function doCircle(evt) { var theCircle = evt.target; var radius = theCircle.getAttribute("r"); if (radius == 50) { radius = 75; } else { radius = 50; } theCircle.setAttribute("r",radius); } </script></head><body> <svg width="300px" height="300px"> <text x="25" y="50" font-size="24">SVG Circle Element</text> <text x="25" y="275">Click the circle to change its size.</text> <circle cx="125" cy="150" r="50" fill="pink" stroke="green" stroke-width="5" onclick="doCircle(evt)" /> </svg></body></html>
<!DOCTYPE html> 元素告知瀏覽器這是一個 HTML5 文檔。 <meta http-equiv="X-UA-Compatible" content="IE=9"/> 元素用於將 Windows Internet Explorer 強製為 IE9 標準模式，以便能在 Intranet 網站上正確呈現。請注意，無法對 HTML5 應用html 元素的xmlns="http://www.w3.org/1999/xhtml" 特性。
提示 如上表所建議，以 html 副檔名儲存此樣本。
注意 對於 HTML5，SVG 內容預設情況下溢出，而在 XHTML 中它是隱藏的。
內聯 XHTML由於 SVG 基於 XML，因此可使用正確的命名空間向 XHTML 文檔添加 SVG，如以下基本內聯 XHTML 範本中所示。
<?xml version="1.0"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Manipulating the Radius of an SVG Circle</title> <script language="javascript" type="text/javascript"> <![CDATA[ var red_circle; // The object representing circle. var r; // The variable representing circle's radius. window.onload = function() { red_circle = document.getElementById('redCircle'); r = red_circle.getAttribute("r"); } function grow() { r = 2*r; red_circle.setAttribute("r",r); } function shrink() { r = r/2; red_circle.setAttribute("r",r); } ]]> </script></head><body> <svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle id="redCircle" cx="100" cy="100" r="50" style="stroke: black; fill: red;" onmouseover="grow()" onmouseout="shrink()"/> <rect x="0" y="0" width="100%" height="100%" style="fill: none; stroke: black;"/> </svg></body></html>
此程式碼範例將建立一個 200 x 200 像素的視區，並繪製一個帶黑色邊框的紅色圓圈，其半徑為 50px。如果你將滑鼠指標移至所呈現的圓圈上方，則圓圈的半徑將增大一倍；如果你將滑鼠指標從所呈現的圓圈上移開，則圓圈的當前半徑將減少一半。矩形元素用於勾勒視區的邊界。
提示 所上表所建議，以 xhtml 副檔名儲存此樣本。
內聯 XHTML 能正常工作，但需要 xhtml 副檔名和命名空間。在最近 HTML5 出現之前，內聯 XHTML 是最佳選擇。
SVG 原本旨在通過使用 svg 副檔名來提供向量圖形檔案格式。下面的樣本示範了一個基本獨立 SVG 模板。
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onclick="doSomething(evt)"> <script language="javascript" type="text/javascript"> <![CDATA[ function doSomething(evt) { var myRect = evt.target; if (myRect.id != "redRect") { alert("Please click on the rectangle"); document.location.reload(); } var myWidth = myRect.getAttribute("width"); if (myWidth == 50) myRect.setAttribute("width", 100); else myRect.setAttribute("width", 50); } ]]> </script> <!-- Outline the SVG viewport. --> <rect x="0" y="0" width="100%" height="100%" style="fill: none; stroke: black; stroke-width: 5px;" /> <rect id="redRect" x="100" y="100" width="50" height="50" fill="red" stroke="blue" /> </svg>
此程式碼範例通過每個內部單擊來交替實現對紅色矩形的擴大和縮小。如果在紅色矩形外部單擊，則會出現警告並重新載入頁面。
如前所述，模板的
xml 元素（第一行）中的 standalone="no" 特性指示，DOCTYPE 元素中指定的 DTD 將不只是用於驗證。你無需指定standalone=”no”，因為當存在外部標記聲明（此樣本中為 DTD）時會假定此值。
提示 如上表所建議，以 svg 副檔名儲存此樣本。
可根據瀏覽器的不同，使用 iframe、embed、object 和
imgbackground-image 樣式將 SVG 嵌入網頁中。請注意，並非所有這些嵌入方法都可用於特定瀏覽器。下面的樣本示範了基本 SVG 模板，該模板使用object 元素。
<?xml version="1.0"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Embedding SVG</title></head><body> <h1>Embedding SVG in an XHTML Document</h1> <p>Embedding the file <em>standAlone.svg</em> using the <strong>object</strong> element:</p> <object data="standAlone.svg" width="302px" height="302px" type="image/svg+xml"> <img src="standAlone.png" alt="PNG image of standAlone.svg" /> </object></body></html>
提示 如上表所建議，以 xhtml 副檔名儲存此樣本。還需注意的是，嵌入 SVG 檔案（此樣本中為standAlone.svg）必須具有svg 副檔名。
假定 SVG 檔案不是通過 img 元素嵌入的，也不是作為 CSS 背景嵌入的，嵌入 SVG 檔案通常具有自己的編程方式，但除非嵌入 SVG 檔案來自與嵌入頁相同的域，否則嵌入不會提供用於在嵌入 SVG 文檔和嵌入 HTML 文檔之間進行可程式化互動的簡便方法。通常，在網頁中對 SVG 進行編程時，建議不使用此方法，但此方法可用於輕鬆插入 SVG 檔案，並對在早期瀏覽器（例如，本地不支援 SVG 的 Internet Explorer 8）中進行回調很有用。
注意 由於某些瀏覽器無法支援所有形式的 SVG 嵌入，因此請務必在所有目標瀏覽器間進行測試。
外掛程式以下列表中列出了為何不建議使用外掛程式解決方案的幾個原因：
下表概括了本主題中查看的模板。
| 方法 | 模板 | 建議副檔名 | 建議伺服器 MIME 類型 |
|---|---|---|---|
| 內聯 HTML5 | <!DOCTYPE html><html> <head> <meta http-equiv="X-UA-Compatible" content="IE=9"/> <style> </style> <script> </script> </head> <body> . . . <svg width="120" height="90"> <!-- SVG markup here. --> </svg> . . . </body></html> |
.html | text/html |
| 內聯 XHTML | <?xml version="1.0"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <script language="javascript" type="text/javascript"> <![CDATA[ ]]> </script> </head><body>... <svg width="120px" height="90px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- SVG markup here. --> </svg>...</body></html> |
.xhtml | application/xhtml+xml |
| 獨立 | XML<?xml version="1.0"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- SVG markup here. --> </svg> |
.svg | image/svg+xml |
| 嵌入 | <?xml version="1.0"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Embedding SVG</title></head><body> <h1>Embedding SVG in an XHTML Document</h1> <p>Embedding the file <em>standAlone.svg</em> using the <strong>object</strong> element:</p> <object data="standAlone.svg" type="image/svg+xml" width="302px" height="302px"> <!-- Implement fallback code here, or display a message: --> <p>Your browser does not support SVG - please upgrade to a modern browser.</p> </object></body></html> |
.xhtml、.html | text/html |
| 外掛程式 | 不推薦。 | .html | 不推薦。 |
注意 Microsoft Internet 資訊服務 (IIS) 的預設配置不為使用
.svg.svg 網頁，你必須將 .svg 的 "MIME 類型"映射添加到image/svg+xml。
對於本地支援 SVG 和 HTML5 的瀏覽器，最好選擇內聯 HTML5 方法。
對於不完全支援 HTML5 但本地支援 SVG 的瀏覽器，請使用內聯 XHTML 或獨立方法，其次是嵌入方法（如果適用）。
對於不本地支援 SVG 的瀏覽器，建議實現相應的回調措施（例如，呈現 SVG 圖形的靜態映像）。
使用 <meta http-equiv="X-UA-Compatible" content="IE=9"/> 為 HTML 應用程式 (HTA) 啟用可縮放向量圖形 (SVG)。有關詳細資料，請參閱HTML 應用程式 (HTA) 簡介。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
