Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > Workshop

Notices

Reply
 
Thread Tools Search this Thread
Old 02-06-2014, 05:17 AM   #1
GrannyGrump
Persnickity Nitpicker
GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.
 
GrannyGrump's Avatar
 
Posts: 570
Karma: 2673214
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
[Tutorial] Bitmap tracing -- Quick & Simple SVG Text Images with Inkscape

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

Last edited by GrannyGrump; 04-21-2014 at 01:49 AM. Reason: Title Revision
GrannyGrump is offline   Reply With Quote
Old 02-06-2014, 05:52 AM   #2
doubleshuffle
Deodorant User
doubleshuffle ought to be getting tired of karma fortunes by now.doubleshuffle ought to be getting tired of karma fortunes by now.doubleshuffle ought to be getting tired of karma fortunes by now.doubleshuffle ought to be getting tired of karma fortunes by now.doubleshuffle ought to be getting tired of karma fortunes by now.doubleshuffle ought to be getting tired of karma fortunes by now.doubleshuffle ought to be getting tired of karma fortunes by now.doubleshuffle ought to be getting tired of karma fortunes by now.doubleshuffle ought to be getting tired of karma fortunes by now.doubleshuffle ought to be getting tired of karma fortunes by now.doubleshuffle ought to be getting tired of karma fortunes by now.
 
doubleshuffle's Avatar
 
Posts: 2,478
Karma: 16642651
Join Date: Jan 2011
Location: Just about to enter Sprinkle City
Device: Aura HD
This is very nice. Thanks. Discovered this myself last autumn, but wasn't a good enough person to think of posting a tutorial...

The quality of the source has to be pretty good though. I fooled around quite a bit with fleurons and patterns in not-so-great resolution and found most of the results a bit disappointing.

You can also use Inkscape to draw your own decorations, btw.
doubleshuffle is online now   Reply With Quote
Old 02-06-2014, 08:15 AM   #3
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,309
Karma: 4898871
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
I sometimes use it draw maps, using the bitmap as a guide. Simple line maps tend to be "easy" to re-create with vector drawing tools.
Jellby is offline   Reply With Quote
Old 02-08-2014, 08:56 AM   #4
SBT
Fanatic
SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.
 
SBT's Avatar
 
Posts: 531
Karma: 594538
Join Date: Sep 2010
Location: Norway
Device: prs-t1, tablet, Nook Simple, assorted kindles
Here's an alternative to inkscape for command-line fanatics, using imagemagick and potrace:
Code:
convert <image> pnm:- |potrace -s -o <out>.svg
To trim empty space around image:
Code:
convert <image> -trim pnm:- |potrace -s -o <out>.svg
To shrink svg file size:
Code:
convert <image> -trim pnm:- |potrace -s -O 1 -u 1 -o <out>.svg
Further image size reduction can be achieved by using imagemagick to downscale the image. You can also use it to adjust the black/white cut-off with the -level option
SBT is offline   Reply With Quote
Old 03-10-2014, 11:40 AM   #5
RbnJrg
Evangelist
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 482
Karma: 318996
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Just now I saw this tutorial, still I can't explain how I overlooked. Great work Granny! Your tutorial is very complete and explains very well all the things. Just I'd like to add it two minor tips:

1. Before saving the svg image, it's better to select (in the "File" menu) the "Document Properties..." command and in the dialog that appears, to select the option "Resize page to content..." Of that way, the svg image will content only the object we want and not the blank space surrounding.

2. We need to save the svg image as "Plain SVG" and not as "Inkscape SVG". Of that way the svg image will be supported without troubles in Sigil, etc.

Good for you Granny, for taking the time to document how to use Inkscape to trace bitmap images.

Regards
Rubén
RbnJrg is offline   Reply With Quote
Old 03-10-2014, 12:02 PM   #6
mrmikel
Color me gone
mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.
 
Posts: 2,086
Karma: 1444487
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
Granny, I printed this page as a pdf for my computer, since it saves me hours of figuring it out for myself. Thanks!
mrmikel is offline   Reply With Quote
Old 03-12-2014, 12:44 AM   #7
GrannyGrump
Persnickity Nitpicker
GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.
 
GrannyGrump's Avatar
 
Posts: 570
Karma: 2673214
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
@RbnJrg -- thank you for your kind words. And thank you for the suggestions. I've always cropped my images tight, and didn't know about "size page to content". And specifying the file format is an excellent tip. I will update the tutorial soon as possible.

@mrmikel -- You are welcome, I hope you find it useful. Such a simple routine to accomplish a complex result!

Last edited by GrannyGrump; 03-12-2014 at 12:49 AM.
GrannyGrump is offline   Reply With Quote
Old 04-15-2014, 08:18 AM   #8
roger64
Wizard
roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.
 
Posts: 1,485
Karma: 846401
Join Date: Jan 2009
Device: KoboGlo
What a great tutorial. Indeed, it's a piece of cake. Thank you very much!!!

I showed it to one friend who told me he could not understand why we began making a bit-map copy. He told me, all images are either vectorial or bitmap. I suppose there is a good reason for this copy but I was unable to find it.
roger64 is offline   Reply With Quote
Old 04-16-2014, 01:33 AM   #9
GrannyGrump
Persnickity Nitpicker
GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.
 
GrannyGrump's Avatar
 
Posts: 570
Karma: 2673214
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
@roger64--Thank you for the compliment!

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.

If you have a decorative font you wish to use, for a titlepage for example, you could use that font to create the vector graphic in Inkscape.

I'm just beginning to learn all this stuff, but there is a simple tutorial available here: http://commons.wikimedia.org/wiki/He...t_and_Inkscape
GrannyGrump is offline   Reply With Quote
Old 04-16-2014, 04:16 AM   #10
roger64
Wizard
roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.
 
Posts: 1,485
Karma: 846401
Join Date: Jan 2009
Device: KoboGlo
@GrannyGrump

Thanks for your reply and for the link.
roger64 is offline   Reply With Quote
Reply

Tags
bitmap tracing, inkscape, svg images, text images, vector graphics

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Trying to write a simple tutorial Pablo ePub 100 10-31-2014 02:42 PM
[Tutorial] Convert TEXT to SVG IMAGE with Inkscape GrannyGrump Workshop 3 04-22-2014 06:38 AM
SVG Images on iPad - contained bitmap image not displaying heulwen.jones ePub 5 04-07-2014 01:42 AM
Inkscape SVG Validation Problems doubleshuffle ePub 2 12-20-2013 01:37 AM
Converting a bitmap to SVG Jellby Workshop 3 12-11-2011 06:13 PM


All times are GMT -4. The time now is 04:20 PM.


MobileRead.com is a privately owned, operated and funded community.