[RbnJrg]

Originally Posted by momoha

I tested the calc codes on my dinosaur Kobo, without the kepub extension, where literally any innovative code won’t work, and they are both working fine, but it is a strange behaviour.

In <svg> of the embedded SVG, it seems to be fully supported. If I remove it, the image is not displayed correctly, and when I insert it back, the image is fine.

But inside the <img> of the linked SVG, it creates problems only if it is placed first, and it is fine when placed last (it is probably just ignored).

Like, this isn’t displayed properly:

<p class="credits"><img style="width: calc(20pt*73.275/17.408); height: 20pt;" src="../Images/canada.svg" alt=""/></p>

This is fine:
Like, this isn’t displayed properly:

<p class="credits"><img style="height: 20pt; width: calc(20pt*73.275/17.408); " src="../Images/canada.svg" alt=""/></p>

I will ask other people to test it also, let’s see. Sadly I don’t have access to other ereader... But the vast majority of our market uses Kobo only.

But of this way you'll need to write the width and height for each image and that is what you wanted to avoid (style="height: 20pt; width: calc(20pt*73.275/17.408)) Or am I wrong?

But try the following code:

1. In the .xhtml file:

<p class="credits"><img class="measures" src="../Images/canada.svg" alt=""/></p>

2. In the .css file:

.measures {
   height: 2em;
   width: calc(2em*73.275/17.408);
}

But even so, easier would be to employ (and should work in Kobo but not in Google Books):

.measures {
   font-size: 1em;
   height: auto;
   width: 15em; /*or whatever*/
}