Inserting a small floating svg

[roger64]

Hi

I wish to insert a small svg as a floating right image within a paragraph. Everything goes well using an image tag except that it looks like a fixed image. I get mixed results using an object tag and I wonder if there is something to improve upon. Here is it.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim elit massa. Vivamus gravida, dui sit amet hendrerit laoreet, orci tortor dignissim diam, eget tempus erat dolor a ex. Mauris et erat quis nisi porta laoreet vitae quis ex. Aenean mattis risus non hendrerit fermentum.<object type="image/svg + xml" data="images/fumer.svg" style="float:right"/><img src="images/fumer.png" alt="encart" /></object>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim elit massa. Vivamus gravida, dui sit amet hendrerit laoreet, orci tortor dignissim diam, eget tempus erat dolor a ex. Mauris et erat quis nisi porta laoreet vitae quis ex. Aenean mattis risus non hendrerit fermentum.</p>

PS: for some unknown reason, I can't upload anything on MR

https://mega.co.nz/#!RUtHFAbZ!DbXMr4...86S0dqG6yKxRr4

[Tex2002ans]

Hmmm, we figured out how to get an SVG inline "apple character" working (see Post #24+, although read the rest too, it might be helpful):

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

I used similar code, and I got it working well in Sigil (not too sure how well a floating SVG works on actual devices right now, or if this works in KF8, or how well it degrades). But here is the basic code:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim elit massa. Vivamus gravida, dui sit amet hendrerit laoreet, orci tortor dignissim diam, eget tempus erat dolor a ex. Mauris et erat quis nisi porta laoreet vitae quis ex. <img alt="" class="svg_img" src="../Images/fumer.svg"/> Aenean mattis risus non hendrerit fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim elit massa. Vivamus gravida, dui sit amet hendrerit laoreet, orci tortor dignissim diam, eget tempus erat dolor a ex. Mauris et erat quis nisi porta laoreet vitae quis ex. Aenean mattis risus non hendrerit fermentum.</p>

with the CSS:

.svg_img {
  	display: inline;
  	height: 5em;
  	width: auto;
	float: right;
}

The height can be tweaked. In that Apple Character topic, we had it set to 1em (since we wanted the apple to scale with the size of the text).

Attached = the EPUB.

Side Note: Any particular reason why you settled on SVG version of this text, instead of just handling this using normal CSS?

[roger64]

@Tex2002ans

Just trial and learning how to use svg. Also the font is self-contained within the svg which can be handy.

Thanks a lot for providing a working example. With the img tag, it looks easier. I had read that the object tag is a recommended way to handle svg, the main reason being that it can degrade gracefully to a png image.

I was not aware of your link and I will certainly look at it carefully.

[RbnJrg]

Originally Posted by roger64

Hi

I wish to insert a small svg as a floating right image within a paragraph. Everything goes well using an image tag except that it looks like a fixed image. I get mixed results using an object tag and I wonder if there is something to improve upon. Here is it.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim elit massa. Vivamus gravida, dui sit amet hendrerit laoreet, orci tortor dignissim diam, eget tempus erat dolor a ex. Mauris et erat quis nisi porta laoreet vitae quis ex. Aenean mattis risus non hendrerit fermentum.<object type="image/svg + xml" data="images/fumer.svg" style="float:right"/><img src="images/fumer.png" alt="encart" /></object>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim elit massa. Vivamus gravida, dui sit amet hendrerit laoreet, orci tortor dignissim diam, eget tempus erat dolor a ex. Mauris et erat quis nisi porta laoreet vitae quis ex. Aenean mattis risus non hendrerit fermentum.</p>

PS: for some unknown reason, I can't upload anything on MR

https://mega.co.nz/#!RUtHFAbZ!DbXMr4...86S0dqG6yKxRr4

Here you can see an example of a float svg image:

https://www.mobileread.com/forums/sho...4&postcount=11

The .svg image in this case is for a drop cap (and is float: left) but you can follow the "technique" to use any other svg image and to use "float: right" instead of "float: left".

Regards

[roger64]

Thanks Ruben for a useful tip. Actually, I do not find particularly difficult to write text using Inkscape. But while you are here, I have some svg-related questions that puzzle me (beware, I am greedy).

1 - if the use of the object tag is recommended for svg, why do people still use img tags?

2- how to draw a spreadsheet on svg?
First I thought to produce a cell, then two, then four, make a row, then two rows, four rows, etc. Then we enter the cell values row by row and we align them. But there must be a better solution than this cumbersome idea? Or have we to draw each vertical and horizontal line and align them? Or maybe use a bitmap made table and vectorize it?

3- how long did you need to create your nice leopard cover image in svg? It's amazing!

[RbnJrg]

Originally Posted by roger64

Thanks Ruben for a useful tip. Actually, I do not find particularly difficult to write text using Inkscape. But while you are here, I have some svg-related questions that puzzle me (beware, I am greedy).

Ok. Roger, no problem

1 - if the use of the object tag is recommended for svg, why do people still use img tags?

Hmmm, <object> tag is only recommended if you want to use some dinamic effects; otherwise, use <img> tags. Since epub3 is still far away, I don't see the <object> tag practical. But you also can use others method to insert svg images in a .xhtml files (also you can use css to set a svg as background; I use a lot css to include svg fleurons in my books). See the epub I attach. But if I were you, I only would employ <img> tag or css.

Using SVG images.epub

2- how to draw a spreadsheet on svg?
First I thought to produce a cell, then two, then four, make a row, then two rows, four rows, etc. Then we enter the cell values row by row and we align them. But there must be a better solution than this cumbersome idea? Or have we to draw each vertical and horizontal line and align them? Or maybe use a bitmap made table and vectorize it?

Good question; I'd like to know the answer So far, I make the table in Excel and then I export it as .pdf and after I open the .pdf in Inkscape and I try to polish the things. Read this article:

http://xltoolbox.sourceforge.net/blo...-to-svg-files/

It's about how to convert Excel charts into svg images but the procedure is applied also to tables.

3- how long did you need to create your nice leopard cover image in svg? It's amazing!

Less than one minute Inkscape makes all the work; just import the bitmap file and after that, use the command Path\Trace Bitmap... In the section "Multiple scans" select "Colors" and set the option "Scans:" to 64. That's all

Regards
Rubén

[roger64]

Hi Rubén

Thanks for your replies and your epub.

So for the time being, I will still use img tags and I have some nice color experiments to do...

[Tex2002ans]

Also, you wouldn't want export a table to bitmap, and then "trace bitmap" using Inkscape... that will lead to subpar results. For example, you can see this in the topic where we discussed Sheet Music (this is to my Post #38, although take a look through the rest of the topic, you might also run across other useful SVG info):

https://www.mobileread.com/forums/sho...1&postcount=38

You can see the "wobbly lines" that get caused by "trace bitmap" (this also bloats the filesize).

Also, on the topic of SVG Charts/Tables, there was a topic by MikeWV:

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

and later, he was also running into problems with embedded fonts in SVG on Kobo:

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

[roger64]

@Tex2002ans

Thanks for your info. I had seen this topic on tables, hence my question.

As for me, now if I join some text on an svg image, I would not rely on embedded fonts in the EPUB, for the current lack of support. Let svg do this work and don't rely on the Reader!

I have rather export the svg file including the font the way I did above. A possible use of it would be to add some few missing characters (Chinese, Greek, some fantasy characters, etc.) presumably lacking in the embedded fonts.

I think svg support is rather poor at the moment and we have to be careful. For example, a plain svg file including only some text will be correctly rendered, but if you add some graphics to it, the Reader may silently choke on it.

[RbnJrg]

Originally Posted by Tex2002ans

Also, you wouldn't want export a table to bitmap, and then "trace bitmap" using Inkscape... that will lead to subpar results.

Hi Tex;

I think you didn't understand me. You are right, we don't have to export a table as a bitmap and then to import in Inkscape to trace it. What I say is that you have to save the Excel file (with the table) as .pdf and after that, to OPEN that .pdf in Inkscape (the program will ask you what part of the .pdf you want to open). And that's all; the .pdf will be converted into paths and you'll have the table as svg. Watch the table I attach in the following .epub:

SVG Table.epub

This table is the raw result of opening the .pdf in Inkscape. I didn't improved the table at all. So, with a bit of work, the resulting table could be better. So far, this is the best method that I found to convert a table to svg image but, I don't know, could have better ways to do it.

Regards
Rubén

[Tex2002ans]

Originally Posted by RbnJrg

I think you didn't understand me. You are right, we don't have to export a table as a bitmap and then to import in Inkscape to trace it.

Ahh, I could have sworn I read roger64 saying something about tracing a table in an earlier post... maybe I was just going delusional, and it was past my bed time!

Maybe it was just something I was gathering from rereading those topics again too, and wrongly attributed it to this one.

[RbnJrg]

Originally Posted by Tex2002ans

Ahh, I could have sworn I read roger64 saying something about tracing a table in an earlier post... maybe I was just going delusional, and it was past my bed time!

Here you have another svg table; this time I spent 5 minutes to improve the result. As you can see, practically perfect.

SVG Table II.epub

The curious thing is that the 5 minutes I worked with the .pdf file because THIS IS THE KEY to have good results with Inkscape. As better the .pdf, better the svg table.

You are a master with LaTeX, so do a try by converting a LaTeX table in a svg image. Just one more thing: when you are going to open the .pdf in Inkscape, set the "Precision of approximating gradient meshes:" to 129; of that way you'll have clean, net lines. Tell me your results.

Regards

[Tex2002ans]

Originally Posted by RbnJrg

You are a master with LaTeX, so do a try by converting a LaTeX table in a svg image. Just one more thing: when you are going to open the .pdf in Inkscape, set the "Precision of approximating gradient meshes:" to 129; of that way you'll have clean, net lines. Tell me your results.

No no no, not yet... LaTeX tables will take a very long time to get anything close to mastery. BUT, I will mark down all these SVG instructions and test them next time I do.

Probably even better to just export directly to SVG instead of PDF middleman. But when I do figure out those methods, I will be sure to post a tutorial somewhere.

[roger64]

Originally Posted by RbnJrg

Attachment 132653

The curious thing is that the 5 minutes I worked with the .pdf file because THIS IS THE KEY to have good results with Inkscape. As better the .pdf, better the svg table.

Hi Rubén

A very nice solution again. I will try it!
The idea to use a PDF is quite good.

We have to take into account that there is a "page" limit however.

[roger64]

Originally Posted by Tex2002ans

Ahh, I could have sworn I read roger64 saying something about tracing a table in an earlier post... maybe I was just going delusional, and it was past my bed time!

Indeed, but I was just tossing out one bad idea after another. I never found the PDF idea!