MobileRead Forums - View Single Post - svg image on top of a background png image

RbnJrg · 04-22-2015, 05:45 PM

Hi Roger and Jbacelar;

Sorry but I'm affraid the the embedded font, as is implemented, it won't work on a .svg file. In fact, in the essai.epub that Jbacelar attached the font doesn't work. In order that an embedded font works on a svg file, you must add -in the svg statements, the following definition:

Code:

    <defs>
       <style type="text/css">
         <![CDATA[
           @font-face {
              font-family: "Charis";
              src: url("../Fonts/Charis-SIL2.ttf");
           }
         ]]>
       </style>
    </defs>

You should have in your .css file the following:

Code:

@font-face {
    font-family: "Charis";
    src: url("../Fonts/Charis-SIL2.ttf");
}

body {
    font-family: "Charis"; /* this only is neccesary if you want the embbed font for all the text in your ebook; if you only want the embedded font in your .svg, then don't include this declaration */
}

and in your .xhtml file:

Spoiler:

As you can see, the text should be written by using the tags <tspan></tspan> and in the <text> tag must be defined the styles of the font (font-size; font-family; font-color; font-weight; etc., etc.). The positioning of the text must be defined with <tspan> but font-styles must be defined once, at the beginning, with the <text> tag.

I attach a new essai.epub so you can study the code better.

Regards.
Rubén

UPDATE: if you want to convert the .epub in .azw3 you should replace:

Code:

<text font-family="Charis" style="font-size: 24px">

with

Code:

<text font-family="Charis" font-size="24">

In fact, this last form works for both, .epub and .azw3 so should be preferable to use this sintax. And I think that is better to use a font-size of 22 instead of 24 (to me, it looks better).