03-20-2021, 05:26 PM | #1 |
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> 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. |
03-20-2021, 06:06 PM | #2 | |
Fanatic
Posts: 554
Karma: 400004
Join Date: Feb 2009
Device: ONYX M96
|
Quote:
Code:
<svg width="100%" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg> |
|
Advert | |
|
03-21-2021, 03:25 AM | #3 |
Enthusiast
Posts: 28
Karma: 10
Join Date: Mar 2021
Device: none
|
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. |
03-21-2021, 05:23 AM | #4 | |
Fanatic
Posts: 554
Karma: 400004
Join Date: Feb 2009
Device: ONYX M96
|
Quote:
|
|
03-21-2021, 05:33 AM | #5 |
Enthusiast
Posts: 28
Karma: 10
Join Date: Mar 2021
Device: none
|
Please try in horizonal / landscape mode.
|
Advert | |
|
03-21-2021, 08:48 AM | #6 |
Fanatic
Posts: 554
Karma: 400004
Join Date: Feb 2009
Device: ONYX M96
|
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.
|
03-21-2021, 08:52 AM | #7 |
Fanatic
Posts: 554
Karma: 400004
Join Date: Feb 2009
Device: ONYX M96
|
UPDATE: uhm, this seems working for me in landscape and portrait mode:
Code:
<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> |
03-21-2021, 09:38 AM | #8 |
Enthusiast
Posts: 28
Karma: 10
Join Date: Mar 2021
Device: none
|
Thank you, I got it now!
I have been wrapping the SVG in a DIV: Code:
<div style="text-align:center"><svg ... Thank you!!! |
03-21-2021, 09:51 AM | #9 |
Fanatic
Posts: 554
Karma: 400004
Join Date: Feb 2009
Device: ONYX M96
|
My pleasure. text-align is not a <div> properties, but it is a <p> one.
|
03-22-2021, 08:41 AM | #10 | |
A Hairy Wizard
Posts: 3,093
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
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.
Quote:
Code:
div.image {text-align:center} div.image img {width:50%; max-width:1000px} <div class="image"><img alt="" src="../Images/test.jpg" /></div> |
|
03-22-2021, 08:45 AM | #11 |
Enthusiast
Posts: 28
Karma: 10
Join Date: Mar 2021
Device: none
|
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).
|
03-22-2021, 10:24 AM | #12 |
A Hairy Wizard
Posts: 3,093
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
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. |
03-22-2021, 10:49 AM | #13 |
Resident Curmudgeon
Posts: 73,887
Karma: 128597114
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Is this for an eBook that's going to be sold on Amazon?
|
03-22-2021, 12:16 PM | #14 |
Enthusiast
Posts: 28
Karma: 10
Join Date: Mar 2021
Device: none
|
|
03-22-2021, 12:25 PM | #15 |
Resident Curmudgeon
Posts: 73,887
Karma: 128597114
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
|
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Kindle Previewer 3.40 - 64bit, SVG text, snap-block | jhowell | Kindle Formats | 6 | 06-19-2020 09:02 AM |
SVG not centering vertically | Turtle91 | Sigil | 6 | 01-09-2020 03:43 PM |
Centering svg node in xhtml | AliceWonder | ePub | 2 | 09-13-2019 12:46 AM |
Kindle Previewer 3 versus KDP Online Previewer | Contre-jour | Kindle Formats | 3 | 05-29-2018 10:05 AM |
Centering SVG graphics in iBooks? | FunkeXMix | ePub | 8 | 01-04-2013 09:21 PM |