MobileRead Forums - View Single Post

what · 03-20-2021, 05:26 PM

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:

Code:

<img src="image.jpg"/>

Code:

<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:

Code:

<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?

03-20-2021, 05:26 PM	#1
what Enthusiast Posts: 28 Karma: 10 Join Date: Mar 2021 Device: none	Centering SVG in Kindle Previewer 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: Code: <img src="image.jpg"/> Code: <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: Code: <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? Last edited by what; 03-21-2021 at 03:19 AM.