[draconisgaleon]

I'm new to creating ebooks and I'm currently creating one in epub format, manually, my first experience.

Following the explanations available here and elsewhere on the internet, I was able to successfully add the cover using svg. Using this code:

<div>
     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
       viewBox="0 0 768 1276" preserveAspectRatio="xMidYMid meet" width="100%" height="100%">
       <image xlink:href="images/cover.jpg" width="100%" height="100%" />
     </svg>
</div>

In this case, the cover image occupies the entire screen, however there is an image that I want to add, as a cover page, whose size is 400 x 442, so that it is centered vertically and horizontally.

Aligning horizontally is not complicated using just HTML and even vertically with more modern CSS solutions, but for now I'm trying to avoid using CSS due to possible limitations that some e-readers may have regarding this styling language.

An alternative would be using tables, right? But I read in some thread on this forum that it would be better to stay away from this type of practice when it comes to images.

So what am I left with? Use the same svg code above, making changes?

I admit that the use of svg is still cloudy for me, but with the help of chatGPT , I obtained the following code that seems to have worked for this purpose on my browser screen, including on a custom screen that I added to the " Toogle device toolbar" within Inspect, to simulate the size of my Kindle (600 x 800):

<div style="text-align: center;">
         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height ="100%" viewBox="0 0 400 442" preserveAspectRatio="xMidYMid meet">
             <image xlink:href="images/draconisgaleon.jpg" x="25%" y="25%" width="50%" height="50%" />
         </svg>
</div>

Result: https://imgur.com/a/uBy8sVS

What do you think about this?

Thank you very much.

draconisgaleon