I use
em for height and width in graphics for initials. That makes them scale with the text.
Code:
<div class="lettrine">
<svg xmlns="http://www.w3.org/2000/svg" height="8em" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 400 402" width="8em" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="400" height="402" xlink:href="../Images/initial-d.png"/></svg>
</div>
Code:
.lettrine {float: left; margin: 1.1em 0.5em -0.1em 0;}