Type and Back Again: Stealing SVG Designs

By Jonny Axelsson

One way to see how versatile a data format is to check how easy it is to take something existing and adapt it to your needs and desires.

We have published two independent articles, one about how to create an SVG darts game, showing how to construct graphics from basic ingredients, and another how to animate SVG, how to do animations. So I wanted to test how to combine these two in a way neither author had intended, and decided to take the custom-made font from the darts article to embellish the clock from the animation article.

Merging code

Moving the font description was straight-forward copy and paste, but actually positioning the numbers correctly around the disk, with proper font size, took a little trial and error. The two coordinate systems were slightly different, though both were circular with origin in the centre of the graphics, so when I got the scale right for one number all the numbers were correctly aligned. That the darts font was designed to be symmetric helped. The lower numbers, 4-8 were turned a half-circle to be easier to read, much like the lower numbers were turned in the darts game.

Since a clock only has 12 numbers as opposed to the 20 numbers on a dart board, each number was rotated 30 degrees instead of 18 degrees. The numbers were placed so as to be below the three hands, but above everything else.

I also removed presentational attributes that could be represented with a CSS class instead. Not only to reduce code size, but to make it easier to experiment and adapt the same content to new uses and presentations. Unfortunately the attributes that can be styled are very limited, at least in the current version of CSS. I would have loved to be able to style the transform attribute, that was the one needing the most fiddling. You can see the result above, or here.

While there are clocks numbered like this, most clocks use horizontal numbers all the way. In principle this meant that the rotation no longer was necessary, but in practice it was more convenient to move (translate) the number towards the rim, rotate it to the proper position, and then rotate the number back to horizontal. For instance "4" was coded text transform="rotate(120) translate(0,-80) rotate(-120)">4</text. Here you can see the upright clock.

Adding numbers to the clock dial isn't the only way the two could be combined. For the fun of it I made a darts clock where the darts board has been turned into a timely piece. Adding bounce-out functionality to the hands, just like with the wires, turned out to be a snap. Setting onmouseover="showScore(0)" was all that was needed. The only adaptation I did, apart from making the hands half again as large for visibility, was to add a copy of the bull's eye on top of the hands so as to make it possible to hit it without darts always bouncing out from the covering hands.

The right type

Twirling the wireframe font in a circle is just one possible use of this typeface. You could just as well make a digital clock as an analog one, or any other use of the defined digits, like a calculator display, or maybe a web hits counter if there are still anyone using those. This clock also show some simple font styling, using strokes and fills to create a slightly different impression than with the analog clock.

If the font is unavailable, or the browser (search engine, script, screen reader...) is unable to show SVG fonts, that is no disaster. The text will still be there, just rendered in another font (or processed the same way, or spoken the same way).

This makes SVG a potential replacement to headline replacement techniques. The typographical repertoire in HTML/CSS is limited. It works very well for body text, but in many cases something with a little more flair is wanted for the headlines or other special text. Today this is mostly done using GIF or JPEG images and, unless good alternative texts are added, this is horrible for accessibility. For instance, chances are that these headline images will display badly or not at all on the small screen of Opera Mini (especially if image slicing is used), and the often huge file size of these images make them slow and costly for other phone browsers.

To counter this problem, image replacement techniques that show images to the fancy browsers and text to the rest have been created. They improve the situation, but are still not doing very well. With SVG the text will be the image, so there is no image to replace. This will be faster and more flexible, and the often faulty assumptions of image replacement will not apply. Instead the principle of graceful degradation will be applied, providing the user with the best result he can get. That has fringe benefits. The creative headlines can often be extremely arty and very unreadable, and sometimes you might want to change the font to something you yourself is comfortable with, or you can copy/paste the headline together with the rest of the text.

SVG has fewer benefits for body text, leaving aside that only the sadistic or slightly deranged designers would want to create fancy body text in the first place. The reader might tolerate working a little harder to comprehend a handful words with big type at the beginning, but would be very frustrated with having to struggle with every single sentence on the page. Making a good font is hard, highly skilled, and pretty exhaustive work. SVG as a font description language is fairly good, but it has its limitations too.

Custom fonts are under discussion in a CSS context too. The missing capability for a designer to specify a font in a web page with any reliability is a major shortcoming with the Web. That is not to say that adding that capability hasn't got its critics too. Few are qualified to create good all-round readable fonts. Even fewer bother to create a font for the full gamut of Unicode characters. For instance for the digital clock the dartsdigits font missed the convenient ":" character, so I made it made with a couple circles.

More nefarious abuse of custom fonts is possible, like spamming. Google or your mail filter might read "avenue" from the Unicode values while you are seeing an offer of Viagra you can't refuse. In any case the argument is moot for the moment. It is not possible to mix HTML and SVG in the same document, as of yet.

SVG fonts are still interesting, though in the more limited context of SVG illustrations. The way SVG fonts work is the same way fonts work in any system. You have a number of characters, and with Unicode that means a big number of characters, and to each character you map a glyph, an image representing that character. Going back to abuse, the Latin A, the Cyrillic A, and the Greek Alpha are three different characters, but they use an indistinguishable glyph. Different typefaces (fonts) on the other hand use different glyphs for the same character.

Creating a font in SVG is easy, you create a number of glyph elements where you map an image to each Unicode character, or character sequence. Creating a good font on the other hand is an art as well as a craft.

Implementation notes

CSS is generally poorly supported by current SVG agents. For compatibility you would probably want to use the CSS-like attributes instead of using selectors (in this case class selectors) like I did. Thus instead of selecting for .digits or tspan, rather use the style attribute or even the specific attributes for each property. In other words use fill="maroon" for every digit instead of just .digits{fill: maroon} matching all of them.

This is the exact opposite advice to how to make good HTML style sheets, and for SVG to successfully be integrated with HTML, where handling CSS will be an absolute requirement. Worse the list of CSS properties supported in SVG is far too small to truly be useful for a designer.

CSS 2.1 on the other hand lacks the mechanism to refer to a created SVG font like dartdigits. CSS2 had a proposed mechanism, @font-face which was removed from CSS2.1 due to complete lack of support. The W3C CSS group works on a similar mechanism within the CSS3 work. Whether it will be the @font-face mechanism,

@font-face {
        font-family: "dartdigits";
        src: url("http://dev.opera.com/fonts/dartdigits.svg");
      }

or something else is less important, but it is necessary to be able to state fallbacks like font-family: "dartdigits", "Futura", fantasy;.

On a more mundane note, I had some similar problems to the author of Playing SVG Darts, the score wasn't always updated. I think setting showScore() on a circle inside a group should work, but in Opera it didn't. For efficiency Opera doesn't do a repaint unless it is necessary, but in this case it seems it is.

This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.