大多數圖片都屬於內容，但圖示屬於使用者介面。這些元素應與 UI 文字一樣，可縮放及調整大小。
可擴充向量圖形
就攝影圖像而言，圖片格式有很多選擇：JPG、WebP 和 AVIF。 如果不是相片圖像，您可以選擇可攜式網路圖形 (PNG) 格式或可擴充向量圖形 (SVG) 格式。
PNG 和 SVG 都能妥善處理純色區域，且都允許圖片採用透明背景。
如果使用 PNG，您可能需要製作不同大小的多個圖片版本，並在 img 元素上使用 srcset 屬性讓圖片成為回應式圖片。如果您使用 SVG，系統預設會採用回應式設計。
PNG (以及 JPG、WebP 和 AVIF) 是點陣圖。點陣圖會以像素形式儲存資訊，在 SVG 中，資訊會儲存為繪圖指令。瀏覽器讀取 SVG 檔案時，指令會轉換為像素。最棒的是，這些指令是相對的。無論您使用何種尺寸描述線條和形狀，系統都會以適當的清晰度算繪所有內容。您不必建立多個不同大小的 SVG，只要製作一個適用於所有大小的 SVG 即可。不必使用 srcset 屬性。
<img src="image.svg" alt="A description of the image." width="25" height="25">
<img src="image.svg" alt="A description of the image." width="250" height="250">
XML 用於在 SVG 檔案中編寫指令。這是一種標記語言，類似於 HTML。
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
<title>Smiling face</title>
<circle r="20" fill="yellow" stroke="black"/>
<ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
<ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
<path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
</svg>
您甚至可以在 HTML 中加入 SVG。
<figure>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
<title>Smiling face</title>
<circle r="20" fill="yellow" stroke="black"/>
<ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
<ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
<path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
</svg>
<figcaption>
A description of the image.
</figcaption>
</figure>
如果以這種方式嵌入 SVG，瀏覽器需要發出的要求就會少一個。由於圖片會與 HTML 一併傳送，因此不必等待圖片下載，因為圖片「就在」HTML 中！此外，您很快就會發現，以這種方式嵌入 SVG 也能進一步控管樣式。
圖示和文字
圖示圖片通常會以透明背景搭配簡單形狀。SVG 非常適合用於圖示。
如果按鈕或連結內有文字和圖示，圖示會是呈現內容。重點在於文字內容。使用 img 元素時，空白的 alt 屬性表示圖片為表示性圖片。
<button>
<img src="hamburger.svg" alt="" width="16" height="16">
Menu
</button>
由於 CSS 是用於呈現，因此您可以將圖示放在 CSS 中做為背景圖片。
<button class="menu">
Menu
</button>
.menu {
background-image: url(hamburger.svg);
background-position: 0.5em;
background-repeat: no-repeat;
background-size: 1em;
padding-inline-start: 2em;
}
如果將 SVG 放在 HTML 中，請使用 aria-hidden 屬性，對輔助技術隱藏 SVG。
<button class="menu">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
<rect width="100" height="20" />
<rect y="30" width="100" height="20"/>
<rect y="60" width="100" height="20"/>
</svg>
Menu
</button>
獨立圖示
如要清楚說明按鈕和連結的用途，請在其中使用文字。你可以使用不含任何文字的圖示，但請勿假設所有人都瞭解特定圖示的意義。如有疑問，請邀請實際使用者進行測試。
如果您決定使用不含任何隨附文字的圖示，該圖示就不再是呈現內容，CSS 中的背景圖片不適合用來顯示圖示。圖示必須在 HTML 中提供無障礙元素名稱。
如果您使用 img 元素，圖示會從 alt 屬性取得無障礙元素名稱。
<button>
<img src="hamburger.svg" alt="Menu" width="16" height="16">
</button>
另一種做法是將無障礙元素名稱放在連結或按鈕本身，並宣告圖片為呈現用途。使用 aria-label 屬性提供無障礙元素名稱。
<button aria-label="Menu">
<img src="hamburger.svg" alt="" width="16" height="16">
</button>
如果將 SVG 放在 HTML 中，請在連結或按鈕上使用 aria-label 屬性，為其提供無障礙元素名稱，並在圖示上使用 aria-hidden 屬性。
<button aria-label="Menu">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
<rect width="100" height="20" />
<rect y="30" width="100" height="20"/>
<rect y="60" width="100" height="20"/>
</svg>
</button>
設定圖示樣式
如果直接在 HTML 中嵌入 SVG 圖示，即可像網頁中的任何其他元素一樣，為圖示的各個部分設定樣式。如果您使用 img 元素顯示圖示，就無法這麼做。
在下列範例中，SVG 內的 rect 元素具有 blue 的 fill 值，可與按鈕文字的樣式相符。
button {
color: blue;
}
button rect {
fill: blue;
}
您也可以套用 hover 和 focus 樣式。
button:hover,
button:focus {
color: red;
}
button:hover rect,
button:focus rect {
fill: red;
}
資源
- 如要設定 CSS 中背景圖片的 SVG 樣式，請參閱 Una 的這篇文章，瞭解如何為 SVG 背景著色。
- Sara Soueidan 撰寫了無障礙圖示按鈕相關內容。
- Scott O'Hara 撰寫了有關以脈絡標記無障礙圖片和 SVG 的文章。
- 如果您使用圖像設計工具匯出 SVG，請使用 SVGOMG 最佳化輸出內容。
圖示是網站品牌宣傳的重要元素。接下來，您將瞭解如何運用主題功能，讓品牌其他方面的設計也能因應不同螢幕尺寸調整。
隨堂測驗
測試你對圖示的瞭解程度
可擴充向量圖形檔可透過單一檔案或<svg>程式碼區塊處理任何像素密度。
.png 或 .jpg 不同，SVG 不需要 srcset 或 <picture> 元素。直接在 HTML 中的 SVG 程式碼有哪些優點？