Less中data-uri()内联SVG图标不显示，根本原因是未显式指定MIME类型导致误用URL编码而非base64，且SVG含XML声明或BOM；应写为data-uri('image/svg+xml', '@{path}')，并确保SVG为UTF-8无BOM、无声明。
Less中用data-uri()内联SVG图标时为什么图片不显示
常见现象是编译后CSS里生成了data:image/svg+xml;base64,...，但元素背景空白。根本原因是SVG源码未正确转义：Less的data-uri()函数默认按MIME类型自动编码，而未声明svg+xml时会误用URL编码（非base64），导致浏览器解析失败。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 显式传入
svg+xmlMIME类型：data-uri('image/svg+xml', '@{icon-path}') - 确保SVG文件本身是UTF-8无BOM编码，且首行不含XML声明（如
<?xml version="1.0" encoding="UTF-8"?>），否则base64解码后可能被浏览器拒绝渲染 - 若图标含CSS样式（如
fill="currentColor"），保留它——内联后仍可被父级文本色控制
批量转换多个SVG为CSS变量时如何避免路径硬编码
手动写每个data-uri()调用易出错且难维护。Less不支持运行时遍历文件系统，但可通过预定义映射表+循环模拟“批量”：
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 建一个
@icons列表，如：@icons: 'home' './icons/home.svg', 'user' './icons/user.svg'; - 用
.for()循环（需引入less-plugin-for）或手写mixin逐个生成--icon-home等CSS变量 - 更稳的方式是构建时用脚本（如Node.js +
fs.readFileSync+Buffer.toString('base64')）生成icons.less，再@import——绕过Less解析限制
使用data-uri()后图标在IE11中不兼容怎么办
IE11对data: URI长度有限制（约32KB），且不支持SVG中的某些特性（如<use></use>引用、外部href）。直接内联会导致图标消失或报SEC7113: CSS content ignored due to invalid MIME type错误。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对IE11单独提供fallback：用
@supports not (background: url(data:))包裹传统url('./icon.png') - 简化SVG源：移除
<defs></defs>、<symbol></symbol>，扁平化为单个<path></path>，并用SVGO压缩 - 改用字体图标方案（如IcoMoon）作为IE11兜底，不强求数据流统一
Less编译后CSS体积暴增是否得不偿失
每个data-uri()都会把SVG内容重复嵌入每处使用位置（除非用CSS变量统一管理）。10个2KB图标×5次使用 = 额外100KB CSS，反而拖慢首屏。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只对高频小图标（≤1KB，如加载态、开关、箭头）启用
data-uri()；大图标或低频图标仍走HTTP缓存 - 务必启用Gzip/Brotli压缩——base64后的SVG文本压缩率极高，实际传输增益常超预期
- 检查Source Map是否意外包含原始SVG路径，避免泄露敏感目录结构
真正关键的是权衡：数据流省掉的是连接建立和TLS握手开销，不是文件大小本身。移动端弱网下，少一次请求的价值远高于几KB CSS膨胀。
