07-11-2013, 12:59 PM | #1 |
Wizard
Posts: 1,529
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
How good Sigil supports SVG images?
Hi friends;
I'm very confused; I want to use SVG images (text images) with fonts embedding. The following code, in theory, should work but Sigil doesn't show anything: Code:
<?xml version="1.0" standalone="yes"?> <svg width="400px" height="300px" version="1.1" xmlns= "http://www.w3.org/2000/svg"> <defs> <style type="text/css"> <![CDATA[ @font-face { font-family: Symbola; src: url("..Fonts/Symbola.ttf"); } ]]> </style> </defs> <text x="1" y="1" style="font-family: Symbola; font-weight:normal; font-style: normal; font-size: 1.2em; line-height: 2em"> Text using CSS @font-face </text> </svg> Please, someone can tell me what am I doing wrong? Many thanks in advance. Rubén |
07-11-2013, 02:12 PM | #2 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
If the SVG image works, you can insert it like any other image. However, it will be treated as an image then, not a SVG.
You might check the specifications with regards to SVG, a lot is not supported. |
Advert | |
|
07-16-2013, 12:38 PM | #3 |
Wizard
Posts: 2,297
Karma: 12126329
Join Date: Jul 2012
Device: Kobo Forma, Nook
|
It could potentially be a missing '/':
Code:
src: url("../Fonts/Symbola.ttf");
|
07-16-2013, 05:12 PM | #4 | |
Wizard
Posts: 1,529
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Many thanks for your answer. Yes, I wrote the url bad but in my image in Sigil was ok. Finally, after lots of "trials and errors", I could find out what was wrong: font-size must be in PIXELS. Theorically, "em" size is supported by text inside a svg wrapper BUT doesn't work in Sigil (maybe a Sigil bug, I don't know). Also, the "y" position of the text, must be equal to the text-size (so, if the text is -for example- of 40px, then "y" has to be y=40). The correct code after all these changes would be: Code:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50px" height="40px"> <defs> <style type="text/css"> <![CDATA[ @font-face { font-family: Symbola; src: url("../Fonts/Symbola.ttf"); } ]]> </style> </defs> <text x="1" y="40" style="font-family: Symbola; font-weight:normal; font-style: normal; font-size: 40px"> ☙ </text> </svg> Rubén |
|
07-17-2013, 01:17 AM | #5 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
I do remember that now you mention it. It is not just Sigil, but also ADE if I recall correctly.
|
Advert | |
|
07-17-2013, 02:16 PM | #6 |
Wizard
Posts: 2,297
Karma: 12126329
Join Date: Jul 2012
Device: Kobo Forma, Nook
|
Hmmm glad you could sort that out. SVG is DEFINITELY an area I need to look into and start experimenting with.
Mind putting up a sample SVG EPUB with working code? |
07-17-2013, 05:36 PM | #7 |
Wizard
Posts: 1,529
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Below you can see an epub with a SVG image used as a fleuron. Instead of embedding a full font file; I saved some glyphs as SVG images. Why do I use a SVG image instead of a .png image? A .png image of the same fleuron used in this epub is about the half in size regarding the SVG image but when you change the size of the book font, the quality of the svg image is perfect. One more word: the method I have employed in this epub doesn't work in ADE (in my Kindle works great). ADE doesn't support the pseudo-class "after"; so, if you want to use the svg image in ADE you should inserted by employing the <img> tag:
<p><img alt="Fleuron1" src="../Images/Fleuron1.svg"/></p> Of course, you can style the "container" <p> as you wish. Regards Rubén Last edited by RbnJrg; 07-17-2013 at 05:45 PM. |
07-18-2013, 03:08 AM | #8 |
frumious Bandersnatch
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
You should be aware that the CSS properties content, background, and background-size are not required by the ePub 2.0.1 spec. So even a perfectly compliant ePub reader (if it existed) would probably not support that method.
|
Thread Tools | Search this Thread |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
blank pages after SVG images in Kobo | jobalcaen | ePub | 3 | 05-19-2013 01:19 PM |
can I use SVG images in mobi? | sarah_pnix | Kindle Formats | 4 | 01-07-2013 04:21 PM |
Sigil and SVG image links | Rand Brittain | Sigil | 1 | 01-05-2013 05:39 PM |
How to center/fit page width SVG images with <OBJECT> | amoroso | ePub | 0 | 07-31-2010 11:48 AM |
E-book format that supports images? | scarab1 | Workshop | 11 | 03-05-2010 03:21 AM |