I have a flex container with inline elements. In this example everything is vertically-aligned properly...
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous"><header class="py-5 border-bottom" style="background-color: #f2ce4f;"><div class="container d-flex flex-wrap justify-content-center"><a href="/" class="d-flex align-items-center mb-lg-0 me-lg-auto link-body-emphasis text-decoration-none"> <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"></use></svg> <span class="fs-4">Page Title</span> </a><svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"></use></svg><div class="col-md-4"><a href="/" class="btn btn-success btn-lg btn-block btn-huge px-4 py-4" style="font-weight: bold;">Button</a></div></div></header>When I replace the span with an SVG however, suddenly the contents shift and everything becomes unaligned...
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous"><header class="py-5 border-bottom" style="background-color: #f2ce4f;"><div class="container d-flex flex-wrap justify-content-center"><a href="/" class="d-flex align-items-center mb-lg-0 me-lg-auto link-body-emphasis text-decoration-none"> <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"></use></svg> <svg width="200" height="120"><rect x="10" y="10" width="200" height="100" fill="#198754" /></svg> </a><svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"></use></svg><div class="col-md-4"><a href="/" class="btn btn-success btn-lg btn-block btn-huge px-4 py-4" style="font-weight: bold;">Button</a></div></div></header>