什么时候应该使用 inline SVG 与 img？

Question

Accepted Answer

SVG 是一种 **vector** 图像格式（基于 XML），因此它可以缩放到任何大小而不会模糊。您可以通过两种主要方式包含它，每种方式都有权衡。 ## Inline SVG — 直接在 HTML 中的标记 ```html ``` **优点：**您可以使用 CSS 为其设置样式（`fill`、`stroke`）、为其部分设置动画、通过 `currentColor` 更改颜色（继承文本颜色），并响应事件——因为它是真实的 DOM。没有额外的 HTTP 请求。 **缺点：**会增加 HTML 体积、无法单独缓存、重复的图标会重复标记。 ## 通过 `` 的 SVG — 作为文件引用 ```html

``` **优点：**由浏览器缓存、保持 HTML 简洁、使用简单。**缺点：**您**无法**使用 CSS/JS 对其内部进行样式设置或编写脚本——它是一个不透明的图像。 ## 决策指南 ```text Need to recolor/animate/interact with the SVG → inline SVG Static logo/illustration, want caching + clean HTML →

Many repeated icons → an SVG sprite () or an icon component ``` ## 可访问性 ```html ``` ## 为什么这很重要选择 inline 还是 `` SVG 归结为您是否需要 **样式/动画** 图形（inline）或只是 **显示** 它（``）。在悬停时改变颜色或主题的图标应该是 inline 的（通常作为组件）；静态品牌资产通过 `` 使用。无论哪种方式，向量在每个分辨率上都保持清晰——非常适合图标和徽标。

Inline SVG — 直接在 HTML 中的标记

通过 <img> 的 SVG — 作为文件引用

决策指南

可访问性

为什么这很重要

通过 `<img>` 的 SVG — 作为文件引用