main page - page initiale - hauptseite - página principal projects - projets - projekte - proyectos authors - auteurs - autoren - autores papers - exposés - berichte - papeles help - aide - hilfe - ayuda

carto:papers:svg:examples:basic:text

Example for use of text

To the left are some possibilities on how to place text with SVG, not forgetting that you can use text like any other object for clipping and masking. Related text objects, even if they have different font parameters, may be selected and copied to the clipboard with the mouse. That is also important for the built-in search function of the SVG-viewer (available with the context menu).

  • Font family, in the first row the words "City" and "County" are rendered with "serif" and "sans-serif" fonts. You may also link fonts over the web, what means that they need not be installed on the users local system or one can define it's own glyphs in svg format.
  • Rotation, already shown at the transformation section, but letters can also be rotated individually
  • Text spanning more than one row, is quite complicated with SVG1.0 because there is no mechanism for automatic line breaks. Each row must have its own starting-coordinates; therefore the exact position is guaranteed.
  • Colours can effortlessly be changed within one text object.
  • Character spacing can be changed even within one word, what can be useful f.e. for lettering streets within city-maps.
  • Character positioning is variable in every direction, even rotating single characters is possible.
  • Aligning text to objects, is probably one of the most important functions for cartographic design. The text gets assigned the object it should be align to; that way no additional path needs to be placed within the drawing. It can be shifted from the object it's aligned to.
  • Styles: Text is an object like any other, with stroke- and fill properties.
  • Rendering: The SVG specification proposes different rendering modi in order to control legibility.

Files used

Right-click, save ...

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.




Last modified: Tuesday, 10-Dec-2019 21:42:24 CET
© carto:net (andreas neumann & andré m. winter)
original URL for reference: https://old.carto.net/papers/svg/samples/text.shtml