SVG text

ImageMagick is a wonderful non-interactive tool for processing raster images. With Inkscape, it can do fancy things with text in SVG files.

We can use SVG (Scalar Vector Graphics) files to write text on a path or to flow within areas. This uses features of SVG that ImageMagick can't currently process, so we need to use Inkscape as the SVG delegate.

We will use Inkscape to create curves and areas by hand, then IM convert will drive Inkscape to render the text, and IM will compose this over the raster image.

The processes described here use some unpublished programs of my own. Their functionality could be replicated fairly easily, using sed or similar.

Caution: Flowing text is defined in SVG 1.2, which is a draft standard. If and when the standard is aproved, the syntax may change, and Inkscape would also change, and this page may also need to change.

Installation

Install Inkscape from Inkscape.org. Edit delegates.xml, or create a personal delegates.xml. On Windows I have %USERPROFILE%\.magick\delegates.xml:

Text on paths

For the source image, I will use a crop from an image made in the Adding zing to photographs page. All operations will be performed on this large image, but the results will be shrunk for this web page.

ImageMagick could convert this to an SVG file, but it would create one vector circle for every pixel. This takes masses of space and processing time. Instead, we will embed the raster image within the SVG file.

Inkscape can render vector graphics over raster images, though it only writes 8 bits/channel. Instead, I use Inkscape to render text and ImageMagick to composite that over raster images.

Create an SVG file that links to the full-size raster image st_src.tiff. This can be done by starting Inkscape, importing the image (file, import, link not embed), and saving as an SVG which I will call st_limbs.svg. Close Inkscape. Open the SVG file in a text editor (eg Wordpad). Edit the SVG for the widths, heights and offsets.

Change x and y values to 0 (zero). Further up the file, change inkscape:window-width and inkscape:window-height to the raster dimensions, 4924 and 4155. Near the top, within the SVG tag, change width and height to the raster dimensions.

ASIDE: IM's rasterisation of SVG, via Inkscape, is broken in v6.0.0-0, so I temporarily used v6.8.9-5. This is now fixed. However, the formatted text facilities used here don't work when Inkscape is called from IM, so for these I need to call Inkscape directly.

This tests whether IM can run Inkscape, Inkscape can process the edited SVG file, and we get back what we put in.

The difference should be small, less than 0.01. Inkscape creates PNG files with 8 bits/channel/pixel, so we don't expect an exact match.

