图标

大多数图片是内容的一部分，但图标是用户界面的一部分。它们应该像用户界面的文本一样进行缩放和调整。

可缩放矢量图形

对于摄影图像，图像格式有很多选择：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>

Smiley face.

您甚至可以将 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 还可以让您更好地控制其样式。

图标和文本

图标图像通常以透明背景上的简单形状为特色。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 属性将其从辅助技术中隐藏。

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

样式化图标

如果您将 SVG 图标直接嵌入到 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;
}

资源

图标是您网站品牌的重要组成部分。接下来，您将了解如何通过 主题 的强大功能使您品牌的其他方面具有自适应性。

检查您的理解情况

测试您对图标的了解

SVG 可以使用单个文件或 <svg> 代码块处理任何像素密度。

正确
SVG 包含如何在任何像素密度、比例或缩放级别绘制形状和线条的指令。
错误
与 .png 或 .jpg 不同，SVG 不需要 srcset 或 <picture> 元素。

直接位于 HTML 中的 SVG 代码有哪些优势？

可从 CSS 样式化
将 SVG 图标形状与按钮和品牌颜色匹配。
无需下载。
所有指令都在那里。
默认情况下延迟加载。
无需延迟加载任何下载内容。
更少的 CPU 使用率。
我编造的。
浅色或深色主题，无需新资源。
媒体查询可以更改内联 SVG 样式！