Mobileread
SVG questions...
#1  Ghitulescu 04-08-2020, 02:39 AM
I use Calibre to edit my books.
By default, Calibre renders the cover as SVG, and this gave me an idea.

I always had troubles using fonts in SVG, so I used the excellent tutorial elsewhere on this forum to render fonts into "paths" so that embedding/referring a font won't be anylonger necessary.

There are two things however I cannot grasp. Yet.

The SVG, as its name said, is an adimensional graph (it means it can be scaled up and down without perceived loss of quality - the loss cames from mapping to real pixels, not from scaling), however the SVG file coming from Inkscape has a size, in my case 279 x 205.
Shouldn't be the size not present? What relevance does it have?

Second. My workflow, since I am a beginner in SVG, implies the reuse of an existing file (sort of a template) to which I change or add or delete the elements. It also happened when starting from an empty (New file...) drawing. I used "Select all elements" then "Resize page to content" (a very hidden command ), so that the resulting SVG be restricted to necessary.
And this is how I came to my problem - leaving margins around the SVG in the page I was putting it - the page has only one figure, the SVG itself, and it's copied from the cover page of calibre. It works well on all readers, yet the SVG is "glued" to one margin (top or left, depending on the page settings and orientation versus the SVG aspect-ratio). I thought that changing the width and height to 90% would center the image 5% from each margin - it doesn't.

I read all nine pages on SVGs, also the wiki on this subject, but I still do not know how to solve this issue.
What bothers me is that SVGs I use have borders and they do not look nice (they waste their artistic impact) when no guard space exists.
I envisage here 2 slutions - 1. reedit the SVG in Inkscape to add blank "spacers", or 2. to add them in the ePub.

Thanks in advance.
Reply 

#2  RbnJrg 04-08-2020, 08:06 AM
Watch the epub I attach. There you'll find several methods to get what you want.

Regards
Rubén
[epub] Centering SVG Images.epub (108.8 KB, 28 views)
Reply 

#3  Ghitulescu 04-08-2020, 09:11 AM
It's the
Code
preserveAspectRatio="xMidYMid meet"
thing, right?
Reply 

#4  Doitsu 04-08-2020, 09:24 AM
Quote Ghitulescu
What bothers me is that SVGs I use have borders and they do not look nice (they waste their artistic impact) when no guard space exists.
If you're using InkScape, you might have to uncheck the following setting:
File > Document Properties > Page > Border > Show Page Border.
Reply 

#5  Ghitulescu 04-08-2020, 09:40 AM
Thanks,

I am new on Inkscape, for I am fed with fonts in SVG and in ePub (the combination I mean).

I need the borders, they are part of the design, they are not those of Inkscape but mine.

When I drew the SVG by hand and pocket calculator in Calibre, I left blank/white spaces for all margins, but the SVG imported in Inkscape lost them and I have to use the above trick to get back to the good size.

I enclosed now the bare SVG in yet another object, a div, height:90%, margin-top: 5%, width:90%, margin-left:5% - this and the scaling to 100% within the SVG centered the cover.
Reply 

#6  RbnJrg 04-08-2020, 12:03 PM
Quote Ghitulescu
It's the
Code
preserveAspectRatio="xMidYMid meet"
thing, right?
Very right It's a key property if you want to center a svg image.

https://wiki.mobileread.com/wiki/SVG...26_AspectRatio
Reply 

Today's Posts | Search this Thread | Login | Register