vite 默认不将 svg 转为 base64 内联，因其为文本格式，base64 反增约33%体积；推荐用 utf8 data url 或 svg sprite + 方式实现内联与优化。
Vite 默认不把 SVG 转成 Base64 内联，但支持更轻量的 data:image/svg+xml;utf8, 方式直接嵌入，且对 SVG 有专门的优化路径——关键在于你用什么方式引入它。
直接用 <img src="./icon.svg"> 不会内联
这是最常见的误区。Vite 的 build.assetsInlineLimit 配置只对图片（PNG/JPEG/WEBP 等二进制格式）和字体生效，不作用于 SVG 文件。哪怕你的 SVG 只有 200 字节，构建后仍会生成独立的 icon.svg 请求。
- 原因：Vite 认为 SVG 是纯文本格式，Base64 编码反而增加约 33% 体积，得不偿失
- 替代方案是 utf8 Data URL，但 Vite 原生不自动做这步转换
- 所以
<img>引入 → 保留独立文件 → 多个请求 → 碎片化加载
用 import 方式引入可触发内联（需插件或手动处理）
想让 SVG 进 JS/CSS 或 HTML 中，必须让它成为模块。常见可靠做法：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
-
配合
vite-plugin-svg-icons：配置后，所有 SVG 自动合并为一个<svg id="sprite-sheet"></svg>并注入 HTML body 底部；使用时写<use href="#icon-home"></use> -
手动内联 SVG 字符串：用
import svgString from './icon.svg?raw'，再通过innerHTML插入或封装成组件 -
转 React/Vue 组件：用
vite-plugin-svgr或@svgr/plugin-vue把 SVG 编译成可复用的 JSX/Template 组件，天然支持 props 控制颜色、尺寸
想“一键全内联”？用 vite-plugin-singlefile
如果你目标是打包成单 HTML 文件（含所有资源），这个插件会在构建末期把所有 JS、CSS、SVG、小图等全部内联进 HTML：
- 自动设置
assetsInlineLimit: Number.MAX_SAFE_INTEGER - 把 SVG 内容读取为字符串，转成
data:image/svg+xml;utf8,<svg...></svg...>放入<img>或 CSSbackground-image - 适合交付离线包、邮件模板、演示页等场景
开发阶段建议：优先走 SVG Sprite + <use></use> 模式
这是兼顾性能、维护性和样式的主流方案：
- 图标集中管理在
src/assets/icons/目录下 - 插件自动合并、去重、精简（移除
title、desc、冗余属性） - 运行时零请求，支持 CSS 填充色（
fill: currentColor）、缩放、动画 - 比每个 SVG 单独 import 更轻量，也比全量内联 HTML 更可控
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
