![]() |
#1 |
Obsessively Dedicated...
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,200
Karma: 34978132
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
|
[Tutorial] Convert TEXT to SVG IMAGE with Inkscape
A Mini-tutorial inspired by a Wikimedia article: http://commons.wikimedia.org/wiki/He...t_and_Inkscape
Usually, text is best represented as text, because it enables users to search, copy, and edit. Sometimes your ebook has text that needs special fonts, such as math equations, foreign language quotations, or even just a fancy display font. But maybe you can't embed that special font because the license won't allow it, or the reading device won't support it. A Scalable Vector Graphic is the next best thing to the font itself – the image can be scaled large or small with no loss of quality. Note that not all reader devices/software support SVG. YOU WILL NEED: -- Inkscape, a free and open source vector drawing program http://www.inkscape.org/en/ . Get the portable version and you can run it from anywhere. -- (optional) A text editor to display the text and font you are working with. -- ![]() TIP: You don't always have to install fonts you're working with if you only have a temporary requirement. Most programs, including Inkscape, can utilize fonts that are simply loaded into memory. Load fonts by opening them with the Windows Font Viewer (should be offered on right-click Open With...), or use a font manager with the ability to load them, such as Nexus Font: http://xiles.net/nexusfont/. THE PROCEDURE: 1.-- LAUNCH INKSCAPE, with a new document. Note on navigating the editing window: Mouse wheel scrolls up/down; SHIFT + Mouse wheel scrolls left/right; CTRL + mouse wheel zooms the window; SHIFT + Right-button-drag pans the window. 2.-- CREATE THE TEXT: -- On the left toolbar, click the large "A" icon, "Create and edit text objects" [or press F8]. -- Click in the editing window, and type or paste desired text. -- The text should be surrounded by a dotted marquee. (click to enlarge) 3.-- SELECT THE TEXT OBJECT: If the dotted selection marquee has disappeared after typing, editing, or other mouse activty: -- Choose menu EDIT -> Select All [or CTRL + A]; this should display the marquee. (click to enlarge) 4.-- FORMATTING: (This is a very brief overview of some of the possible formatting; see the Inkscape user's manual for more.) Remember, to apply formatting; the text must be selected (dotted selection marquee must be visible); use the "Select All" command as needed. Additionally, you can click and drag to highlight individual words or characters within the selection, and apply specific formatting to the highlighted bits only. 4a.-- SET THE FONT AND FONT-SIZE: -- Choose menu TEXT -> Text and font... ; or click the large "T" icon on the right-hand toolbar, or press SHIFT + CTRL + T. (click to enlarge) -- The dialog provides formatting options: -- Use the "Font" tab to choose the desired font name, style, size, alignment, line-height. -- Use the "Text" tab to edit the actual text (add or delete text, spaces, line feeds). -- Click "Apply" when ready. (It seems to be a long delay until the "apply" button becomes active; this may be computer-related.) (click to enlarge) 4b.-- (optional) Apply fill color: -- Default colors can be chosen from the pallet at the bottom of the window. -- To create a custom color: select menu OBJECT -> Fill and stroke, or Shift + Ctrl + F, or click the small "Fill:" field in bottom left corner; then use the Fill tab to create colors. Remember that some shades may be hard to read when they are converted on a grey-scale device. 5.-- (optional) Set the default display size: For simple text fragments in ebooks, this step should not be necessary, but is included here for informational purposes. -- With the dotted marquee displayed; at top of the left toolbar, click the "arrow" icon [or F1]. A number of arrow-handles surround the dotted marquee. (click to enlarge) -- To resize the text, hold down the "Ctrl" key and drag the handles to resize text as desired. The Ctrl key keeps aspect ratio intact and prevents distortion. -- To move the object, CTRL + click-and-drag inside the marquee. (click to enlarge) 6.-- RESIZE THE PAGE TO FIT: --Select menu FILE -> Document Properties... [or SHIFT + CTRL + D]. (click to enlarge) -- Click the button "Resize page to content..." The caption changes to "Resize page to drawing or selection". Click again to auto-crop the selected text object. (click to enlarge) 7.-- CONVERT TO PATH: Choose menu PATH -> Object to Path, [or SHIFT + CTRL + C]. This converts the text object into "paths": the text becomes an image. If you don't do this, readers will only be able to see the SVG properly if they have that font installed. (click to enlarge) 8.-- SAVE THE FILE: 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", not as "Inkscape SVG". THE RESULT: Now you have an SVG image replica of your special text, which can be scaled up and down nicely. Style the <height:> to size in ems, so it will resize in synch with surrounding text. Vertical alignment of inline images might not line up perfectly smoothly with surrounding text, but neither would any other image, and svg will give a better appearance overall. Try tweaking the "vertical-align:" styling for better results. The screenshot shows two fragments of Greek text, and a bit of blackletter. (click to enlarge) Example code: Spoiler:
================ Ok, all done. I hope you found this useful. ![]() Last edited by GrannyGrump; 11-02-2017 at 07:54 AM. |
![]() |
![]() |
![]() |
#2 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,582
Karma: 7043711
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Congratulations Granny! Very good and perfectly clear all explanations; nothing to add them
![]() Code:
.svgInline { vertical-align: -0.1%; height: 1.10em; } Code:
.svgInline { vertical-align: -5px; /* values also can be positives */ height: 1.10em; } Regards Rubén |
![]() |
![]() |
![]() |
#3 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 2,608
Karma: 3000161
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
|
![]() Wow! You've reached the top professional level! ![]() |
![]() |
![]() |
![]() |
#4 |
Obsessively Dedicated...
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,200
Karma: 34978132
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
|
Why, thank you, kind folks, for the compliments!
![]() @Ruben, funny, but I've used percentages with success to adjust alignment on superscripts, but it didn't want to work for me on this little test. I'll give that another try, maybe I wasn't aggressive enough. Would pixels work sizing with ems and the font size set very large or very tiny? I need to play with that a bit. Thanks for the tips! |
![]() |
![]() |
![]() |
#5 |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,160
Karma: 18843349
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
lol
That thread was only 10 years and 3 days old!! |
![]() |
![]() |
![]() |
#6 |
the rook, bossing Never.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 12,238
Karma: 89531599
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11
|
I assume a new poster with one post only and a URL is really some sort of spammer.
Also ANY online tool has privacy & safety issues compared with widely recognised local tools. The OP is about Inkscape, which is still a good package. |
![]() |
![]() |
![]() |
#7 |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 5,416
Karma: 99236514
Join Date: Apr 2011
Device: pb360
|
|
![]() |
![]() |
![]() |
#8 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,284
Karma: 6700678
Join Date: Sep 2021
Location: Australia
Device: Kobo Libra 2
|
Yea, probably a spammer promoting a paid service.
But I am glad this old thread was bumped. I just learnt something new from the OP!! No need to insert a font file just to display a non-standard symbol or two. |
![]() |
![]() |
![]() |
#9 |
Bibliophagist
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 38,911
Karma: 153006036
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos
|
I used this technique a couple of times to insert Enochian text in Terry Pratchett's books (it's the language used by the golems).
|
![]() |
![]() |
![]() |
#10 |
the rook, bossing Never.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 12,238
Karma: 89531599
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11
|
|
![]() |
![]() |
![]() |
#11 |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,160
Karma: 18843349
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
I just used this! I made a simple svg to look like a wax seal on a letter (like they used to do in the old days). It only took a couple minutes and it made that little section of the book 'pop'. Not at all required, but it was easy, a little bit of fun, and looks better than just a basic 'FJF' !
|
![]() |
![]() |
![]() |
#12 | |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,582
Karma: 7043711
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
https://www.mobileread.com/forums/sh...d.php?t=233131 This is specially useful if you want to use a svg divider or fleuron (or any other image). |
|
![]() |
![]() |
![]() |
#13 | |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,284
Karma: 6700678
Join Date: Sep 2021
Location: Australia
Device: Kobo Libra 2
|
Quote:
I just tried it on a snowflake image. (image below) Followed the steps and it worked perfectly. (resulting code in spoiler) Spoiler:
One thing I am not sure about... When using the svg image in an epub, how do you figure out the correct size. This image is very large, so how do I figure out sizing so it is the equivelant of 1em in the epub and matches the rest of the text sizing, and also how do you ensure it resizes if a user increases font size in their ereader? . |
|
![]() |
![]() |
![]() |
#14 | |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,582
Karma: 7043711
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Code:
.txtimg { display: inline; height: 1em; /* or the size of the sorrounding text */ } Code:
<p>Your text here <img class="txtimg" alt="" src="the path to your svg img"> more text</p> |
|
![]() |
![]() |
![]() |
Tags |
inkscape, svg, text conversion, text image, tutorial |
Thread Tools | Search this Thread |
|
![]() |
||||
Thread | Thread Starter | Forum | Replies | Last Post |
[Tutorial] Bitmap tracing -- Quick & Simple SVG Text Images with Inkscape | GrannyGrump | Workshop | 18 | 11-05-2015 04:01 PM |
Svg wrapper and image resizing | Nabodita | ePub | 24 | 05-02-2014 12:21 AM |
Inkscape SVG Validation Problems | doubleshuffle | ePub | 2 | 12-20-2013 12:37 AM |
Scaling up an image via SVG | Kayto | ePub | 27 | 01-26-2013 03:38 AM |
Image overlayed over text (but text visible if image disabled)? | Kaylee Skylyn | ePub | 5 | 08-01-2012 05:27 PM |