Quote:
Originally Posted by MikeWV
No, I have not picked apart the SVG image files, as I haven't figured out how to do that yet.
|
SVG files are just XML files. You can just open them up with your favorite Text Editor.
Quote:
Originally Posted by MikeWV
Unfortunately, Amazon's image specs are ambiguous and contradictory, so it's hard to tell what they really want and what they'll accept.
|
Yep, I agree.
SVG works in KF8, and shows up as a blank in the old MOBI format "KF7" (Kindle 1+2+DX). You need a JPG/GIF/PNG fallback.
Since you are going to create the JPG/GIF/PNG anyway, most publishers/converters just settle on the easiest + least labor intensive + least headache method... which "works" across all devices (although as you noticed, if an image of a table gets scaled up/down, the text starts looking like junk).
Quote:
Originally Posted by MikeWV
I've attached my largest table and a chart in SVG format as requested. I've also attached a smaller SVG table and a PNG version of the large table that is low resolution and sized for a basic e-reader. When the PNG image is presented at dimensions that match the image dimensions, it looks good and is actually legible on my Kobo Touch. The files are in a zipped folder, as SVG is not a valid type for uploading.
|
Fantastic, thanks so much. Examples are a HUGE help!
Side Note: Fantastic work by the way, this is DEFINITELY better than a bunch of the crap that I get. SVG/Vector Graphs are a HUGE PLUS (you would be surprised how much JPG trash I have to work through... and then the source document gets lost in the abyss, and you have no way of generating a higher resolution image.... Makes me want to pull my hair out).)
Quote:
Originally Posted by MikeWV
The part of my question that I haven't figured out is how to specify a non-proprietary or generic sans serif font within the SVG files, within the image tag or in the CSS that will override the font that is set in the software presenting the images to a reader. I really need a sans serif font for the larger tables, as tiny serifed fonts are not clear.
|
I attached an EPUB I put together testing a bunch of different stuff.
I opened up the SVG in a text editor, and spotted this:
Quote:
<tspan
style="font-size:11.03999996px;font-variant:normal;font-weight:normal;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;font-family:Calibri Light;-inkscape-font-specification:Calibri"
x="0 5.59728 8.3793602 14.039999"
y="0"
sodipodi:role="line"
id="tspan3148">0.00</tspan>
|
As you can see, it is specifying a font. Anything prefaced with -inkscape can be tossed in the trash, that is only for Inkscape specific stuff if you ever wanted to reimport it back in (useless if you are sticking it in an ebook).
I did a Replace All and replaced everything in
RED with what DaleDe mentioned above:
Quote:
<tspan
style="font-size:11.03999996px;font-variant:normal;font-weight:normal;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;font-family: sans-serif"
x="0 5.59728 8.3793602 14.039999"
y="0"
sodipodi:role="line"
id="tspan3148">0.00</tspan>
|
This made the table display using a sans-serif font (I also tested on my Nook, and the font was the sans-serif font):
Before:
After:
When using any non-Calibri fonts, letters ran into eachother (seen in the After picture above).
I wittled the error down to the part marked in
BLUE (I think this is specifying an exact location of each letter along the x-axis?):
Quote:
<tspan
style="font-size:11.03999996px;font-variant:normal;font-weight:normal;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;font-family: sans-serif"
x="0"
y="0"
sodipodi:role="line"
id="tspan3148">0.00</tspan>
|
I changed them almost all to x="0" and it solved a bunch of the characters running into eachother problem:
The EPUB includes:
- Your Original SVG
- An SVG where I implemented the RED change
- An SVG where I implemented the BLUE change
- 96dpi + 200dpi + 300dpi images which I generated from your SVG.
- Original + Blue expanded to 100% width via CSS
- It seems to overflow off the bottom of the page on thinner devices.
- Instead of that junky CSS, it would probably be much better to just emulate something along the lines of the typical SVG Cover code, which will stretch to max width and/or max height while keeping the same aspect ratio.
- HTML Table + a Split HTML Table (with some rough CSS to align/border cells).
- This table CSS is junk, and doesn't work across devices, do not copy it. I just quickly put it together with no serious testing.
- Side Note: The SVG information wasn't easily copy/pastable out. So I manually filled in a portion of the table.
- Point proven... SVG/Images, NOT EASILY COPY/PASTABLE.
Anyway, I had a giant tome written tackling a lot of your statements/questions + a ton of screenshots... but it will take me a while to go through and edit it (and I am too tired currently). I will maybe post it tomorrow/in a few days tackling/discussing a few more of the things that were brought up.