(After running Inkscape from the command line, I get the error message "RegistryTool: Could not set the value 'C:\ProgramFiles\Inkscape\inkscape.exe'". This doesn't seem to cause a problem.)

In Inkscape, read this SVG file, st_limbs.svg. View, Zoom to the page. Create a new layer (Layer, Add layer, name: "Paths", Above current). Create the desired paths ("Draw Bezier curves and straight lines"). If the lines are hard to see against the raster image, try changing the opacity of the image to about 40% (Object, Fill and stroke, Opacity). To help clarity, I set stroke width to 1mm, with a Start Marker of TriangleOutL. For each path, edit "object properties" to change the id to something meaningful and unique; use filenaming conventions, eg don't use spaces. Save the SVG file, eg as st_limbs2.svg.

Extract the curve paths. This could be done by hand, but my program RdXml does the job. The result, curves.s, can be included within the defs section of an SVG file. Then one or more curves can be used (with xlink) as required. We don't care about anything else in st_limbs2.svg.

For the left leg, we make st_curve1.svg by filling in the blanks from a template (aka "boilerplate") SVG file, svgCurveTemplate.txt.

The SVG contains all the paths in a <defs> tag, but only one path is used in the <text> tag. What does the SVG look like?

To check the result, we put this small version of the text over the small version of the image with paths:

Writing multiple text curves would be efficient by creating one SVG file with all the textPath entities. Here, we take the less efficient route: create multiple SVG files and convert each to a PNG, so we can composite the results. We already have the first SVG file, and the full-size PNG file made from it. We repeat the work for the other three curves.

Now we can composite each PNG over the original raster image. We also reduce the opacity of the text.

Aside: how do we find the best font size? We can overflow a path, use a large font size, and test whether we have written into the overflow area. To do this, we need to find an area on the image where the path cannot write, then extend the path to that area. This is easy manually: we choose an area top-left. To do this automatically, it may be easier to create a larger image and define the overflow in that extended area.

For example, we add an extra segment to the right leg path, double the font size, and we can see that text has been written to this area.

However, the SVG documentation doesn't seem to say how text should be written on a segmented path.

cGrep /icurves.s /ost_over.s /srightLeg /t"/"
chStrs /ist_over.s /M3 /f\q /t_
chStrs /ist_over.s /M1 /f\q /t" M0,1000 L1000,1000\q"
chStrs /ist_over.s /M3 /f_ /t\q

chStrs ^
  /i%PICTBAT%svgCurveTemplate.txt ^
  /ost_curve_over.svg ^
  /fcurves.s /tst_over.s

ExpAt /p0 /l1000000 /ist_curve_over.svg /ost_curve_over.svg
chBin /ist_curve_over.svg /f\s /t\r\n /s70

chStrs /ist_curve_over.svg /fCURVE_WW /t%WW%
chStrs /ist_curve_over.svg /fCURVE_HH /t%HH%
chStrs /ist_curve_over.svg /fCURVE_ID /trightLeg
chStrs ^
  /ist_curve_over.svg ^
  /ffont-size=\q100\q ^
  /tfont-size=\q200\q
chStrs ^
  /ist_curve_over.svg ^
  /fCURVE_TEXT ^
  /t"We go up, then we go down, then up again"

call %PICTBAT%svg2png st_curve_over.svg

%IMG7%magick ^
  st_curve_over.png ^
  %RESIZE% ^
  st_curve_over_sm.png

Here is st_over.s:

<path id="rightLeg"
d="M 2054.9628,4087.2823 C 2166.2061,3809.8752 2338.5872,3517.7177 2490.1669,3238.0846 C 2629.7571,2980.5697 2810.2358,2684.5169 2926.7029,2475.4376 C 3043.17,2266.3583 3259.2028,1851.4565 3259.2028,1851.4565 M0,1000 L1000,1000"
 />

Here is st_curve_over.svg:

<svg xmlns:svg="http://www.w3.org/2000/svg" version="1.2"
     xmlns:xlink="http://www.w3.org/1999/xlink"

  width="100%" height="100%" viewBox="0 0 4924 4155">
  <title>Template
for curved text</title>
  <defs>
<path id="rightLeg"
d="M 2054.9628,4087.2823
C 2166.2061,3809.8752 2338.5872,3517.7177 2490.1669,3238.0846 C 2629.7571,2980.5697
2810.2358,2684.5169 2926.7029,2475.4376 C 3043.17,2266.3583 3259.2028,1851.4565
3259.2028,1851.4565 M0,1000 L1000,1000"
 />
  </defs>
<text font-family="Verdana"
font-size="200" fill="blue" >
    <textPath xlink:href="#rightLeg"
>We go up, then we go down, then up again</textPath>

 </text>
</svg>

This could be scripted and automated, with a binary chop finding the largest font that doesn't overflow.

Text in areas

SVG text can be constrained to be within a defined area. We could define the area using the method above, with Inkscape. Instead, we will use Gimp and potrace.

Read the source image in Gimp. Create a new transparent layer for each object: the left leg, the right arm, and so on. Name each layer suitably (with no spaces in the names). Define the area by drawing around it with a black pencil, and fill the inside with black. (A pen would create anti-aliasing so it won't fill properly.) The black area will define the limits for the text, so we don't need to trace each object exactly; we ensure the black area is slightly inside the boundary of its object. Save the file, eg as st_limbs.xcf.

This creates a png from each layer (with a black area on transparent background), and a CSV (Comma-Separated Values) text file st_limbs_layers.lis:

For each of the extracted images, apart from the base: trace the outline with potrace, which needs PNM input; create an SVG from a template svgAreaTemplate.txt; render text within the path into a PNG.

%PICTBAT%pandp.txt contains a short extract from Pride and Prejudice by Jane Austen.

Rotating text in areas

If we want to rotate the text in an area, we first rotate the area, and render the text within the rotated area as above. Then rotate the text back. Rotating the text back could be done with SVG transform (see SVG1.1 Transform), but I do it here with IM.

We use the right leg as an example. What angle (in degrees) do we need to rotate it by?

This could be given a displacement before the tracing, to make the top (or middle or bottom) a straight line. See Clut Cookbook: Cluts from graphics. The text could be rendered on this displaced area, then given the opposite displacement so the text would run parallel to the line in question, instead of in a straight line.

Template files

svgCurveTemplate.txt

svgAreaTemplate.txt

This has text-anchor="end" because I like this image with right-justification.

Scripts

For convenience, .bat scripts are also available in a single zip file. See Zipped BAT files.

svg2png.bat

getPnmPath.bat

rotMinWidth.bat

All images on this page were created by the commands shown, using:

%IMG7%magick -version
echo.
inkscape --version
echo.
%GIMPCONS% --version
echo.
%POTRACEDIR%potrace --version

Version: ImageMagick 7.1.0-49 Q16-HDRI x64 7a3f3f1:20220924 https://imagemagick.org
Copyright: (C) 1999 ImageMagick Studio LLC
License: https://imagemagick.org/script/license.php
Features: Cipher DPC HDRI OpenCL 
Delegates (built-in): bzlib cairo freetype gslib heic jng jp2 jpeg jxl lcms lqr lzma openexr pangocairo png ps raqm raw rsvg tiff webp xml zip zlib
Compiler: Visual Studio 2022 (193331630)

Inkscape 1.0 (4035a4fb49, 2020-05-01)

GNU Image Manipulation Program version 2.10.24

potrace 1.11. Copyright (C) 2001-2013 Peter Selinger.
Library version: potracelib 1.11
Default unit: inches
Default page size: letter

Source file for this web page is svgtext.h1. To re-create this web page, execute "procH1 svgtext".

This page, including the images, is my copyright. Anyone is permitted to use or adapt any of the code, scripts or images for any purpose, including commercial use.

Anyone is permitted to re-publish this page, but only for non-commercial use.

Anyone is permitted to link to this page, including for commercial use.