Help:Text and Inkscape

From Wikimedia Commons, the free media repository
Jump to navigation Jump to search
Inkscape's main workspace.

This is a tutorial on creating SVG representations of text using Inkscape, an open source vector graphics editor.

Usually, text is best represented as text, via a font that represents Unicode, because it enables readers and re-users to search, copy-and-paste, and edit the text easily. Sometimes you might want an image of text, though, if you want to ensure that a character is viewable even though a reader might not have the required fonts, or if you want to show off a particular font.

You will need:

  • Inkscape
  • an ability to view the text in a text editor on your computer (in other words... you will need the font already :))

1. Open up Inkscape and start a new document.

2. Click on the "text object" icon (like an "A") on the left hand menu - number 11 in the illustration - or hit "F8".

3. Paste in your text from your other text editor. Press the "arrow" icon (or "F1") to 'select' your text object. Choose the font and size you want by pressing Shift + Ctrl + T.

4. Hold down "Ctrl" and resize your text as required. (Control keeps the ratio intact, which stops the text from becoming distorted.) What you're really defining here is the "default display size", because the great thing about SVGs is of course is that they can scale without loss of quality.

5. Resize the page to fit to your object: go to File > Document Properties... (or Shift + Ctrl + D) and click on the button saying "fit page to selection".

6. While your text object is selected, go to Text -> Convert to Text. This converts your free-flow text object into normal text-objects. If you don't do this, then commons may display only black boxes were the text is.

7. File > Save As... - make sure you choose "plain SVG" from the drop-down list, not "Inkscape SVG"!

Once you've saved your file, if your browser supports SVGs (like recent versions of Firefox), you should be able to preview your file in it. If your browser shows other SVGs but not yours, you've probably missed either step 6 (converting to text) or step 7 (plain SVG) above.

See also[edit]