How good Sigil supports SVG images?

[RbnJrg]

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:

<?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>

Above is the code for my svg image. I can't find any way, any method that works, to insert that image in a .html (.xhtml) file.

Please, someone can tell me what am I doing wrong?

Many thanks in advance.
Rubén

[Toxaris]

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.

[Tex2002ans]

It could potentially be a missing '/':

src: url("../Fonts/Symbola.ttf");

[RbnJrg]

Originally Posted by Tex2002ans

It could potentially be a missing '/':

src: url("../Fonts/Symbola.ttf");

Hi Tex;

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:

<?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>

Many thanks again for answering.
Rubén

[Toxaris]

I do remember that now you mention it. It is not just Sigil, but also ADE if I recall correctly.

[Tex2002ans]

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?

[RbnJrg]

Originally Posted by Tex2002ans

Mind putting up a sample SVG EPUB with working code?

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

[Jellby]

Originally Posted by RbnJrg

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";

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.