Text to SVG-File Shell Script

In an earlier posting I wrote, that I wanted to have a simple way to convert a few lines of plain-old-basic text, into an SVG-Image-File. In that posting I had created a set of templates, which would do so from the command-line, but which nevertheless required that the user do some work.

I also explained that the font-family “Liberation” needed to be installed on the machine, in order for that exact variant of the templates to be valid. And of course, ‘Inkscape’ must also be installed.

Well under Linux, if we’re given such templates, we can next proceed to write a shell-script, which does all the work for us, of assembling the templates, and then of executing some jobs.

Therefore, the only logical conclusion now was, that I created a Shell-Script, which I can enter as a command with the base-name, as the parameter to the script (without any .svg or .png extension), and which will expect some text from the standard input – Initially no more than 6 lines of 25 characters – and which creates the SVG as well as the PNG -Files. This script now works as expected. One finishes entering text with <Ctrl>+D .

The previous article described the theoretical basis on which this script works, and now I’m sharing the script with my readers – who are using Linux.

(Update 03/16/2018, 13h35 : )

I’ve refined my script, so that it allows the user to specify, optionally, a different text-color, a larger image-size if needed, and an external text-file to use as input, in that order. Also, my code now preserves spaces in the input-text, and escape-codes certain dangerous characters, if fed in through an external text-file.




(Update 03/25/2018 : )

I’ve updated my script again. In general, it’s not good for any ‘program’ to have too many dependencies, and the previous version of this script depended on ‘tr’, ‘wc’, ‘sed’, and ‘gawk’, as well as on ‘Inkscape’. While this worked fine on my own computer, it doesn’t serve my potential readers well, who may not want to have all that installed, just to use my script. And so by now, I’ve removed the dependency on ‘gawk’, because what it did, ‘sed’ can do as well.



One method to convert Text to SVG-File.

The problem can exist, that we want to import text into an application, which nevertheless expects a graphics file, but that the application is strong enough to accept SVG-Files as an available graphics-file format.

In studying this problem, I came to a discovery which was new to me about what SVG-Files are. In fact, SVG is a markup-language similar to HTML or to XML, so that by default, SVG-Files are actually text-files ! This also means, that if our Web-authoring software offers to embed SVG, this is not done with an <embed> -tag, as if the file was to be treated as some sort of image, but rather, using an actual <svg> -tag.

The main difference in SVG-Files would seem to be, that they prepend an <xml> -tag, making the file a self-contained document.

What this also means, is that text can be converted into SVG-Files most-efficiently, using a text-editor, where we’d first set up a template, then copy that to a new file-name every time we need a working SVG-File, and then just edit the text…

The following is a type of template which has worked for me, in experiments I carried out:


<?xml version="1.0" encoding="UTF-8" standalone="no"?>

  Instructions for Windows users:
  This file will probably need to be renamed
  From: Template.svg.txt (where .txt was hidden)
  To:   Template.svg
  And then placed in a folder with other images.
  A console window would need to be navigated to
  the same directory...

  Linux Usage:
  cp Template.svg TextFile.svg
  edit text/*:TextFile.svg
  Windows Usage:
  copy Template.svg TextFile.svg (Hypothetical Name)
  Notepad TextFile.svg
  For either Linux or Windows,
  assuming Inkscape is installed and in the PATH:
  inkscape -z -e TextFile.svg.png TextFile.svg

  inkscape -z -T -l TextFile-G.svg TextFile.svg


<svg height="90" width="200">
    <text x="10" y="15" style="fill:black;"
        font-size="12" font-family="Liberation">Several lines:
      <tspan x="10" dy="15">Second line.</tspan>
      <tspan x="10" dy="15">Third line.</tspan>


One assumption made in creating this template was, that Inkscape is installed in such a way, as to recognize the stated font-family. This parameter can just be omitted, in which case Inkscape would use whatever its default font is. But, to state such information provides consistent, predictable results. In contrast, I needed to set the font-size. Inkscape could default to an unexpected font-size, which in turn would lead to garbled output, in the resulting PNG-File. And, the default font-size Inkscape uses, appears to be the one last-set when the GUI was used.

(Edit 03/15/2018 :

By now, this template only serves as a working basis, for a shell-script I have written, which allows me to create such text-images with a single command. I have posted the script to my blog. But, if readers are nevertheless interested in understanding the workings of SVG-Files, I’m always leaving my existing ruminations as written blow… )

Continue reading One method to convert Text to SVG-File.