WebReference.com - Scalable Vector Graphics: The Art is in the Code (8/8)

[previous]

SVG: The Art is in the Code

Text

In SVG text is held as character data. All text is contained with the <text> tag, but can be further nested by using the <tspan> element. Text is positioned on the screen by using the x and y attributes as is demonstrated here:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
   "https://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%">
   <text x="98px" y="112px" 
      style="fill:rgb(0,0,0); font-size:20;
             font-family:Arial">Visit DHTML Nirvana</text>
</svg>

View example 23 in a new window.

But it should be noted that text in SVG isn't positioned exactly the same way as a basic shape would be. Text is positioned from the bottom left on an invisible rectangle, whereas shapes are positioned from the top left. So bear that distinction in mind when placing text.

Placement of text is one those features in SVG that could use some work because text is placed within an invisible rectangle and all text within that rectangle will be formatted as a single line, rather than wrapping within the browser. Basically, it means that to create two lines or more of text, separate text elements need to be created for each line.

We can also control the appearance of the text through its style properties as demonstrated in the above example. The fill property is used to define what color the text will take on. The font-size denotes the size of the font and the font family allows for the definition of what font family will be used, in this instance Arial. The text style properties of SVG are equivalent to the style properties for CSS2 including the font-style property and the font-stretch property. Developers have plenty of options when choosing to format their text.

Text can also be filled with gradients and patterns. The following example uses a gradient fill to demonstrate this concept:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
   "https://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%">
   <defs>
      <linearGradient id="violet-orange" x1="0%" y1="0%" x2="100%" y2="0%"
         spreadMethod="pad" gradientUnits="objectBoundingBox">
         <stop offset="0%" style="stop-color:rgb(216,192,216);stop-opacity:1"/>
         <stop offset="100%" style="stop-color:rgb(175,23,87);stop-opacity:1"/>
      </linearGradient>
   </defs>
   <rect x="49" y="29" width="224" height="41"
      style="fill:rgb(0,0,0);stroke:none;stroke-width:1"/>
   <text x="70px" y="56px" 
      style="fill:url(#violet-orange); font-size:20;
             font-family:Arial">Visit DHTML Nirvana</text>
</svg>

View example 24 in a new window.

In addition, filter effects can also be used on text as shown here:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
   "https://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%">
   <defs>
      <filter id="Drop_Shadow" filterUnits="objectBoundingBox" 
         x="-10%" y="-10%" width="150%" height="150%">
         <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blurredAlpha"/>
         <feOffset in="blurredAlpha" dx="3" dy="3" result="offsetBlurredAlpha"/>
         <feFlood result="flooded" style="flood-color:rgb(99,7,7);flood-opacity:0.65"/>
         <feComposite in="flooded" operator="in" in2="offsetBlurredAlpha"
            result="coloredShadow"/>
         <feComposite in="SourceGraphic" in2="coloredShadow" operator="over"/>
      </filter>
   </defs>
   <text x="126px" y="155px" 
      style="fill:rgb(0,0,0); font-size:30;
             font-family:@SimSun; 
             filter:url(#Drop_Shadow)">DHTML NIRVANA</text>
</svg>

View example 25 in a new window.

Rotating Text

Another important concept in SVG is the notion of transforming elements. To illustrate, let's take a look at how to rotate text. But be aware that the same principles illustrated here can be applied to any SVG element: in other words it's not limited to rotating text.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
   "https://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%">
<g style="color:#000000;font-weight:bold;font-style:normal;font-size:38">
<text x="18" y="18" transform="translate(7,20) rotate(60)">DHTML Nirvana</text>
 </g>
</svg>

View example 26 in a new window.

You will note the use of a new tag in the above example: <g>. A <g> element is a way to group SVG elements together. It is a similar feature to nesting SVG, but with one important difference. The <g> element allows for transformations with the use of the transform attribute. The transform attribute is important because it allows for the manipulation of size, position or shape; and this can either be done statically or dynamically. Consequently, if you wanted to rotate or skew or perform a morphing animation, the transform attribute becomes central. The translate values denote the new position of the rotation; that is, where to begin and where to end. The rotate attribute defines the degree of rotation.

What's Next?

Phew, that was a lot to go through! And the thing is, we haven't even scratched the surface of SVG yet and that's what makes this such a compelling specification. Needless to say I am hooked on SVG, and I hope that this article has piqued your interest as well.

# # #

About the Author

Eddie Traversa is a multiple award winning developer who works as an independent consultant. He likes to play around with the latest technologies, is currently writing a book on Dynamic XHTML and his personal site is located at https://dhtmlnirvana.com/.