大多数图片都是您的内容的一部分，但图标却是界面的一部分。 它们应该按照界面文本缩放和调整的方式进行缩放和调整。
可缩放矢量图形
摄影图像有多种格式可供选择：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>
您甚至可以将 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>
设置图标样式
如果您直接在 HTML 中嵌入 SVG 图标，可以像设置页面中的其他元素一样设置这些图标的各部分样式。如果您使用 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 代码有什么好处？