XML.com: XML From the Inside Out
oreilly.comSafari Bookshelf.Conferences.


SVG and Typography

SVG and Typography

April 07, 2004

Editor's Note: SVG is back in style on XML. Fabio Arciniegas and Antoine Quint will be covering typography, video and mobile topics over the coming weeks.

Mixing the worlds of documents, programming, and visual design is a familiar experience for XML developers, especially when dealing with presentation technologies like SVG. Such mixtures can produce exciting new representations of information. They can also become ugly messes if one fails to learn the relevant aesthetic and design principles.

Fig.1 Type can be essential for Charts, Diagrams, and GUIs, as well as for Artistic Works

One aspect that you want to get a good grasp on, if you work with SVG, is typography. Few things have its power to make or break a visual work. The goal of this article is to review key ideas about typography so that you can use it effectively, either by applying the rules in visual explanations and GUIs or by bending the rules in your artistic output (Fig.1.)

This article is divided in four parts, each corresponding to a particular area of the combination of SVG and typography:

Foundations and Character Treatment
Position, Alignment, Direction, Colors, Fonts
Character Treatment
Hyphens, Quotations, Spaces, Symbols, Ligatures, Non-Latin characters
Static Design Strategies implemented on SVG
Crop, Backward/Forward, Blur, Contour, Crowd, Contrast Weight, Gradation, Highlight, Path, Outline, Overlap, Repeat, Reverse, Shadow, Tilt
Dynamic Presentation Strategies implemented on SVG
Fade ins, Color Tweening, Scrolling, Type Effect, Bounce, Animate through contour,Size Transitions, Menus, Montage.

Before we begin, please make sure you have the Adobe SVG plug in installed, as most images from this point on are SVG.


Using the text element, its attributes, and CSS styling one can position and format glyphs in SVG in the ways one has come to expect in desktop graphics. The following sections outline the basics and the particular features SVG offers for their treatment.

Positioning, Alignment, Direction

Positioning of text in SVG appears quite obvious: The two attributes x and y determine the position of the text:
<text x="44" y="62">Hello World</text>


That's only the beginning of the story. The first thing to point out is that the values accepted by x and y are lists of points, not necessarily single values. Positioning, therefore, is not restricted to just one value for the beginning of the text but can be specified independently for each glyph of the text, as illustrated in the billboard of Listing 1:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="350" 
     height="155" version="1.1"> 

   <rect x="1" y="1" width="320" 
         style="fill:#008683; stroke:black;"/>
		    <g style="font-family:Beachman Script; font-size: 36pt; fill:#D5E9D7"> 
      <text x="22 47" y="62 65">TheMerryWives</text> 
      <text x="150" y="100">ofWindsor</text> 

Listing 1 Positioning

Fig 2. Merrywives.svg

For the sake of a less monotonous appearance, in Listing 1 we have specified that the first glyph of the string "The Merry Wives" is positioned a little higher, at coordinates (22,62); after that, we have specified that the next glyph will be positioned at (47,65). The remaining glyphs, since they are not explicitly positioned, are automatically rendered sequentially according to the left-to-right default writing.

Alignment and Direction

As usual, knowing one more answer creates two more questions. What part of the glyph is exactly being positioned at (22,62)? what other options for direction, apart from left-to-right, are available?

The position specified by the coordinates refers to the alignment-point of the glyph (Figure 3). What the alignment point is depends both on the font you are using and some SVG parameters. When dealing with Latin characters, the alignment point is by default the intersection of the left-most point of the glyph and the baseline.

<?xml version="1.0"?>
  <svg xmlns="http://www.w3.org/2000/svg" width="220" height="220" 

  <rect x="1" y="20" width="220" 
  height="220" style="fill:black;"/>
  <text x="20" y="120" style="font-family:Arial; 
  font-size: 42pt; fill:white;">TVC15</text>
  <line x1="20" x2="20" y1="0" y2="220" 
  <line x1="0" x2="220" y1="120" y2="120" 
  <circle cx="20" cy="120" r="2" style="fill:white"/>

Fig 3. AlignmentPoint.svg

Writing "left to right, with left anchoring, aligning to the baseline" (i.e. the default Latin way) is not the only option possible. The rendering of glyphs can altered by specifying the direction of writing, the anchoring, and the alignment baseline. These other three SVG features complete our basic picture of positioning, alignment, and direction; they are illustrated in the code and graphic below (Fig 4):

The "text-anchor" property is used to align a string start, middle, or end to the specified point. The reason for these names (as opposed to "horizontal left-, middle-, right-alignment") is that they must serve also for characters that are displayed top to bottom, in which case the start is the top and the end is the bottom. The possible values are start | middle | end | inherit.

The "writing-mode" property controls the initial direction of the text. It is controlled by three logical directions: left to right, right to left, or top to bottom. The actual possible values for this property are: lr-tb | rl-tb | tb-rl | lr | rl | tb . We will revisit this and other properties like glyph-orientation-horizontal in the light of internationalization in the next section.

Finally, the "alignment-baseline" property is used to determine the vertical alignment of the text with respect to its parent; for example, it can be used to align text by its middle points. The possible values are auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical. Since a thorough discussion of all the options is too long for this article, let me just point to the appropriate SVG specification section. The key point, however, is to know that you can escape the baseline as the vertical alignment for a text chunk. Another useful property for these purposes is baseline-shift; its possible values are baseline | sub | super | <percentage> | <length> | inherit.

Position, Direction, Anchoring

Let's look at some examples.

