如何使 SVG 图像动态匹配周围文本的高度 (1em) 和基线？

是否可以动态调整 SVG 图像的大小（使用 HTML 或 CSS）以匹配周围文本的基线和高度？

像这样的东西（在这种情况下，SVG 图像是 Windows 徽标）：

Image 1 https://i.stack.imgur.com/Gjyku.png

Image 2 https://i.stack.imgur.com/QiJ8n.png

从图像中可以清楚地看出上下文；我希望 SVG 图像能够匹配文本的大小，无论页面查看者使用什么字体或字体大小。

如果可能的话，即使用户使用浏览器放大页面，它也应该仍然匹配文本的大小仅缩放文本特点（比如这个）：

support.mozilla.org/en-US/kb/font-size-and-zoom-increase-size-of-web-pages#w_how-to-only-change-the-size-of-the-text

我认为，实际上，我希望浏览器将 SVG 图像视为文本。

…我意识到使用网络字体实际上可能是这种情况下的最佳解决方案，但如果可以的话我宁愿避免它。除了这个问题的解决方案有点丑陋之外，它还会带来新的问题，例如：

• 即使我自己创建网络字体，徽标的高度也不会（确切地）匹配现有每种字体中的 em（尽管至少大小可能会很接近）

• 用户更有可能在图像上屏蔽网络字体

• etc.

天真的答案是将 SVG 的高度设置为1em。但是，当然，您想要匹配字体的 X 高度，而不是 em 高度。

好消息是，无论字体有多大，X 高度对于特定字体都是一致的。因此，一旦找到正确的 em 值来设置 SVG 大小，无论您选择什么字体大小，它都会起作用。

Demo

svg.keyicon
{
  width: 0.8m;
  height: 0.8em;
}


.small
{
  font: 24px Arial;
  color: black;
}

.large
{
  font: 36px Arial;
  color: blue;
}

<div class="small">
  Press the 
  <svg viewBox="0 0 100 100" class="keyicon">
    <circle cx="50" cy="50" r="50" fill="currentColor"/>
  </svg>
  key...
</div>


<div class="large">
  Press the 
  <svg viewBox="0 0 100 100" class="keyicon">
    <circle cx="50" cy="50" r="50" fill="currentColor"/>
  </svg>
  key...
</div>