圖示

大部分圖片都是內容的一部分,但圖示是使用者介面的一部分。 這些圖片的縮放及調整方式應與 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;
}

您也可以套用 hoverfocus 樣式。

button:hover,
button:focus {
  color: red;
}
button:hover rect,
button:focus rect {
  fill: red;
}

資源

圖示是網站品牌宣傳的重要一環。接下來,你可以學到如何運用主題的力量,讓品牌宣傳的表現更上一層樓。

隨堂測驗

測試你對圖示的瞭解

SVG 只要透過單一檔案或 <svg> 程式碼區塊,就能處理任何像素密度。

直接加入 HTML 中的 SVG 程式碼有什麼優點?

已預設載入延遲。
沒有新素材資源的淺色或深色主題。
可降低 CPU 使用率。
可透過 CSS 設定樣式
無須下載。