默认 hamburger 图标在高 DPI 屏幕上模糊，因 Bootstrap 5 使用固定分辨率 PNG（20×20），而 SVG 矢量图缩放无损；应通过覆盖 .navbar-toggler-icon { background-image: url("data:image/svg+xml,...") } 替换为内联 SVG data URL，并确保容器宽高非零、父级有 color 值以支持 currentColor 填色。
为什么默认的 hamburger 图标在高 DPI 屏幕上模糊
Bootstrap 5 的 navbar-toggler 按钮默认用的是 base64 编码的 PNG 图标，分辨率固定（通常是 20×20），在 Retina 或 2x 屏幕上会明显发虚。SVG 是矢量格式，缩放无损，替换后能立刻解决模糊问题，且体积更小、颜色可直接用 CSS 控制。
如何用 SVG 替换 navbar-toggler-icon
Bootstrap 5 把图标样式写死在 .navbar-toggler-icon 的 background-image 里。要替换，必须覆盖这个声明，不能只改 HTML 里的内容 —— 因为该元素是空的 <span class="navbar-toggler-icon"></span>，纯靠背景图渲染。
推荐做法：用内联 SVG 作为 background-image 的 data URL，避免额外 HTTP 请求，也绕过外部文件路径和 CORS 风险。
- 复制以下 SVG（三横线，24×24，适配 Bootstrap 默认尺寸）：
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
- 转成 URL 编码（注意：必须用
data:image/svg+xml,%3C...格式，不能用utf8或base64，否则 IE/旧 Edge 不兼容） - 在 CSS 中覆盖默认样式：
.navbar-toggler-icon {<br> background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='currentColor'%20d='M3%2018h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/%3E%3C/svg%3E");<br>} - 如果需要改颜色（比如深色模式下变白），把
fill='currentColor'留着，然后给.navbar-toggler加color: #fff即可生效
如果想用自定义 SVG 文件（非内联）怎么办
可以，但要注意路径解析上下文 —— background-image: url(./icons/menu.svg) 的路径是相对于当前 CSS 文件位置，不是 HTML 页面。本地开发时容易 404；构建工具（如 Webpack/Vite）可能不自动处理 .svg 在 CSS 中的引用。
- 确保打包配置已启用对 SVG 的 URL 处理（例如 Vite 的
assetsInclude: ['**/*.svg']） - 推荐用绝对路径或 public 目录：
url('/icons/menu.svg')（假设放在public/icons/下） - 必须设置
width和height，否则 SVG 可能拉伸变形；Bootstrap 默认期望 1.5em × 1.5em，建议在 CSS 中显式写：.navbar-toggler-icon {<br> width: 1.5em;<br> height: 1.5em;<br>} - IE11 不支持 SVG 作为 background-image，若需兼容，得回退到 PNG 或 JS 动态插入
为什么加了 SVG 还是不显示
常见原因不是代码写错，而是被其他样式覆盖或尺寸塌陷。
- 检查是否被父级
.navbar-toggler的padding或border挤压 —— SVG 背景图默认居中、不重复，但若容器宽高为 0，就什么也看不到 - 用浏览器开发者工具选中
.navbar-toggler-icon，看 computed 样式里background-image是否生效，以及width/height是否为auto或0px - 如果用了
currentColor填色但没生效，确认父级（.navbar-toggler）有明确的color值，且未被opacity: 0或visibility: hidden影响 - 某些 CSS 重置库（如 Normalize.css）会设
img, svg { max-width: 100% }，误作用于 background-image，可加background-size: contain强制控制
真正麻烦的点往往不在 SVG 本身，而在它所依赖的尺寸上下文和继承链 —— 每次不显示，优先查容器盒模型，而不是重做图标。
