[RbnJrg]

Originally Posted by Tex2002ans

Do you happen to have any good samples of SVG being used in EPUB?

For example, how would you go from an SVG of Red Apple (U+1F34E):

http://www.fileformat.info/info/unic.../red_apple.svg

to getting that SVG working/scaling in an EPUB?

I happened to plop that SVG into Sigil, and it is very large (see attached image and EPUB). All quick attempts at resizing using width/height seemed to have failed miserably.

Maybe a step-by-step tutorial on how to make sense of the SVG file, strip it down/add to it (if necessary), and get some actual usage out of it?

Or maybe a tutorial on how to use Inkscape to bash the SVG to your will?

OK, here is my tutorial.

1. Open Inkscape.

2. Select File/Open and in the dialog "Select file to open", in the field "Name:" write:

http://www.fileformat.info/info/unic.../red_apple.svg

(or the url of the file you wish or another .svg file). After that press the buttom "Open".

3. Do click with the mouse over the apple in the Inkscape page (you'll see a lot of arrows rounding the apple).


4. ATENTION - THIS IS THE KEY: Select the menu File/Document Properties... and select the option "Resize page to content..." and after that, press the buttom "Resize page to drawing or selection". Close the dialog.


5. Now select the menu File/Save as... and chose the name red_apple (or whatever you want) and the type "Plain SVG". That's all with Inkscape.

6. Open Sigil and start a new ePub.

7. On the Images folder, right click with the mouse, chose "Add Existing File..." and select the red_apple.svg file.

8. On the Styles folder, right click with the mouse and select "Add a Blank Stylesheet"

9. Write in that stylesheet the following:

p {
  font-size: 1em; /* this size must be linked with the height of the svg image */
  text-align: justify;
  text-indent: 1em;
  margin: 0;
}

.svg_img {
  display: inline;
  height: 1em; /* this must be equal to the font-size used to style "p" */
  width: auto;
}

10. In the .html file write (after linking it with the stylesheet) the following:

<p>This is a test with the <img class="svg_img" alt="red_apple" src="../Images/red_apple.svg" /> used as image inline</p>

That's all

Below you can test my ePub.

Regards
Rubén