大多数图片是内容的一部分，但图标是界面的一部分。 这些文字应按照与界面文本缩放和调整相同的方式缩放和调整。
可缩放矢量图形
就摄影图片而言，有多种图片格式可供选择：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 一起提供！此外，您很快会了解到，像这样嵌入 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 属性对辅助技术隐藏该 SVG。
<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;
}
资源
- 如果您需要为 CSS 中背景图片的 SVG 设置样式，请参阅 Una 关于为 SVG 背景着色的文章。
- Sara Soueidan 撰写了一篇有关无障碍图标按钮的文章。
- Scott O'Hara 撰写了有关如何根据上下文标记可访问的图片和 SVG 的文章。
- 如果您使用图形设计工具导出 SVG，请使用 SVGOMG 优化输出。
图标是网站品牌塑造的重要组成部分。接下来，您将了解如何利用主题设置功能让品牌的其他方面都能提供自适应。
检查您的理解情况
测试您对图标知识的掌握情况
SVG 只需一个文件或 <svg> 代码块，即可处理任何像素密度。
.png 或 .jpg 不同，SVG 不需要 srcset 或 <picture> 元素。直接嵌入 HTML 中的 SVG 代码有何优势？