Files used

Right-click, save ...

• text.shtml
• text.svg

Technical Details

Simple Text

The container element for text is <text>, with starting coordinates and styles assigned.

<text class="seri" x="140" y="30">County</text>
The style seri refers to "serif" fonts specified in the CSS-section of the SVG-file.

Font types

Fonts need not be installed on the users local system. Those may be defined within the file header as <glyphs> or can be linked as external style ressource within the CSS section:

@font-face{font-family:'Helvetica';src:url(helvetica.cef)}
Here helvetica.cef is an external file. It is a a font in an Adobe specific internet font format readable by Adobe viewers.

But fonts can also be embedded as BASE64 code into the CSS section of the SVG file. You can see this in an animation example. The code looks like here below, you need an BASE64-encoder to generate this code. After the end the BASE64 section is closed and the CSS may continue.

<style type="text/css">
    <![CDATA[
@font-face{font-family:'NewsGothicBT-Roman';src:url("data:;base64,\
T1RUTwADACAAAQAQQ0ZGIAJHHPgAAAA8AAAKf0dQT1OmdMIgAAALUAAAAeBjbWFwA00AsgAACrwA\
AACUAQAEAgABAQETTmV3c0dvdGhpY0JULVJvbWFuAAEBATf4GwwA+BkE++r8dxwJwxwHrgUeoABI\
...
Kf6CFbDIp8+c2Aic2JPg6hrsguV43B543G/RZsRmxF23VKsIqlRLm0QbO0d5ZlMfU2ZdWmhOalBy\
R3s8CHo8gzk0GiuUNJw+Hpw+p0awT69QuF7Caghqwsx61xvSzJysxB/ErLq6r8cIDhwF/hQcBY4V\
AAAAAAEAAAADAAAADAAEACgAAAAGAAQAAQACAEUAT///AAAAQwBP////vv+1AAEAAAAAAAA=")}
	]]>
...
</style>

Character Rotation

Different object transformations can be applied to the text object, in our case a rotation:

<text x="32" y="66" transform="rotate(20)">Strasse</text>

Text spanning more than one row and sub-groups

The text-element can be arranged in any number of sub-groups (tspan), with different formatting and position assigned.

<text x="140" y="73">more than one row:
  <tspan x="140" y="98">first row</tspan>
  <tspan x="140" y="123">second row</tspan>
</text>

The same with a lot of rows may sound complicated, but is easy combined with an export from graphics design software or with scripting. Within tspan tags the coordinates can be relative to the foregoing one. the dx and dy attributes apply then:

<text x="140" y="73">more than one row:
  <tspan x="140" dy="12">first row</tspan>
  <tspan x="140" dy="12">second row</tspan>
</text>

Colours

Changing tspan elements with different colours. Within the tspan-element the formatting of the font-family (sser) and the colour definition (yel) are combined:

<text class="sser">The colour <tspan class="yel">yellow</tspan>, bad!</text>

Character spacing and sub/superscription

Character spacing, as well as sub- and superscription or the rotation of a single character is specified on a by character basis, the following characters are rendered in the axis defined by the first character.

<text x="44" y="255" class="sser">
  A
  <tspan dy="-9">
    higher
  </tspan>
  <tspan rotate="10 35 50 65 80" dx="0 5 9 9 12">
    Word!
  </tspan>
</text>

This text is only once anchored with x and y. The word "higher" is superscripted with 9 units. The letters of "Word!" are progressively rotated and displaced horizontally.

Align text to objects

We have to identify an object by its unique id and reference it within the textPath element.

<path id="MyPath" d="M 30 330 s 50 -50 100 0 s 80 -50 110 0" ... />
The object needs not come before the text in the file, because it has a unique id.

<text class="sser blu" font-size="22">
A normal text-tag is opened.

  <textPath xlink:href="#MyPath" startOffset="10%" dy="-10">
The object (#MyPath) is referenced, the distance along and across the object determined.

    Ticino
  </textPath>
</text>

Rendering

In the example above are shown the four possible values of the text-rendering attribute and their results. As text may be a crucial element it is important to pay attention to its rendering on different scale levels.

Clipping

In a similar way works clipping. As the text operates as clip container it cannot be selected within the drawing.