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 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 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).
    I removed this. --DaB. (talk) 14:50, 1 November 2015 (UTC)
  • 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사랑
@DaB.:@Sarang: I have tried Scour now but the code that comes out of it is not a valid WC3 code when you test it here. This is not good so to recommend it doesn't seem like a good idea. --Goran tek-en (talk) 19:17, 16 June 2017 (UTC)
Hi @Goran tek-en: unfortunately I am not experienced with Inkscape or Scour, and without an example of the file you mention I cannot see the problem. BTW: As with Jasenovac camps.svg when you add {{Inkscape}} you categorize into Created with Inkscape containing > 60.000 files - not very useful. When you add {{ValidSVG}} you categorize into Valid SVG containing > 24.000 files - not very useful. It is a bit more useful to categorize with {{Igen}} to one of the Valid SVG created with Inkscape:Topics as it is now. -- sarang사랑 19:54, 16 June 2017 (UTC)
@Sarang: Now I have created three test files so you can see the problem.
At this page Help:Inkscape#Tagging_Inkscape_files it tells you to tagg the files in the way I have done, to my understanding. But when I look at the category Created_with_Inkscape I see that I shouldn't do that, so thanks for informing me, I had no idea.
I will use {{Igen}} but I can't really see how I can get it into a specific topic or subtopic by using it. There is so much information on that page and my knowlege of using code is limited. But I will have to add a category for the topics although it would be easier to use a template. --Goran tek-en (talk) 17:21, 18 June 2017 (UTC)

See also[edit]