Centering SVG in Kindle Previewer

[what]

I'm trying to center a full page SVG in Kindle Previewer in landscape mode.

When I have a JPEG in an IMG tag or a JPG in an SVG tag, I can center that image. Both the following images get centered:

<img src="image.jpg"/>

<svg ...>
      <image ... xlink:href="../Images/cover.jpg"></image>
</svg>

But when I have an SVG image with paths it always sits at the left edge of the screen. The following image doesn't get centered:

<svg width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Is that because of poor SVG support in Kindle Previewer, or am I doing something wrong?

I have tried to wrap the SVG in a div with "text-align: center" and set the image to "display:inline". That works for the JPEG but not for the SVG.

If you can get an SVG with paths to center, what method are you using?

[fbrzvnrnd]

Originally Posted by what

But when I have an SVG image with paths it always sits at the left edge of the screen. The following image doesn't get centered:

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Is that because of poor SVG support in Kindle Previewer, or am I doing something wrong?

I think it is correct the image is on the left edge. Try:

<svg width="100%"
            viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
        </svg>

to zoom and use all the width.

[what]

I'm sorry, fbrzvnrnd, in my attempt to provide a simplified code sample, I left out some relevant parts of the code. I have edited my question. Now the problematic third example contains the valid code for a full page SVG that 1. preserves aspect ratio and 2. stretches to the width and/or height of the viewer window (whichever is smaller).

I cannot get that to center in the Kindle Previewer.

[fbrzvnrnd]

Originally Posted by what

I'm sorry, fbrzvnrnd, in my attempt to provide a simplified code sample, I left out some relevant parts of the code. I have edited my question. Now the problematic third example contains the valid code for a full page SVG that 1. preserves aspect ratio and 2. stretches to the width and/or height of the viewer window (whichever is smaller).

I cannot get that to center in the Kindle Previewer.

I see it centered...

[what]

Please try in horizonal / landscape mode.

[fbrzvnrnd]

Originally Posted by what

Please try in horizonal / landscape mode.

Sorry, I forgot the landscape. Yes, in landscape there is a problem: if Kindle used the "width:100%" to extend the image, the height would be higher than the Kindle screen and the svg would be broken. So Kindle stops to extend the width when the image reach the max height. You can try to use the media queries for landscape and portrait format, adjusting the right and left margin in landscape mode, but I honestly don't remember how Kindle support media queries. Maybe there is a simpler trick that I'm not thinking about right now.

[fbrzvnrnd]

UPDATE: uhm, this seems working for me in landscape and portrait mode:

<p style="text-align:center"><svg width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
</p>

[what]

Thank you, I got it now!

I have been wrapping the SVG in a DIV:

<div style="text-align:center"><svg ...

And that doesn't work. But when I wrap my SVG in a P, like you did, it works like a charm!

Thank you!!!

[fbrzvnrnd]

Originally Posted by what

Thank you, I got it now!

I have been wrapping the SVG in a DIV:

<div style="text-align:center"><svg ...

And that doesn't work. But when I wrap my SVG in a P, like you did, it works like a charm!

Thank you!!!

My pleasure. text-align is not a <div> properties, but it is a <p> one.

[Turtle91]

I've been using vw/vh for the width/height to fix some of these issues. That, along with the "xMidYMid meet" tends to center things nicely with svg wrapper. I don't use kindlepreview, but it may work for you.

<svg width="100vw" height="100vh" preserveAspectRatio="xMidYMid meet"....

I still use <div> wrapper for non-full page images, and <span> for inline images, you just need to use the proper css in your css page:

div.image     {text-align:center}
div.image img {width:50%; max-width:1000px}

<div class="image"><img alt="" src="../Images/test.jpg" /></div>

[what]

Turtle91, does vw/vh work in Kindle? And is your full page image centered in Kindle in landscape mode? The code you use didn't work for me (in Kindle Previewer – I don't own a Kindle so cannot actually test the device).

[Turtle91]

I don't use a kindle or kindlepreviewer so I can't help you there. I have had issues with SOME renderers that was fixed by using the vw/vh for the svg wrap. I think the newer kindle devices honor svg images throughout the ePub. Older devices had issues with svg in anything but the cover.

I can't test in the kindle - the only one I own is a paperwhite from way-back-when just so I can download from their store...but it has been "lost" since the day I bought it.

[JSWolf]

Is this for an eBook that's going to be sold on Amazon?

[what]

Originally Posted by JSWolf

Is this for an eBook that's going to be sold on Amazon?

Yes, it is.

[JSWolf]

Originally Posted by what

Yes, it is.

So what are you going to do for Mobi? You also have to that into account. That's the problem trying to publish on Amazon using any sort of advanced formatting as you have to deal with Mobi, KF8, and KFX.