Bootstrap 中Navbar-brand如何嵌入SVG并应用样式？

本文共计1024个文字，预计阅读时间需要5分钟。

相关专题

为什么 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> 加载 SVG 时，若未显式设置 width 和 height，浏览器可能不渲染内容，且无法被 CSS max-width 控制

navbar-brand 中 SVG 的三种写法与推荐选择

不是所有方式都可靠，尤其在响应式场景下。