圖示

大部分圖片都是內容的一部分，但圖示屬於使用者介面的一部分。縮放及調整方式與 UI 文字縮放及調整方式相同。

可擴充向量圖形

就圖像圖像而言，有許多選項可以選擇：JPG、WebP 和 AVIF。 如為非相片圖像，您可以選擇可攜式網路圖形 (PNG) 格式或可擴充向量圖形 (SVG) 格式。

PNG 和 SVG 擅長處理平面色彩區域，兩者都能讓圖片採用透明背景。如果使用 PNG 格式，可能必須為不同尺寸製作不同尺寸的圖片，並在 img 元素上使用 srcset 屬性，將圖片設為回應式。如果使用 SVG，系統預設會回應回應式檔案。

PNG (和 JPG、WebP 和 AVIF) 是點陣圖圖片。點陣圖圖片會以像素儲存資訊。在 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。

<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>

如果嵌入這類可擴充向量圖形，瀏覽器就不需要發出一次要求。我們無須等待圖片下載，因為圖片是透過 HTML ...「在」中！您很快就會發現，像這樣嵌入 SVG 之後，您就能進一步掌控這些 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;
}

如果將可擴充向量圖形放進 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>

如果您在 HTML 中存放 SVG 檔，請使用連結或按鈕上的 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，請使用 SVGOMG 來最佳化輸出內容。

圖示是網站品牌宣傳的重要一環。接下來，將說明如何藉助主題設定，讓品牌宣傳的其他元素迅速回應。

隨堂測驗

測驗您對圖示的相關知識