How to Make an SVG Image Dynamically Match the Height (1em) and the Baseline of Surrounding Text?

Is it possible to dynamically resize an SVG image (using HTML or CSS) to match the baseline and height of the surrounding text?

Something like this (the SVG image being the Windows logo in this situation):

The context is probably clear from the images; I want the SVG image to match the size of the text no matter what font face or font size the viewer of the page is using.

If possible, it should also still match the size of the text even if the user zooms in the page using their browser’s Zoom Text Only feature (like this one):

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

I suppose that, effectively, I want the browser to treat the SVG image as if it’s text.

…I realize that using a web font may actually be the optimal solution in this scenario, but I’d rather avoid it if I can help it. Other than it being a bit of an ugly solution to the problem, it also creates new issues, like:

• even if I create the web font myself, the height of the logo won’t (exactly) match an em in every font in existence (although, at the very least, the sizes will probably be close)

• there’s a higher chance that the user will have web fonts blocked over images

• etc.

What worked for me: <svg height="1lh"> and vertical-align: text-bottom.

Using the new-ish lh CSS unit (one line height).

Ref CSS height in terms of line-height