根本原因是bootstrap对.navbar-brand设定了固定高度、内边距和垂直居中逻辑，而svg作为替换元素不自动继承宽高；需清除padding、设height:auto、用max-height控制缩放，并确保自定义css在bootstrap之后加载。
为什么 navbar-brand 里的 svg 总是尺寸错乱或不显示
根本原因不是 svg 本身有问题，而是 bootstrap 默认对 .navbar-brand 设了固定高度、内边距和垂直居中逻辑，而 svg 作为替换元素（replaced element），不会自动继承父容器的宽高行为。常见表现包括：svg 被裁剪、只显示左上角一小块、完全空白、或在小屏幕上消失。
-
.navbar-brand默认有padding: .5rem 1rem和height: 3.5rem（Bootstrap 4/5），会挤压 SVG 的渲染空间 - 直接用
<img src="logo.svg">时，若没设width/height或max-width: 100%，SVG 可能按原始 viewBox 尺寸渲染（比如 1200×800），远超导航栏高度 - 用
<object></object>加载 SVG 时，若未显式设置width和height，浏览器可能不渲染内容，且无法被 CSSmax-width控制
navbar-brand 中 SVG 的三种写法与推荐选择
不是所有方式都可靠，尤其在响应式场景下。优先级从高到低：
-
推荐：
<img>+ 显式width+height="auto"：最稳定，支持所有 Bootstrap 版本，可被max-width: 100%和媒体查询控制<img src="logo.svg" style="max-width:90%" height="auto" class="d-inline-block align-top"> - 次选：
<svg></svg>内联（把 SVG 代码直接贴进 HTML）：完全可控，但增加 HTML 体积，且需手动清理无用属性（如xmlns、xml:space） - 慎用：
<object></object>：兼容性差（IE11 支持但行为不一），fallback文本难对齐，且无法用 CSS 设置background-size类操作
必须覆盖的 Bootstrap 默认样式才能让 SVG 正常缩放
光改 SVG 标签不够，.navbar-brand 的默认样式会强行约束内容。以下 CSS 必须加在自定义样式表中（且确保它在 Bootstrap CSS 之后加载）：
.navbar-brand {
padding: 0;
height: auto;
line-height: 1;
}
.navbar-brand img,
.navbar-brand svg {
display: block;
max-height: 2.5rem; /* 匹配 navbar 默认行高 */
width: auto;
}
@media (max-width: 767.98px) {
.navbar-brand img,
.navbar-brand svg {
max-height: 2rem; /* 小屏收缩一点 */
}
}
- 删掉
padding是关键，否则 SVG 周围总有白边 -
height: auto让容器随 SVG 自适应，而不是反向挤压 SVG -
max-height比height更安全——既限制上限，又允许 SVG 按比例缩放 - 务必检查自定义 CSS 文件是否在
bootstrap.min.css之后引入，否则样式会被覆盖（这是最常被忽略的环节）
响应式 SVG 在折叠菜单中错位怎么办
当导航栏在小屏幕折叠后，.navbar-brand 仍留在顶部，但 SVG 可能因父容器 .navbar-collapse 的 transform 或 overflow 隐藏而偏移或截断。
- 给
.navbar-brand添加position: relative和z-index: 1000，确保它浮在折叠菜单之上 - 避免对
.navbar-brand使用transform或will-change，这些会创建新层叠上下文，干扰折叠动画中的定位 - 如果用了内联 SVG，检查是否有
viewBox值过大（如viewBox="0 0 2000 1000"），应简化为合理范围（如viewBox="0 0 200 50"），否则缩放计算容易失准
实际项目里，真正卡住人的往往不是 SVG 本身，而是没意识到 .navbar-brand 是个带强约束的“盒子”，以及自定义 CSS 加载顺序这个隐形开关。
