Help:Text and Inkscape

From Wikimedia Commons, the free media repository
Jump to: navigation, 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 click "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 Path > Object to Path, or press Shift + Ctrl + C. This converts your text object into "paths". If you don't do this, then people will only be able to see your SVG properly if they have that font installed, which rather defeats the purpose of making the SVG in the first place.

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 paths) or step 7 (plain SVG) above.

A comment to this Help Page:

  • The advice to save as "Plain SVG" is a (in my opinion) common misconception. It is correct in the sense that an SVG file should be saved in conformance to standards without any third-party extensions (which is what the option "Plain SVG") in Inkscape should do. However I found this option to often not work as expected (e.g. resulting file still not in conformance to SVG standard, loss of information, introduction of rendering errors etc.). By using Scour (the Python script behind the scenes of the "Optimized Inkscape SVG" export option) most of the issues can be solved while even optimizing the SVG for file size.
Two other two misconceptions I want to point out are converting objects to paths and un-grouping:
  • "Objects to path" should basically never be done. Geometric shapes should always stay objects when possible (better have an easy circle which still can be resized easily than a complex path representing this shape which can not be modified easily). Also for fonts theres mostly no good reason for it as it will make modifying of the text impossible. The only exception is when you need some fancy font or textpath which is not supported by LibRSVG).
  • Un-grouping will destroy any SVG structure that might have existed in the original SVG and will actually increase the resulting SVGs size in most cases. Therefore normally groups should be left untouched (Scour will take care of unnecessary groups) or tuned by hand (can be very tedious and there is no universal easy scheme that you can apply to every file).
(from my talk page) 23 March 2014 (UTC) sarang사랑

See also[edit]