内联Flex布局中包含SVG的Div元素垂直偏移问题求助

各位好！我最近在做一个卡牌游戏的项目，需要从自定义的数据库拉取数据，用多个内联div展示给用户。但现在遇到个头疼的问题：部分div元素出现了垂直偏移，明明所有div的宽高都设成一样的，只是内容不同而已。

我排查了半天，发现只要div里嵌了SVG，这个div就会歪掉——没SVG的div都对齐得好好的。我试了好多种display属性都没用，而且还有个奇怪的现象：把SVG改小的话，偏移会消失，但如果小到0.5em这种程度，整个div反而会往下挪。现在的SVG尺寸比文本还小（其实我还想把SVG弄大些），但它却好像完全掌控了div的垂直位置，这实在搞不懂。

我的代码是这样的：

CSS部分：

div {
  width: 100px;
  height: 50px;
  display: inline-flex; /* 用来实现内联布局，同时让SVG和文本同行 */
  align-items: center;
  border: 1px solid black; /* 加边框方便看偏移情况 */
}

HTML部分：

<div>div 1</div>
<div>
  <svg viewBox="0 0 1 1" width="1em">
    <rect x="0" y="0" width="100%" height="100%" fill="blue"/>
  </svg>
  div 2
</div>
<div>div 3</div>

现在我既想让所有div都完美垂直对齐，又能把SVG调得更大些，有没有大佬能帮忙分析下这个问题的根源，再给个解决办法呀？感激不尽！

内容来源于stack exchange