[Tutorial] Convert TEXT to SVG IMAGE with Inkscape

[GrannyGrump]

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:

/* the css*/
/*The div must set centering, not the img class*/

.svgDiv {
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
margin-top: 2.0em;
margin-bottom: 1.0em;
text-indent: 0;
text-align: center;
page-break-inside: avoid;
}
.svgBlock {
height: 2.25em;
max-width: 100%;
}
.svgInline {
vertical-align: bottom;
height: 1.10em;
}

/*the html*/

<p>‘Yet it is not the old imperious god of the fatal bow – <img alt="Erôs anikate machan" class="svgInline" src="../Images/greekA.svg"/> – not that – nor even the placid respectable <img alt="storge" class="svgInline" src="../Images/greekB.svg"/> – but something still unnamed, perhaps more mysterious, more divine! Only one must stoop to see it, old fellow, one must stoop!’</p>

<p>...........................</p>

<p>... and who shall dare to play Rhadamanthus, to appraise the record, and to decide how much of it is solid achievement, and how much the merest child’s play?</p>

<div class="svgDiv">
<img alt="The End" class="svgBlock" id="end00" src="../Images/end00.svg"/>
</div>

================

Ok, all done. I hope you found this useful.

[RbnJrg]

Congratulations Granny! Very good and perfectly clear all explanations; nothing to add them But in order to your issues to "vertical-align" images, you can get perfect results by setting "percentages" (positives or negatives) as a value for the property. For example:

.svgInline {
   vertical-align: -0.1%;
   height: 1.10em;
}

You also could try with "vertical-align: text-bottom" instead of "vertical-align: bottom" but in the case you presented practically is the same. Also could be a very good idea to use "pixels" as measurement:

.svgInline {
   vertical-align: -5px; /* values also can be positives */
   height: 1.10em;
}

But regarding the tutorial you made, just one word: perfect!

Regards
Rubén

[roger64]

Wow! You've reached the top professional level!

[GrannyGrump]

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!