SVG and Typography: Bells and Whistles
by Fabio Arciniegas A. | Pages: 1, 2, 3

Spacing

In the first part of this article we saw the CSS property letter-spacing, which when taken as as design devise yields interesting results. Use this tool with care as it's (over)use as a sign of elegance may be getting old.

Figure 9. Spacing

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

<text x="20" y="85" style="letter-spacing:30">huey lewis</text>
</g>

</svg>

Listing 9 Spacing.svg

Skew

The primitive transformation of skew allows you to obtain this classic effect. Although most applications of the effect you see in designs are skewed horizontally (on the x-axis), SVG provides also, like most other design tools, skewing on the y-axis.

Figure 10. Skew

<?xml version="1.0" standalone="yes"?>
<svg width="200px" height="300px" version="1.1" >
 <g transform="skewX(-25)">
   <g fill="black" stroke="gray" stroke-width="1" >
     <text x="20" y="40" font-size="19" font-family="Arial">
      Fast Moving Company
     </text>
   </g>
 </g>
 <g transform="skewY(40)">
   <g fill="blue">
     <text x="20" y="60" font-size="19" font-family="Arial">
      Down the Drain
    </text>
  </g>
 </g>
</svg>

Listing 10. Skew.svg

Paths

Another common static typographic treatment is to put text on a particular path. For this we need only to define the path within our defs and include the textPath subelement inside the text we want to adhere to it.

Figure 11. Path

<?xml version="1.0" standalone="yes"?>
<svg width="200px" height="300px" version="1.1" 
     xmlns:xlink="http://www.w3.org/1999/xlink"	>
 <defs>
    <path id="rev"
      d="M18.6047 104.651 C53.1235 72.4336 83.6448 87.6563 
	 123.256 69.7674 C141.966 61.3178 155.274 43.3081
	 174.419 36.0465 C209.014 22.9243 200.4 49.8433
	 211.628 -3.48837" />
 </defs>
   <g fill="green" stroke="gray" stroke-width="1" >
     <text x="80" y="40" style="font-size:19; font-family:Arial; fill=green; 
                  stroke:black; stroke-width=1; 
                  text-anchor:right">
       <textPath xlink:href="#rev">
	Our Year Revenue
       </textPath>
     </text>
   </g>
</svg>

Listing 11. Path.svg

Note that, as with any other effect we've discussed, we can still use the orientation, alignment, and other CSS properties we discussed in the two previous sections of this article.

Blend Modes

We finish our cookbook of typographic treatments with a subtle set of tools that are essential for modern design work: blend modes. As you probably know from Photoshop experience, blending layers of text into other images can make the difference between a cohesive and tasteful interplay of content versus the awkward look of text "pasted" on top of images.

Figure 12. Blending Modes

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="150" height="300" version="1.1">
  <defs>
    <filter id="Multiply">
      <feBlend mode="multiply" in="SourceGraphic" 
	       in2="BackgroundImage" />
    </filter>
  </defs>

   <!-- without multiply -->
  <g font-family="arial" font-size="10">
    <image x="0" y="0" width="150px" height="112px" 
                       xlink:href="withchuck.jpg" /> 
    <text x="75" y="10" style="fill:white; 
    text-anchor:middle">
               © 2003 Fabio Arciniegas</text>
  </g>

  <!-- with multiply -->
  <g>
    <image x="0" y="112" width="150px" 
       height="112px" xlink:href="withchuck.jpg" /> 
    <g font-family="Verdana" font-size="10" fill="white"
       fill-opacity=".6" >
       <text x="10" y="122" filter="url(#Multiply)">
	© 2003 Fabio Arciniegas</text>
    </g>
  </g>
</svg>

Listing 12. blend.svg

As shown in Listing 12, the syntax for defining and using blending modes is simple: define a filter using the primitive feBlend and specify in the mode attribute the desired value. The real question, then, is which modes are available. The answer is five: normal, multiply, screen, darken, and lighten (normal being the default). You can find their mathematical description on the SVG Specification, but most likely you will want to experiment with them directly so Listing 13 below provides definitions for each that you can use in your documents.

<defs>
    <filter id="Normal">
      <feBlend mode="normal" in2="BackgroundImage" in="SourceGraphic" />
    </filter>
    <filter id="Multiply">
      <feBlend mode="multiply" in2="BackgroundImage" in="SourceGraphic" />
    </filter>
    <filter id="Screen">
      <feBlend mode="screen" in2="BackgroundImage" in="SourceGraphic" />
    </filter>
    <filter id="Darken">
      <feBlend mode="darken" in2="BackgroundImage" in="SourceGraphic" />
    </filter>
    <filter id="Lighten">
      <feBlend mode="lighten" in2="BackgroundImage" in="SourceGraphic" />
    </filter>
  </defs>

Figure 13. Filter Definitions for blending modes

This concludes our cookbook of static typographic treatments, and the third part of our exploration of SVG and type. Please stay tuned for the fourth and concluding installment, where we explore animation of type in the context of SVG.

---

---

2. Thanks
   2004-06-06 14:03:19 Chad