基本示例
要將內聯 SVG 包含在 HTML 檔案中，請將整個 SVG 檔案貼上到 HTML 檔案中。
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>SVG Demo</title>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" role="img">
<title>A gradient</title>
<linearGradient id="gradient">
<stop class="begin" offset="0%" stop-color="red" />
<stop class="end" offset="100%" stop-color="black" />
</linearGradient>
<rect x="0" y="0" width="100" height="100" fill="url(#gradient)" />
<circle cx="50" cy="50" r="30" fill="url(#gradient)" />
</svg>
</body>
</html>
討論
該頁面是常規的 HTML 和 CSS，其中包含一個 SVG。唯一有趣的部分是它包含的 <svg> 元素。該元素及其子元素被宣告為 SVG 名稱空間。該元素包含一個漸變和兩個用漸變填充的形狀。漸變色停止透過 CSS 設定顏色。
有三個值得注意的屬性和一個巢狀元素
-
viewBox屬性建立了一個邏輯座標系，SVG 影像的座標相對於該座標系。在本例中，我們的影像佈局在一個 100x100 的視口中。 -
preserveAspectRatio屬性指定透過將影像居中放置在可用尺寸內、按高度或寬度最大化尺寸並截斷任何溢位來保留 縱橫比。 -
包含
role="img"可確保輔助技術將 SVG 作為影像處理。 -
SVG 內的
<title>提供了圖形的可訪問的簡短文字描述。標題文字不會被渲染，但瀏覽器可能會在 SVG 懸停時將其顯示為工具提示。<title>應該是<svg>開始標籤後的第一個元素。
最佳實踐
當透過 <img> 元素包含 SVG 時，alt 屬性提供替代文字，使影像可訪問。內聯 SVG 不支援 alt 屬性。但它支援其他幾種使其可訪問的方式。對於內聯 SVG，源在 DOM 中可用，這意味著內聯 SVG 檔案中的所有標記都可以被可訪問性物件模型 (AOM) 訪問。包含 <title> 元素可提供該替代文字。
如果影像傳達的資訊比簡短標題更多，請使用 <desc> 元素包含更長的描述。<desc> 元素提供了一個可訪問的長文字描述。與 <title> 文字類似，<desc> 中的文字不會被渲染到螢幕上。
如果 SVG 可以被可見文字標記，請使用 aria-labelledby 屬性引用該文字。或者，將 aria-labelledby 屬性與 <title> 的 id 一起包含。
<svg viewBox="0 0 100 125" role="img" aria-labelledby="svgTitle svgDescription">
<title id="svgTitle">Manual</title>
<desc id="svgDescription">
A nondescript twelve page booklet opened to the middle page
</desc>
<defs>
<style>
rect {
fill: #cccccc;
stroke: #666666;
transform-origin: top;
}
</style>
</defs>
<rect width="36" height="60" x="13" y="18" ry="2" transform="skewy(24deg)" />
<rect width="39" height="60" x="11" y="20" ry="2" transform="skewY(18deg)" />
<rect width="42" height="90" x="8" y="22" ry="2" transform="skewY(12deg)" />
<rect width="36" height="60" x="50" y="18" ry="2" transform="skewY(-24deg)" />
<rect width="39" height="60" x="50" y="20" ry="2" transform="skewY(-18deg)" />
<rect width="42" height="90" x="50" y="22" ry="2" transform="skewY(-12deg)" />
</svg>
如果 SVG 可以被可見文字描述，則可以使用 aria-describedby 屬性引用該文字。如果使用了 aria-describedby，它將優先於 <desc>。
在我們的示例中，我們在 aria-labelledby 屬性中包含了描述和標題，因為它比 aria-describedby 具有更好的輔助技術支援。