图标

大多数图片都是内容的一部分，但图标是界面的一部分。 它们应以与界面文本缩放和适应相同的方式进行缩放和适应。

可缩放矢量图形

对于摄影图像，图像格式有很多选择：JPG、WebP 和 AVIF。 对于非摄影图像，您可以选择便携式网络图形 (PNG) 格式或可缩放矢量图形 (SVG) 格式。

PNG 和 SVG 都擅长处理纯色区域，并且都允许您的图片具有透明背景。 如果您使用 PNG，可能需要制作多个不同尺寸的图片版本，并在 srcset 属性上使用 img 元素，以 使图片具有响应能力。如果您使用 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>

一个黄色笑脸表情符号，可放大而不会出现像素化。

您甚至可以将 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 中！在 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> 代码块处理任何像素密度。

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

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

可使用 CSS 设置样式
将 SVG 图标形状与按钮和品牌颜色相匹配。
无需下载。
所有说明都在那里。
默认情况下延迟加载。
无需下载，因此无需延迟加载。
CPU 使用量较低。
这是我编造的。
无需新资源即可使用浅色或深色主题。
媒体查询可以更改内嵌 SVG 样式！
上一页
图片元素
下一页
主题