可以，但需确保SVG为静态独立文件、路径正确且服务器返回image/svg+xml MIME类型；旧版Safari不支持内联SVG，IE11不支持currentColor和background-size缩放，推荐用background-image+padding-left替代以获精确控制。
list-style-image 能否直接使用 SVG 文件？
可以，但必须确保 SVG 是可访问的静态资源，且路径正确。浏览器对 list-style-image 中 SVG 的支持从 Chrome 4、Firefox 3.6 就已稳定，但有三个关键限制：不支持内联 SVG（如 data:image/svg+xml;base64,... 在部分旧版 Safari 中会失效）；不支持外部 SVG 中的 <script> 或动态引用；SVG 文件需以 .svg 扩展名结尾并返回正确的 Content-Type: image/svg+xml（否则 Firefox 可能拒绝渲染）。
推荐做法是把 SVG 保存为独立文件，例如 icon-check.svg，然后这样写：
ul.custom {
list-style-image: url("icon-check.svg");
}
为什么 SVG 图标显示异常或尺寸失控？
list-style-image 不提供缩放控制，图标尺寸完全取决于 SVG 自身的 viewBox 和 CSS 中的 font-size（它会继承行高影响图标基线对齐）。常见问题包括图标过大、偏上、或被截断。
- 确保 SVG 有明确的
viewBox（如viewBox="0 0 24 24"），不要只靠width/height属性 - 避免在 SVG 根元素上设置固定
width或height，这会导致缩放失真 - 用
line-height和padding微调垂直对齐，而不是依赖vertical-align（它对list-style-image无效）
替代方案：用 background-image 模拟更可控的 SVG 列表图标
当需要精确控制大小、颜色或响应式缩放时，list-style-image 很快会力不从心。更稳妥的做法是禁用默认标记，改用 background-image + padding-left：
立即学习“前端免费学习笔记（深入）”；
ul.custom li {
list-style: none;
padding-left: 28px;
background-image: url("icon-check.svg");
background-repeat: no-repeat;
background-position: 0 0.3em;
background-size: 16px 16px;
}
这样做的好处：background-size 可缩放，background-position 可精调对齐，还能用 currentColor 动态着色（需将 SVG 中的 fill 改为 fill="currentColor" 并配合 background-color 配合）。
兼容性兜底：如何让 IE11 或无 SVG 支持环境降级？
IE11 支持 list-style-image 加载 SVG，但不支持 SVG 中的 currentColor，也不支持 background-size 对 SVG 的缩放（仅支持像素值）。若必须兼容：
- 为 IE 提供 PNG 备用图：
background-image: url("icon-check.png");，再用@supports (background-size: contain)覆盖现代浏览器 - 避免在 SVG 中使用滤镜、渐变等高级特性，IE11 渲染容易出错
- 测试时打开开发者工具的“网络”面板，确认 SVG 文件返回状态码 200 且 MIME 类型为
image/svg+xml
真正麻烦的不是 SVG 本身，而是服务器没配对 MIME 类型，或者开发时用 file:// 协议打开 HTML —— 这会让本地 SVG 加载失败且无提示。
