Less原生支持data-uri()函数，可自动读取SVG并编码为base64 URI注入background-image；路径须相对编译入口，SVG需纯文本无BOM，不支持MIME参数，重复调用会增大CSS体积。
Less里直接用data-uri()函数转SVG
Less原生支持data-uri()函数，能自动把SVG文件读取并编码为data:image/svg+xml;base64, URI，再塞进background-image。关键点是路径必须相对Less编译入口（比如main.less），不是相对当前文件。
常见错误：SVG路径写成./icons/heart.svg，但实际Less入口在上层目录，结果编译报错File not found: ./icons/heart.svg。
- 确保SVG是纯文本格式（无BOM、无JS、无外部引用，
标签内联所有样式） - 路径用引号包裹：
data-uri('assets/icons/arrow-left.svg') - 如果SVG含中文或特殊字符（如
#、%），data-uri()会自动处理，不用手动encode - 不支持传入MIME类型参数——Less 4.x起已移除第二个参数，写
data-uri('x.svg', 'image/svg+xml')会报错
用url()配合@import变量间接注入
当SVG需复用或要动态切换颜色时，直接base64不够灵活。这时可先用@import把SVG内容读为字符串变量，再拼进url("data...")中——但注意：Less不支持运行时字符串拼接URI，所以得靠预处理器技巧。
更可行的做法是用构建工具（如webpack的svg-url-loader）提前转义，或改用PostCSS+SVG插件。纯Less场景下，不如直接把精简后的SVG内容复制进变量：
@heart-icon: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E";
然后在样式里用：background-image: url(@heart-icon);
- 手动转义推荐用在线工具（搜索“SVG to data URL encoder”），别用浏览器
encodeURIComponent——它对>等处理不一致 - 变量名避免用
@svg-xxx，Less会把连字符解析为减法，改用@svg_xxx或@icon_heart - 这种写法绕过文件读取，适合CI环境或lessc命令行编译失败时兜底
注意SVG内容里的fill和width/height继承问题
内联SVG作为背景图时，fill不会继承父元素颜色，width/height也不会响应式缩放——它被当作位图处理了。
典型现象：图标在高DPI屏上模糊、点击区域不对、主题换色后图标还是黑色。
- 解决颜色问题：SVG源码里把
fill="#000"改成fill="currentColor"，再配合color属性控制 - 解决尺寸问题：用
background-size: contain或1em，同时设background-repeat: no-repeat - 避免
viewBox宽高比失配：如果SVG是viewBox="0 0 100 100"，但容器是24px × 24px，又没设background-size，图标会被拉伸 - Less里不能用
svg-load()这类非标准函数——那是Sass的，Less没有对应实现
编译后CSS体积和缓存影响
每个data-uri()调用都会把SVG内容重复嵌入生成的CSS里。一个图标用5次，base64就复制5份，gzip后仍比独立HTTP请求大。
真实项目里，超过3个图标就该考虑拆分策略。
- 图标少且稳定（如loading、close）：用
data-uri()省请求，没问题 - 图标多或常更新：改用
+ external sprite - Webpack/Vite用户：直接用
url-loader?limit=8192，让小SVG自动转base64，大SVG走文件，Less里照写url('./icon.svg')即可 - 别在
@media查询里重复调用data-uri()——不同断点下同一SVG会生成多份base64
真正麻烦的不是怎么转，而是转完之后忘了SVG本身是否适配暗色模式、是否带焦点状态、有没有无障碍属性。base64背景图天生丢掉这些语义，能用标签的地方，优先别塞进CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
