Adding an SVG Wrapper

[ghostyjack]

I know you can add a blank SVG file to an epub by right-clicking the Images folder in the Book Browser (I'm not sure why you would want a blank SVG file, but there must be a reason), but is there anyway of inserting a regular image file (jpg, png, etc) with an SVG wrapper?

I can never seem to build it correctly when I want to insert one, so if there is a method already baked into Sigil?

Would this be an example where using the clips could resolve this?

[RbnJrg]

Originally Posted by ghostyjack

I know you can add a blank SVG file to an epub by right-clicking the Images folder in the Book Browser (I'm not sure why you would want a blank SVG file, but there must be a reason), but is there anyway of inserting a regular image file (jpg, png, etc) with an SVG wrapper?

I can never seem to build it correctly when I want to insert one, so if there is a method already baked into Sigil?

Would this be an example where using the clips could resolve this?

Last week I post a question about SVG wrappers in mobi files. Maybe that thread can be useful for you:

https://www.mobileread.com/forums/sho...d.php?t=215088

However, you can insert a SVG wrapper in Sigil by means of:

<div>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 573 850" width="100%">
      <image height="850" width="573" xlink:href="../images/v_execution.png" />
    </svg>
 </div>

Of course, instead of "850" and "573" you'll have to write here (in the viewbox and inside the <image /> tag) the size of your image and also modify the path to it. Finally you can play with the variable "preserveAspectRatio". Here you can use not only "xMidYMid" but any combination of xMin-xMid-xMax and yMin-yMid-yMax and also to use "meet" or "slice". Watch the following image:



Regards
Rubén

[theducks]

Originally Posted by ghostyjack

I know you can add a blank SVG file to an epub by right-clicking the Images folder in the Book Browser (I'm not sure why you would want a blank SVG file, but there must be a reason), but is there anyway of inserting a regular image file (jpg, png, etc) with an SVG wrapper?

I can never seem to build it correctly when I want to insert one, so if there is a method already baked into Sigil?

Would this be an example where using the clips could resolve this?

I am with you. Why!
I am guessing, there does need a way to make Sigil accept (incorporate) a SVG into the book.

I would have if they had ('borrowed' from the code used in Calibre for SVG covers) to Place "SVG Wrapped Image" (opposed to the current: place Image).
There are uses for both without having to learn SVG on top of the EPUB dialect of XHTML

[meme]

Sigil does have a Tools->Add Cover feature that will add an image using an SVG wrapper. It is designed to be used for a cover, so it will create/recreate a cover.html file and mark the file and the image as type cover. You can then copy the SVG wrapper to where you want it, and when everything is done you can re-add your original cover. Not a seemless Add Image using SVG wrapper feature, but it's an option. The SVG inserted is actually fully customizable using an ini file as described in the User Guide.

[theducks]

Originally Posted by meme

Sigil does have a Tools->Add Cover feature that will add an image using an SVG wrapper. It is designed to be used for a cover, so it will create/recreate a cover.html file and mark the file and the image as type cover. You can then copy the SVG wrapper to where you want it, and when everything is done you can re-add your original cover. Not a seemless Add Image using SVG wrapper feature, but it's an option. The SVG inserted is actually fully customizable using an ini file as described in the User Guide.

How did I miss that one?

[theducks]

Originally Posted by theducks

How did I miss that one?

To answer my own question:
It was on Tools where I would not have expected it .

I was thinking that 'Cover' was just another image (with flags) and was doing it the hard way (even witout the SVG part).
1a) Add Image File
1b) Add cover semantics
2) Place Image
2b) Add cover page semantics

[BobC]

Originally Posted by theducks

To answer my own question:
It was on Tools where I would not have expected it .

Well it might be on yours but there's no way I can locate an "Insert Cover" item in the Tools or any other menu in my copy of Sigil (0.7.1 running under Windows XP SP3). Just noticed it's a new feature in 0.7.2 so must get a copy.

BobC

[roger64]

Originally Posted by meme

Sigil does have a Tools->Add Cover feature that will add an image using an SVG wrapper. It is designed to be used for a cover, so it will create/recreate a cover.html file and mark the file and the image as type cover. You can then copy the SVG wrapper to where you want it, and when everything is done you can re-add your original cover. Not a seemless Add Image using SVG wrapper feature, but it's an option. The SVG inserted is actually fully customizable using an ini file as described in the User Guide.

Better to know it now than never....

[RbnJrg]

Originally Posted by theducks

How did I miss that one?

Not only you, me too But that is a new feature of Sigil 0.7.2 (I'm using Sigil 0.7.1). Well, there is a very good reason to update my Sigil However, new versions of Sigil should have a dialog where to config the SVG wrapper/container. Sigil will use in preserveAspectRatio="xMidyMid meet" and maybe that is not the best option ever for SVG images.

[theducks]

Originally Posted by RbnJrg

Not only you, me too But that is a new feature of Sigil 0.7.2 (I'm using Sigil 0.7.1). Well, there is a very good reason to update my Sigil However, new versions of Sigil should have a dialog where to config the SVG wrapper/container. Sigil will use in preserveAspectRatio="xMidyMid meet" and maybe that is not the best option ever for SVG images.

I tried the feature. Besides doing proper SVG code, it saves 2 of the steps listed above

I have a clip set to that to replace: preserveAspectRatio="none" that I find (or not used) in other books.

I HATE STRETCH-O-VISION. Be it TV or book covers

[meme]

Originally Posted by RbnJrg

However, new versions of Sigil should have a dialog where to config the SVG wrapper/container. Sigil will use in preserveAspectRatio="xMidyMid meet" and maybe that is not the best option ever for SVG images.

There isn't a dialog - but you can edit a file to put the svg code you want to use instead of the default into a file: http://web.sigil.googlecode.com/git/...add_cover.html

[RbnJrg]

Originally Posted by meme

There isn't a dialog - but you can edit a file to put the svg code you want to use instead of the default into a file: http://web.sigil.googlecode.com/git/...add_cover.html

Many thanks meme!

[RbnJrg]

Originally Posted by meme

There isn't a dialog - but you can edit a file to put the svg code you want to use instead of the default into a file: http://web.sigil.googlecode.com/git/...add_cover.html

Hi meme;

The "Add Cover" feature works fine but if I have enabled "Tidy", the <image /> tag is changed to <image>...</image> and that is not correct. Could it be possible in next versions of Sigil to fix that bug?

Many thanks in advance.

[meme]

Originally Posted by RbnJrg

Hi meme;

The "Add Cover" feature works fine but if I have enabled "Tidy", the <image /> tag is changed to <image>...</image> and that is not correct. Could it be possible in next versions of Sigil to fix that bug?

Just don't use HTML Tidy. Seriously, just use Pretty Print Tidy to format your code. You don't need all the changes that HTML Tidy might make.

[theducks]

Originally Posted by RbnJrg

Hi meme;

The "Add Cover" feature works fine but if I have enabled "Tidy", the <image /> tag is changed to <image>...</image> and that is not correct. Could it be possible in next versions of Sigil to fix that bug?

Many thanks in advance.

a simple (no source) img as a self closing tag is nonsense.

<img alt="Foobird" class="foocvr" src="../Images/00002.jpeg" />

would be OK