[RbnJrg]

Originally Posted by momoha

Yeah in Google Books it was fine!

Well, then the issue with Google Books is solved! You only will use one value, the width (in %) and nothing more. And that by using only a class (I used class="svg" but of course, you can use any of your wish). So, you only work here is to think about how width will be your svg images (in percentage of the screen). Suppose you want three, four "width"; well that is easy because with only three/four clasees you'll have covered the universe.

But I don’t see how making multiple files could be viable for us as it would be complicated for our clients and also from what I know, the main platform where most of our clients send the ePubs takes only one single file, independently of whatever the readers use.

I'm afraid of that "one for all" will be very difficult in this case. The "calc" property is not well supported in all ereaders. Maybe with media-queries could be possible to build one epub but... I think your best chance (that is, with your current restriction, not to use a width and height for each svg image) is with two epubs, one for Google Books and one for all others ereaders. And for all other ereaders you only need to use the following code to manage the svg images:

<p class="center"><img class="svg" alt="Temp" src="../Images/Temp.svg"/></p>

and

.center {
   text-indent: 0;
   text-align: center;
}

.svg {
   font-size: 1em;
   width: 33%; /*or the percentage of your wish*/
   height: auto;
   padding: 1em 0;
}

and that for all svg images. Right now you have made practically all the work; you only need to add 'class="svg"' in your <img> tags and suppressing style="width: xxx; height: xxx;" (a piece of cake with regex).