大部分圖片都是內容的一部分，但圖示是使用者介面的一部分。 這些圖片的縮放及調整方式應與 UI 文字縮放和調整的方式相同。
可擴充向量圖形
針對攝影的圖像，我們提供許多圖片格式選擇：JPG、WebP 和 AVIF。 如果是非相片圖像，您可以選擇可攜式網路圖形 (PNG) 格式或可擴充向量圖形 (SVG) 格式。
PNG 和 SVG 都能妥善處理平面色彩的區域，而且也能讓圖片採用透明背景。
如果使用 PNG 檔案，可能需要製作多種不同大小的圖片版本，並在 img 元素上使用 srcset 屬性，讓圖片具有回應式效果。如果使用 SVG，系統會預設採用回應式圖片。
PNG (以及 JPG、WebP 和 AVIF) 是點陣圖。點陣圖圖片會以像素形式儲存資訊。而在 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>
您甚至可以將 SVG 放在 HTML 中。
<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 適合用於圖示。
如果有按鈕或連結上有文字和圖示，這個圖示即為呈現狀態。而是最重要的文字。使用 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;
}
如果在 HTML 中加入可擴充向量圖形，請使用 aria-hidden 屬性在輔助技術中隱藏該可擴充向量圖形。
<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 中，即可像網頁中的其他元素一樣，為其中的某些元素設定樣式。如果您使用 img 元素顯示圖示，就無法這麼做。
在以下範例中，SVG 中的 rect 元素 fill 值為 blue，以符合按鈕文字的樣式。
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 只要透過單一檔案或 <svg> 程式碼區塊，就能處理任何像素密度。
.png 或 .jpg 不同的是，SVG 不需要 srcset 或 <picture> 元素。直接加入 HTML 中的 SVG 程式碼有什麼優點？