Fig 4. AlignmentPoint.svg
  • Baseline shifts are used often in scientific notations to denote super and subscript. Note the use of the tspan element. Like its HTML counterpart, span, this element temporarily overrides styling properties on the text. In this case we use it to write the superscripts (baseline-shift:super) without having to create a new text element, calculating by hand its position point.
  • Widget labels in GUIs are right aligned (anchor: end). This prevents their different lengths from translating into a visual mess.
  • Writing Latin characters from top to bottom (writing-mode:tb) is not unusual in tables and charts when horizontal space is scarce. Note that in the code for Fig. 4 (listing 2) we also use alignment-baseline:middle to center the horizontal labels on a very tight space.

The code for Figure 4 is included here, in listing 2:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="450" height="450">
  <line x1="30" y1="120" x2="30" y2="240"/>
  <text x="40" y="170" style="writing-mode:tb">March 
  <line x1="50" y1="120" x2="50" y2="240"/>
  <text x="60" y="170" style="writing-mode:tb">March 
  <line x1="70" y1="120" x2="70" y2="240"/>
  <text x="80" y="170" style="writing-mode:tb">March 
  <line x1="90" y1="120" x2="90" y2="240"/>
  <text x="100" y="170" style="writing-mode:tb">March 
  <line x1="110" y1="120" x2="110" y2="240"/>
  <line x1="20" y1="165" x2="170" y2="165"/>
  <text x="115" y="165" style="alignment-baseline:middle; 
  font-size:10">Defect 21 Fixed (Networking)</text>
  <line x1="20" y1="155" x2="170" y2="155"/>
  <text x="115" y="155" style="alignment-baseline:middle; 
  font-size:10">Defect 22 Fixed (COM)</text>
  <line x1="20" y1="145" x2="170" y2="145"/>
  <text x="115" y="145" style="alignment-baseline:middle; 
  font-size:10">Defect 23 Fixed (GUI) </text>
  <line x1="20" y1="135" x2="170" y2="135"/>
  <text x="115" y="135" style="alignment-baseline:middle; 
  font-size:10">Defect 24 Fixed (GUI) </text>
  <line x1="20" y1="125" x2="170" y2="125"/>
  <text x="115" y="125" style="alignment-baseline:middle; 
<circle cx="40" cy="160" r="2"/>
  <circle cx="80" cy="140" r="2"/>
  <circle cx="100" cy="150" r="2"/>
  <circle cx="100" cy="130" r="2"/>
  <text x="100" y="80" style="text-anchor:end; font-size:10">Name:</text>
  <text x="103" y="80" style="font-size:10;font-style: 
  italic">Jean Cocteau</text>
<text x="100" y="90" style="text-anchor:end; font-size:10">Email 
  <text x="103" y="90" style="font-size:10;font-style: 
  <text x="80" y="50" style="font-size:10">y=x<tspan 
  <tspan style="baseline-shift:super">42n</tspan></text>
Listing 2

Other aspects of position and direction, including bidirectionality, will be discussed in the internationalization section.

Fonts and Colors

It is no secret that by varying the colors and fonts in a GUI, a poster, or any other graphic you can dramatically affect the message it contains. Consider Figure 3. By changing the fonts and colors used, it can easily appear as an invitation for the Shakespeare play, a really cool name for a soccer league, or even the title of some questionable DVD.

The cultural implications of our font and color choices are only one aspect illustrated by this example. Another visible issue is readability. Both the fonts used and the contrast provided by the colors chosen will affect the readability of the text, making it even more important to understand the principles and common practices.

A Bit of Color Theory

Since there are whole books written about color theory, the goal here is not to go through it all, but to understand the basic terminology and the notion of color schemes, that is, the strategies to come up with good color combinations. Armed with that knowledge we can discuss some time-honored strategies for combinations of type and color and discover an infinite amount of color combinations in a sound way.

Ever since Newton first arranged colors in a circle in 1666, there has been discussion about the best way to arrange color wheels. Several kinds of color wheel exist, including those based on red, blue, and green, the additive primaries (i.e., visual wheels), and some based on red, blue, and yellow (mixing wheels).

For our purposes, the classic 12-hued wheel developed by Johannes Itten at the Bauhaus (left) seems appropriate. After all, although we are used to RGB codes, it is a bit more obvious to say "yellow and red produce orange" than to say "the difference between yellow and orange is the average of their green components".

The SVG graph below shows Itten's mixing wheel (click on "play animation" for some SVG family fun). The primary hues are red, yellow, and blue. The secondary hues are obtained by mixing two primaries; the result are violet, orange, and green. Finally, the tertiary hues are made by mixing a secondary and an adjacent primary.

Color Schemes

Using the wheel we can talk about strategies for picking colors or color schemes. For example, complimentary colors are located opposite to each other in the wheel, like orange and blue. Normally, it is not a good idea to use complimentary colors for digital type because of their diminished legibility; complimentary vibrant colors like red and green will compete for the eye and become tiresome over long texts.

Some other color schemes include:

Primary, Secondary, Tertiary. As color schemes, these names refer to any combination of their respective set of hues. For example, a secondary scheme is any combination of secondary hues, i.e. orange, violet, and green.
Monochromatic: A color scheme with various tones of a single hue. A tone is the result of mixing a hue with white or black. A color with added white is a tint, a color with added black is a shade
Analogous: Colors that are adjacent to each other on the color wheel.
Neutral: Combination of different tones of a single hue.
Split complementary: Combination of a hue and two hues adjacent to its complement.

Pages: 1, 2

Next Pagearrow