![]() |
#1 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 2,624
Karma: 3120635
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
|
Inserting a small floating svg
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. 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. 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> https://mega.co.nz/#!RUtHFAbZ!DbXMr4...86S0dqG6yKxRr4 Last edited by roger64; 12-16-2014 at 11:15 PM. Reason: link |
![]() |
![]() |
![]() |
#2 | |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 2,306
Karma: 13057279
Join Date: Jul 2012
Device: Kobo Forma, Nook
|
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: Quote:
Code:
.svg_img { display: inline; height: 5em; width: auto; float: right; } 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? Last edited by Tex2002ans; 12-17-2014 at 01:58 AM. |
|
![]() |
![]() |
Advert | |
|
![]() |
#3 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 2,624
Karma: 3120635
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
|
@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. ![]() Last edited by roger64; 12-17-2014 at 03:17 AM. Reason: self-contained |
![]() |
![]() |
![]() |
#4 | |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,755
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
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 |
|
![]() |
![]() |
![]() |
#5 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 2,624
Karma: 3120635
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
|
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! Last edited by roger64; 12-17-2014 at 09:17 AM. |
![]() |
![]() |
Advert | |
|
![]() |
#6 | ||||
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,755
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
![]() Quote:
Using SVG images.epub Quote:
![]() 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. Quote:
![]() ![]() Regards Rubén |
||||
![]() |
![]() |
![]() |
#7 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 2,624
Karma: 3120635
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
|
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... ![]() |
![]() |
![]() |
![]() |
#8 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 2,306
Karma: 13057279
Join Date: Jul 2012
Device: Kobo Forma, Nook
|
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 Last edited by Tex2002ans; 12-17-2014 at 07:52 PM. |
![]() |
![]() |
![]() |
#9 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 2,624
Karma: 3120635
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
|
@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. Last edited by roger64; 12-17-2014 at 09:01 PM. |
![]() |
![]() |
![]() |
#10 | |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,755
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
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 |
|
![]() |
![]() |
![]() |
#11 | |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 2,306
Karma: 13057279
Join Date: Jul 2012
Device: Kobo Forma, Nook
|
Quote:
![]() Maybe it was just something I was gathering from rereading those topics again too, and wrongly attributed it to this one. |
|
![]() |
![]() |
![]() |
#12 | |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,755
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
![]() 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 Last edited by RbnJrg; 12-18-2014 at 09:59 AM. |
|
![]() |
![]() |
![]() |
#13 | |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 2,306
Karma: 13057279
Join Date: Jul 2012
Device: Kobo Forma, Nook
|
Quote:
![]() 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. |
|
![]() |
![]() |
![]() |
#14 | |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 2,624
Karma: 3120635
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
|
Quote:
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. Last edited by roger64; 12-20-2014 at 10:45 PM. |
|
![]() |
![]() |
![]() |
#15 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 2,624
Karma: 3120635
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
|
|
![]() |
![]() |
![]() |
|
![]() |
||||
Thread | Thread Starter | Forum | Replies | Last Post |
Margins on Floating SVG | Rand Brittain | ePub | 12 | 01-04-2013 02:09 AM |
floating by! | euterpe | Introduce Yourself | 4 | 04-01-2012 05:37 PM |
'Floating' illustrations | lindsayw | Workshop | 10 | 08-31-2011 10:33 PM |