SVG questions...

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.

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

Ghitulescu · 04-08-2020, 09:11 AM

It's the

Code:

preserveAspectRatio="xMidYMid meet"

thing, right?

Doitsu · 04-08-2020, 09:24 AM

Quote:

Originally Posted by 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.

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.

RbnJrg · 04-08-2020, 12:03 PM

Quote:

Originally Posted by 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

04-08-2020, 02:39 AM	#1
Ghitulescu Fanatic Posts: 563 Karma: 403106 Join Date: Aug 2014 Device: PRS-T1	SVG questions... 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.

04-08-2020, 09:11 AM	#3
Ghitulescu Fanatic Posts: 563 Karma: 403106 Join Date: Aug 2014 Device: PRS-T1	It's the Code: preserveAspectRatio="xMidYMid meet" thing, right?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
SVG editor	phossler	Editor	7	07-23-2019 09:28 AM
Can't add cover in Calibre -- get "svg-error" (the property 'svg' should be declared)	Just some guy	Editor	7	04-11-2017 09:54 PM
svg error	curiousgeorge	ePub	6	12-21-2012 01:14 PM
Problems with SVG	ninni	ePub	11	06-18-2010 11:58 AM
Inline SVG questions (whitespace & other practices)	politicorific	Workshop	6	04-12-2009 05:32 PM

04-08-2020, 09:40 AM	#5
Ghitulescu Fanatic Posts: 563 Karma: 403106 Join Date: Aug 2014 Device: PRS-T1	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.

Advert

Advert