I'm sorta having similar problems but I've gone down the rabbit hole with svg image:
In my stylesheet:
.svg {
display: block;
margin-top: 1em;
margin-bottom: 1em;
text-align: center;
margin-left: auto;
margin-right: auto;
width: 15%;
}
In my html:
<p class="svg"><img alt="scrolls" src="scrolls.svg"/></p>
and another, I tried using the viewbox method:
<p class="svg" width="100%" height="100%" viewbox="0 0 45 30" preserveaspectratio="xMinYMin meet"><img width="45" height="30" alt="scroll" src="scroll.svg"/></p>
as I have two svg images, scroll and scrolls. Both failed, when I open it in a epub application, such as Sony Reader for PC (see 2 attached pictures/screenshots), however, it's fine in Sigil and Calibre. I want to keep the size of scrolls.sgv, as I'm happy with the size, however, I would like scroll.svg to be smaller. I'm editing this in Sigil.
Very bizarre! Any help with this, would be much appreciated.