|
|
Thread Tools | Search this Thread |
02-06-2014, 04:17 AM | #1 |
Obsessively Dedicated...
Posts: 3,200
Karma: 34977896
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/> 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; 06-21-2018 at 04:49 AM. Reason: Title Revision |
02-06-2014, 04:52 AM | #2 |
Unicycle Daredevil
Posts: 13,926
Karma: 185041098
Join Date: Jan 2011
Location: Planet of the Pudding Brains
Device: Aura HD (R.I.P. After six years the USB socket died.) tolino shine 3
|
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. |
Advert | |
|
02-06-2014, 07:15 AM | #3 |
frumious Bandersnatch
Posts: 7,516
Karma: 19000001
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.
|
02-08-2014, 07:56 AM | #4 |
Fanatic
Posts: 580
Karma: 810184
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 Code:
convert <image> -trim pnm:- |potrace -s -o <out>.svg Code:
convert <image> -trim pnm:- |potrace -s -O 1 -u 1 -o <out>.svg |
03-10-2014, 10:40 AM | #5 |
Wizard
Posts: 1,563
Karma: 7043711
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 |
Advert | |
|
03-10-2014, 11:02 AM | #6 |
Color me gone
Posts: 2,089
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!
|
03-11-2014, 11:44 PM | #7 |
Obsessively Dedicated...
Posts: 3,200
Karma: 34977896
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. |
04-15-2014, 07:18 AM | #8 |
Wizard
Posts: 2,608
Karma: 3000161
Join Date: Jan 2009
Device: 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. |
04-16-2014, 12:33 AM | #9 |
Obsessively Dedicated...
Posts: 3,200
Karma: 34977896
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 |
04-16-2014, 03:16 AM | #10 |
Wizard
Posts: 2,608
Karma: 3000161
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
|
@GrannyGrump
Thanks for your reply and for the link. |
10-22-2015, 08:54 PM | #11 |
Addict
Posts: 238
Karma: 1500000
Join Date: Nov 2009
Location: Toronto
Device: Pandigital Novel (Black), T-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.
|
10-22-2015, 10:35 PM | #12 |
A Hairy Wizard
Posts: 3,117
Karma: 18727091
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Maybe you just noticed it because it was written 1.5 years ago?? |
10-27-2015, 11:53 PM | #13 |
Curmudgeon
Posts: 629
Karma: 1623086
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 |
10-28-2015, 12:25 PM | #14 | |
Grand Sorcerer
Posts: 11,470
Karma: 13095790
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7
|
Quote:
|
|
10-30-2015, 02:48 AM | #15 | |
Curmudgeon
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
|
Quote:
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. |
|
Tags |
bitmap tracing, inkscape, svg images, text images, vector graphics |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
[Tutorial] Convert TEXT to SVG IMAGE with Inkscape | GrannyGrump | Workshop | 13 | 04-29-2024 07:17 AM |
Trying to write a simple tutorial | Pablo | ePub | 100 | 10-31-2014 01:42 PM |
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 |