SVG and Typography
April 7, 2004
Fabio Arciniegas A.
Editor's Note: SVG is back in style on XML. Fabio Arciniegas and Antoine Quint will
covering typography, video and mobile topics over the coming weeks.
Mixing the worlds of documents, programming, and visual design is a familiar experience
XML developers, especially when dealing with presentation technologies like SVG. Such
mixtures can produce exciting new representations of information. They can also become
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.
things have its power to make or break a visual work. The goal of this article is
key ideas about typography so that you can use it effectively, either by applying
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
combination of SVG and typography:
Foundations and Character Treatment
Position, Alignment, Direction, Colors, Fonts
Hyphens, Quotations, Spaces, Symbols, Ligatures, Non-Latin characters
Static Design Strategies implemented on SVG
Blur, Contour, Crowd, Contrast Weight, Gradation, Highlight, Path, Outline, Overlap,
Reverse, Shadow, Tilt
Dynamic Presentation Strategies implemented on SVG
Fade ins, Color
Tweening, Scrolling, Type Effect, Bounce, Animate through contour,Size Transitions,
Before we begin, please make sure you have the Adobe SVG plug in installed,
as most images from this point on are SVG.
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
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
y are lists of points, not necessarily single
values. Positioning, therefore, is not restricted to just one value for the beginning
text but can be specified independently for each glyph of the text, as illustrated
billboard of Listing 1:
<svg xmlns="http://www.w3.org/2000/svg" width="350"
<rect x="1" y="1" width="320"
<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