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, 04:17 AM   #1
GrannyGrump
Obsessively Dedicated...
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: 939
Karma: 6702240
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 12:49 AM. Reason: Title Revision
GrannyGrump is offline   Reply With Quote
Old 02-06-2014, 04:52 AM   #2
doubleshuffle
Sy. Freudhold Riesenharf
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: 7,592
Karma: 61077015
Join Date: Jan 2011
Location: Planet of the Pudding Brains
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, 07: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,971
Karma: 8443021
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, 07: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: 580
Karma: 810182
Join Date: Sep 2010
Location: Norway
Device: prs-t1, tablet, Nook Simple, assorted kindles, iPad
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, 10:40 AM   #5
RbnJrg
Guru
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: 733
Karma: 2622517
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, 11:02 AM   #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: 1445295
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-11-2014, 11:44 PM   #7
GrannyGrump
Obsessively Dedicated...
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: 939
Karma: 6702240
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-11-2014 at 11:49 PM.
GrannyGrump is offline   Reply With Quote
Old 04-15-2014, 07: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,933
Karma: 2107371
Join Date: Jan 2009
Device: Kobo Glo - Kindle PW3 (wifi)
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, 12:33 AM   #9
GrannyGrump
Obsessively Dedicated...
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: 939
Karma: 6702240
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, 03: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,933
Karma: 2107371
Join Date: Jan 2009
Device: Kobo Glo - Kindle PW3 (wifi)
@GrannyGrump

Thanks for your reply and for the link.
roger64 is offline   Reply With Quote
Old 10-22-2015, 08:54 PM   #11
grumbles
Groupie
grumbles ought to be getting tired of karma fortunes by now.grumbles ought to be getting tired of karma fortunes by now.grumbles ought to be getting tired of karma fortunes by now.grumbles ought to be getting tired of karma fortunes by now.grumbles ought to be getting tired of karma fortunes by now.grumbles ought to be getting tired of karma fortunes by now.grumbles ought to be getting tired of karma fortunes by now.grumbles ought to be getting tired of karma fortunes by now.grumbles ought to be getting tired of karma fortunes by now.grumbles ought to be getting tired of karma fortunes by now.grumbles ought to be getting tired of karma fortunes by now.
 
grumbles's Avatar
 
Posts: 196
Karma: 1426954
Join Date: Nov 2009
Location: Toronto
Device: prs-650, Pandigital Novel (Black),ASUS xformer, T-1, 2 and 3, Nexus 7
I just noticed this thread. You don't have to edit the svg to change the fill (or stroke) colour. You can do it directly in inkscape. Select the drawing and click on the colour swatches at the bottom. Click sets the fill, shift-click sets the stroke.
grumbles is offline   Reply With Quote
Old 10-22-2015, 10:35 PM   #12
Turtle91
Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 1,177
Karma: 10964294
Join Date: Dec 2012
Location: Altus, Oklahoma today
Device: iPhone 6/5/iPad 1,2 & Air/Surface Pro/Kindle PW



Maybe you just noticed it because it was written 1.5 years ago??
Turtle91 is offline   Reply With Quote
Old 10-27-2015, 11:53 PM   #13
dgatwood
Curmudgeon
dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.
 
dgatwood's Avatar
 
Posts: 605
Karma: 1623024
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
Another helpful tip: If you happen to have a PDF version of the image, Inkscape can convert it to SVG with a single simple command-line call. On OS X:

Code:
/Applications/Inkscape.app/Contents/Resources/script --without-gui foo.pdf --export-plain-svg=foo.svg
The command is slightly different on other platforms, I think.
dgatwood is offline   Reply With Quote
Old 10-28-2015, 12:25 PM   #14
DaleDe
Grand Sorcerer
DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.
 
DaleDe's Avatar
 
Posts: 10,424
Karma: 9776064
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2
Quote:
Originally Posted by dgatwood View Post
Another helpful tip: If you happen to have a PDF version of the image, Inkscape can convert it to SVG with a single simple command-line call. On OS X:

Code:
/Applications/Inkscape.app/Contents/Resources/script --without-gui foo.pdf --export-plain-svg=foo.svg
The command is slightly different on other platforms, I think.
I believe this feature depends on what kind of images you have. It can import raster images but will not convert them to vector SVG images. Inkscape can only export PNG images. PDF can have either vector or raster images inside it as can SVG.
DaleDe is offline   Reply With Quote
Old 10-30-2015, 02:48 AM   #15
dgatwood
Curmudgeon
dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.
 
dgatwood's Avatar
 
Posts: 605
Karma: 1623024
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
Quote:
Originally Posted by DaleDe View Post
I believe this feature depends on what kind of images you have. It can import raster images but will not convert them to vector SVG images. Inkscape can only export PNG images. PDF can have either vector or raster images inside it as can SVG.
Just to clarify, by PDF, I meant a PDF containing actual vector data and/or text, not a PDF that's just an empty wrapper around a bitmap.

With that said, I would expect it to incorporate raster image data in the source PDF as a PNG image in the SVG—not that there's any benefit to doing so over incorporating the original raster image, of course.
dgatwood 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 01:42 PM
[Tutorial] Convert TEXT to SVG IMAGE with Inkscape GrannyGrump Workshop 3 04-22-2014 05:38 AM
SVG Images on iPad - contained bitmap image not displaying heulwen.jones ePub 5 04-07-2014 12:42 AM
Inkscape SVG Validation Problems doubleshuffle ePub 2 12-20-2013 12:37 AM
Converting a bitmap to SVG Jellby Workshop 3 12-11-2011 05:13 PM


All times are GMT -4. The time now is 11:05 AM.


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