A Mini-tutorial on bitmap tracing.
Edited / updated 16 April 2014 to add information in steps 8, 9, 10, and a link in the P.S.
If you have a foreign-language text fragment but can't use an embedded font, or a beautiful fleuron you want to use as a section divider, or even a page of simple text that you want to keep on a single page, such as a title-page, bitmap-tracing might be the answer. This process is very useful if the only thing available is a graphic in raster format (bitmap, png, etc). For example, a screenshot, or a page from a pdf document, or a logo created in a graphics editor. It can be used for images other than text.
Tutorials about creating Scalable Vector Graphics (in a text editor!) can seem very complex, and Inkscape is mystifying for a new user like me. But this little procedure is easy as can be, and only needs a few mouse-clicks to accomplish.
You will need:
A graphics editor to tweak and crop your source image.
Irfanview (freeware
www.irfanview.com) is easy to use, and can automatically save screenshots in various formats. The
portable version is very handy.
Inkscape, a free and open source drawing program
http://www.inkscape.org/en/ , to create the bitmap tracing. Get the
portable version and you can run it from anywhere.
The procedure:
1.--Take a screenshot of the text at a high zoom level, and paste into your favorite graphics editor.
For best results, the image should be in bold dark color on a pale or white background, with good contrast and strong smooth lines. (Multi-color images may give spotty results, with pieces missing.) Smooth or sharpen the image if needed, clean up spots and specks, crop the image, and save to bmp. (Or, let Inkscape convert from your PDF, GIMP, Coreldraw file, any of the common formats such as png, jpeg, tga, tiff, and many more.)
2.--Open Inkscape. Choose menu FILE -> Open [or CTRL + O] to open the image file.
3.--Message offers to "embed" or "link" the file.
Select "embed", OK.
4.--Click on the image to select it.
(A number of arrows appear around the image)
4a.--If your image is not already in bitmap format:
choose menu EDIT -> Make a Bitmap Copy [or ALT + B].
4b.--The bitmap appears, stacked on top of the original image.
Select it and move it to the side; select the original underlying image,
press DEL key [or use menu EDIT -> Delete].
Move the bitmap back to the center of the screen.
(Portions outside the place-holder frame will not be included in the tracing.)
5.--With the bitmap image selected,
choose menu VIEW -> Display Mode -> Outline.
A red "X" will overlay the image.
6.--Choose menu PATH -> Trace Bitmap [or SHIFT + ALT + B].
7.--The Trace Bitmap dialog appears.
I have good results with default settings (which I don't understand yet anyway), so:
click OK in bottom corner. Close the dialog.
8.--The image now looks like this:
Click on the red "X" to select it, and delete it, leaving the tracing of your image.
(Undo CTRL + Z if you mis-click and delete the wrong layer.)
9.--In the "File" menu, select "Document Properties..." command and in the dialog that appears, select the option "Resize page to content..." This will auto-crop the image.
10.--Choose menu FILE -> Save As [or SHIFT + CTRL + S], and save your new svg file with desired filename. To prevent compatibility problems, be sure to save as "
Plain SVG" and not as "Inkscape SVG".
The result:
You can use this svg image in your epub much as you would any png, jpg, or gif image; and with a considerably smaller file-size. And no jaggies when it scales up and down! But remind yourself, although it *looks* like ordinary text on screen, it is an image, and will not "re-flow". Also note that not all reader devices/software support svg.
Side note: if you use default settings, Inkscape creates these tracings to display with a black fill. You can open the svg in a text editor, and change the fill color if you like.
Example code:
Code:
/* the css*/
/*The div must set centering, not the img class*/
.illustration {
padding: 0;
text-indent: 0;
text-align: center;
page-break-inside: avoid;
margin-top: 1.0em;
margin-bottom: 1.0em;
}
.svg4 {
height: 2em;
max-width: 100%;
}
/*the html*/
<hr/>
<div class="illustration">
<img alt="" class="svg4" id="h02" src="../Images/h02.svg"/>
</div>
<hr/>
That's all there is to it. I hope you find this useful.
P.S. -- Here is a link for a simple tutorial to convert actual TEXT to SVG.
http://commons.wikimedia.org/wiki/He...t_and_Inkscape