Chapter 9. Creating Logos and Banner Ads
 | CONTENTS |  |
In this chapter:
- Creating Logos
- Creating Banner and Other Types of Ads in SVG
Creating Logos
In this chapter, you apply techniques you have learned in earlier chapters to produce some quasirealistic SVG Web page "furniture." My aim is primarily to show you how to use those techniques and apply them to your own graphics design needs.
If you have followed the earlier chapters sequentially, you should have a grasp of the essentials of the structure of an SVG document: SVG graphics shapes, text layout, SVG gradients, filters, and animations. Now that I have covered those key aspects of SVG, you are in a position to create semirealistic images and put combinations of those technologies to work.
Creating a logo for a customer is a common task of many graphics designers, so in this section you examine the creation of some possible logos using SVG that demonstrate the use of a variety of SVG elements.
Static logos
First, apply what you have learned so far by creating a number of static logos.
A logo reusing simple shapes
Create a simple logo using only <text> and <rect> elements for SVGenius.com. Assume that the Web page on which it will be placed has a black background, and use that in your logo too. When the logo is complete, it looks like Figure 09.01.
Figure 09.01. The completed logo.
Now create the logo piece by piece. You want to place it on a Web page with a black background, so you need a black rectangle with exactly the same dimensions as the <svg> element to ensure that the default whitish background color of an SVG viewport is covered fully. You start with this code:
Listing 9.1 (SVGenius00.svg)
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/ DTD/svg10.dtd"> <svg width="200" height="75"> <rect x="0" y="0" width="200" height="75"/> </svg>
The rectangle is black because the default fill for an SVG graphic is black. If you want to express that explicitly, you could use
<rect x="0" y="0" width="200" height="75" style="fill:black; stroke:black;"/>
For purposes of this example, you don't have to be pixel perfect. Remember that because the stroke does take up some width, however, you might want to specify the stroke width as zero in other situations where precise placement is crucial.
Next, you want to add the text. You want a dropped initial capital, which is obviously a larger font size than the rest of the company name. Unfortunately, because SVG has no drop capitals option, you need to place the initial S in its own text element and adjust the font-size property and the x and y attributes to suit. The code for the text looks like this:
<text x="20" y="50" style="font-size:36; fill:white; stroke:white;">S</text> <text x="42" y="42" style="font-size:24; fill:white; stroke:white;">VGenius.com</text>
An alternative approach is to use one <text> element and two <tspan> elements nested within it.
Finally, you want to add the set of colored rectangles. Notice that you will use six rectangles that are identical in size. It makes sense, therefore, to define the basic rectangle in a <rect> element nested within the <defs> element, like this:
<defs> <rect id="myLittleRect" width="20" height="5"/> </defs>
Notice that you have added an id attribute of value myLittleRect so that you can reference this definition later, employing the SVG <use> element.
Having defined the size of the rectangle, you need to use it six times, not surprisingly employing the SVG <use> element to do so. The definition of the <rect> you will reuse gave its size, but specified nothing about its position or style, so you need to add x and y attributes to place the rectangles in appropriate places within the SVG graphic. You also need to style each rectangle to give the color progression you want:
<use x="47" y="46" xlink:href="#myLittleRect" style="fill:red;"/> <use x="70" y="46" xlink:href="#myLittleRect" style="fill:#FF9900;"/> <use x="93" y="46" xlink:href="#myLittleRect" style="fill:#FFFF00;"/> <use x="116" y="46" xlink:href="#myLittleRect" style="fill:#66FF00;"/> <use x="139" y="46" xlink:href="#myLittleRect" style="fill:#3333FF;"/> <use x="162" y="46" xlink:href="#myLittleRect" style="fill:#CC00FF;"/>
Typically, in an SVG graphic, the ordering of elements can be quite important. In this example, the only important thing is to make sure that the large black <rect> comes first after the <defs> element, which ensures that it is the background on which everything else is placed. If you place the black rectangle later, it obscures some other part of the logo. If you place it last, every other part of the logo is covered and you see a plain black rectangle.
Putting all that together, the source code for the logo looks like this:
Listing 9.2 (SVGeniusLogo01.svg)
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/ DTD/svg10.dtd"> <svg width="200" height="75"> <defs> <rect id="myLittleRect" width="20" height="5"/> </defs> <rect x="0" y="0" width="200" height="75"/> <text x="20" y="50" style="font-size:36; fill:white; stroke:white;">S</text> <text x="42" y="42" style="font-size:24; fill:white; stroke:white;">VGenius.com</text> <use x="47" y="46" xlink:href="#myLittleRect" style="fill:red;"/> <use x="70" y="46" xlink:href="#myLittleRect" style="fill:#FF9900;"/> <use x="93" y="46" xlink:href="#myLittleRect" style="fill:#FFFF00;"/> <use x="116" y="46" xlink:href="#myLittleRect" style="fill:#66FF00;"/> <use x="139" y="46" xlink:href="#myLittleRect" style="fill:#3333FF;"/> <use x="162" y="46" xlink:href="#myLittleRect" style="fill:#CC00FF;"/> </svg>
A logo using gradients
In this example, you use a couple of linear gradients to create two logos for XMML.com, one on a white background and the second on a black background. The finished version on a white background is shown in Figure 09.02.
Figure 09.02. The logo for XMML.com on a white background produced using two linear gradients, one with graduated opacities.
First, create the circle with the diagonal linear gradient within it. The linear gradient needs to be defined so that the interesting part of the color transition takes place within the circle. After a little experimentation, you settle on the values for the x1, y1, x2, and y2 attributes shown in the code. To pull the deep pink up and to the left, for example, you could decrease the value of the x1 and y1 attributes.
Listing 9.3 (XMMLLogo01.svg)
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/ DTD/svg10.dtd"> <svg width="350" height="130"> <defs> <linearGradient id="MyBlueGradient" gradientUnits="userSpaceOnUse" x1="90" y1="0" x2="150" y2="50" > <stop offset="10%" style="stop-color:#FF0066"/> <stop offset="75%" style="stop-color:#EEEEFF"/> </linearGradient> </defs> <ellipse cx="100" cy="50" rx="30" ry="30" style="fill:url(#MyBlueGradient)"> </ellipse> </svg>
Next, you create the horizontal bar with a similar linear gradient. However, because you want the linear gradient in the horizontal bar to have a different, more subtle appearance with varying opacities, you need to create another linear gradient and add that to the <defs> element:
<linearGradient id="MyOtherGradient" gradientUnits="userSpaceOnUse" x1="120" y1="40" x2="350" y2="120" > <stop offset="10%" style="stop-color:#EEEEFF; stop-opacity:0.2;"/> <stop offset="55%" style="stop-color:#FF0066; stop-opacity:0.5;"/> <stop offset="80%" style="stop-color:#EEEEFF; stop-opacity:0.2;"/> </linearGradient>
The new linear gradient has three <stop> elements rather than two. You have to adjust the x1, y1 , x2, and y2 attributes on this gradient too, to obtain the visual effect you want. Then you create the rectangle that the linear gradient will be used to fill:
<rect x="120" y="70" width="220" height="20" style="fill:url(#MyOtherGradient)"/>
Notice that the stop-opacity property for the first and third <stop> elements is set to 0.2. If it is set to 0.4, for example, the ends of the rectangle are still visible as squared-off ends, which isn't visually attractive. Reducing the stop-opacity below that gives, against a white background, a smooth fall-off in color.
Finally, you add the text to the logo, as you saw in Figure 09.02. The text should be placed late in the code because you want it to be displayed in front of the circle so that it overlaps it:
<text x="110" y="65" style="font-family:Arial, sans-serif; font-size: 24; fill:#FF0066; stroke:#FF0066"> XMML.com </text>
Putting all that together, you can see in Listing 9.4 the code that produced Figure 09.02.
Listing 9.4 (XMMLLogo02.svg)
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/ DTD/svg10.dtd"> <svg width="350" height="130"> <defs> <linearGradient id="MyBlueGradient" gradientUnits="userSpaceOnUse" x1="90" y1="0" x2="150" y2="50" > <stop offset="10%" style="stop-color:#FF0066"/> <stop offset="75%" style="stop-color:#EEEEFF"/> </linearGradient> <linearGradient id="MyOtherGradient" gradientUnits="userSpaceOnUse" x1="120" y1="40" x2="350" y2="120" > <stop offset="10%" style="stop-color:#EEEEFF; stop-opacity:0.2;"/> <stop offset="55%" style="stop-color:#FF0066; stop-opacity:0.5;"/> <stop offset="80%" style="stop-color:#EEEEFF; stop-opacity:0.2;"/> </linearGradient> </defs> <ellipse cx="100" cy="50" rx="30" ry="30" style="fill:url(#MyBlueGradient)"> </ellipse> <rect x="120" y="70" width="220" height="20" style="fill:url(#MyOtherGradient)"/> <text x="110" y="65" style="font-family:Arial, sans-serif; font-size: 24; fill:#FF0066; stroke:#FF0066"> XMML.com </text> </svg>
Suppose that you also want to explore the appearance of the logo against a black background. Simply adding a black background to Listing 9.5 leaves a fairly crude visual appearance, so you need to adjust the stop-opacity properties on both the circle and the rectangle.
The code for the logo against a black background is shown in Listing 9.5. The appearance of the logo against a black background is shown in Figure 09.03.
Figure 09.03. The XMML.com logo on a black background and following adjustments to the stop-opacity properties.
Listing 9.5 (XMMLLogo03.svg)
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/ DTD/svg10.dtd"> <svg width="350" height="130"> <defs> <linearGradient id="MyBlueGradient" gradientUnits="userSpaceOnUse" x1="90" y1="0" x2="150" y2="50" > <stop offset="10%" style="stop-color:#FF0066; stop-opacity:0.6"/> <stop offset="75%" style="stop-color:#EEEEFF; stop-opacity:0.8;"/> </linearGradient> <linearGradient id="MyOtherGradient" gradientUnits="userSpaceOnUse" x1="120" y1="40" x2="350" y2="120" > <stop offset="10%" style="stop-color:#EEEEFF; stop-opacity:0.2;"/> <stop offset="55%" style="stop-color:#FF0066; stop-opacity:0.7;"/> <stop offset="80%" style="stop-color:#EEEEFF; stop-opacity:0.2;"/> </linearGradient> </defs> <rect width="100%" height="100%"/> <ellipse cx="100" cy="50" rx="30" ry="30" style="fill:url(#MyBlueGradient)"> </ellipse> <rect x="120" y="70" width="220" height="20" style="fill:url(#MyOtherGradient)"/> <text x="110" y="65" style="font-family:Arial, sans-serif; font-size: 24; fill:#FF0066; stroke:#FF0066"> XMML.com </text> </svg>
Animated logos
SVG offers an enormous range of possibilities for the animation of logos, whether it is the color, size, position, or opacity of individual SVG elements or some combination of them.
A simple animated logo
Figure 09.04 shows the logo you started to build in Chapter 3, "Creating Static Graphics Elements," using <rect> elements combined with a suitable banner for a Web page perhaps an SVG Web page, such as those described in Chapter 12, "Creating a Simple SVG Web Site."
Figure 09.04. The logo created using simple SVG shapes and a linear gradient.
The starting point you reached in Chapter 4, "Using Text in SVG," having earlier laid out the rectangles and lines in Chapter 3, is shown next:
Listing 9.6 (ThreeRectLogo01.svg)
<?xml version='1.0'?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/ DTD/svg10.dtd"> <svg width="800" height="600"> <!-- The logo from chapter 3 is re-used here. --> <svg x="0" y="0" width="400" height="500"> <rect x="10" y="20" width="100" height="100" style="fill:none; stroke:#000099; stroke-width:4;"/> <rect x="130" y="130" width="100" height="100" style="fill:none; stroke:#000099; stroke-width:4;"/> <rect x="10" y="240" width="100" height="100" style="fill:none; stroke:#000099; stroke-width:4;"/> <line x1="35" y1="130" x2="110" y2="180" style="stroke-width:5; stroke:#000099"/> <line x1="35" y1="230" x2="110" y2="180" style="stroke-width:5; stroke:#000099"/> <rect x="18" y="130" width="100" height="100" style="fill:none; stroke:white; stroke-width:16;"/> <text x="20" y="70" style="font-size:18; stroke:#FF0066; fill:#FF0066;"> Scalable</text> <text x="150" y="180" style="font-size:18; stroke:#FF0066; fill:#FF0066;"> Vector</text> <text x="20" y="290" style="font-size:18; stroke:#FF0066; fill:#FF0066;"> Graphics</text> </svg> </svg>
To that straightforward base, you add a banner-size background that involves a linear gradient. As you might recall, you need to define, early in your SVG document, the linear gradient within a <linearGradient> element that is nested within a <defs> element. The code for the linear gradient looks like this:
<defs> <linearGradient id="MyPinkGradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="120" > <stop offset="10%" style="stop-color:#FF0066"/> <stop offset="75%" style="stop-color:#EEEEFF"/> </linearGradient> </defs>
The linear gradient is a vertical one, graduating from a deep pinkish color, #FF0066, at the top to a pale blue, #EEEEFF, at the bottom. You know that it is a vertical gradient because the values for the y1 and y2 attributes are different and the values for the x1 and x2 attributes are the same.
If you want to create a horizontal linear gradient, the x1 and x2 attributes would be different and the y1 and y2 attributes would be the same. If you want to create a diagonal linear gradient, both pairs of attributes would differ.
To create the gradient in the SVG image, you need to apply it as the fill in a <rect> element placed at the top of the page, like this:
<rect x="0" y="0" width="800" height="100" style="fill:url(#MyPinkGradient);"/>
If you look back at Figure 09.04, you see that a series of lines is added to the bottom of the gradient to provide a deep blue contrast against the background at that part of the gradient that is a pale blue. In this instance, the lines were created using <rect> elements, (although you could use <line> elements) and nest those in a <g> element, as shown in this code:
<g> <rect x="0" y="82" width="800" height="1" style="fill:#000066; stroke:#000066; stroke-width:1"/> <rect x="0" y="86" width="800" height="1" style="fill:#000066; stroke:#000066; stroke-width:1"/> <rect x="0" y="90" width="800" height="1" style="fill:#000066; stroke:#000066; stroke-width:1"/> <rect x="0" y="94" width="800" height="1" style="fill:#000066; stroke:#000066; stroke-width:1"/> <rect x="0" y="98" width="800" height="1" style="fill:#000066; stroke:#000066; stroke-width:1"/> </g>
So you now have a static logo. Add a little animation to it! You cause the middle of the three rectangles and the pair of lines that form the right-pointing arrow to be animated in from the left side of the page when the image is loaded. Remember that you have the essentially invisible rectangle with the white stroke and no fill as well as the <text> element containing the word Vector to include in this group. Because you want to animate these elements together, you enclose them in a grouping <svg> element, like this:
<svg> <rect x="130" y="130" width="100" height="100" style="fill:none; stroke:#000099; stroke-width:4;"/> <line x1="35" y1="130" x2="110" y2="180" style="stroke-width:5; stroke:#000099"/> <line x1="35" y1="230" x2="110" y2="180" style="stroke-width:5; stroke:#000099"/> <rect x="18" y="130" width="100" height="100" style="fill:none; stroke:white; stroke-width:16;"/> <text x="150" y="180" style="font-size:18; stroke:#FF0066; fill:#FF0066;"> Vector</text> </svg>
If you compare that code carefully with the code shown in Listing 9.6, you see that some of the elements have to be reordered to bring them together so that they can be animated together within the grouping <svg> element.
You could use a <g> element as the grouping element for this task, if you prefer. I tend to use only the <g> element when I want to perform a transformation that can't be used on an <svg> element.
The group of elements extends almost 200 pixels to the right of the left edge of the image. Therefore, to start them animating from off the page, you set the x attribute of the <svg> element to -200 and then animate them with an <animate> element, as shown in the following code:
<svg x="-200" y="0"> <animate attributeName="x" begin="0s" dur="5s" fill="freeze" from="-200" to="0"/> <rect x="130" y="130" width="100" height="100" style="fill:none; stroke:#000099; stroke-width:4;"/> <line x1="35" y1="130" x2="110" y2="180" style="stroke-width:5; stroke:#000099"/> <line x1="35" y1="230" x2="110" y2="180" style="stroke-width:5; stroke:#000099"/> <text x="150" y="180" style="font-size:18; stroke:#FF0066; fill:#FF0066;"> Vector</text> <rect x="18" y="130" width="100" height="100" style="fill:none; stroke:white; stroke-width:16;"/> </svg>
Notice that when the page loads, the x attribute of the <svg> element is set to -200. The animation described by the <animate> element applies to everything in the <svg> element because it is an immediate child element of the <svg> element; therefore, all the contents of the <svg> element are animated together, maintaining their relative positions to each other.
Hopefully, you were able to follow exactly where each addition and change to the code was to be placed. This process is shown in full in the following listing. If you are in doubt, trace the code step by step, and compare the code you read with Figure 09.04.
Listing 9.7 (ThreeRectLogo05.svg)
<?xml version='1.0'?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/ DTD/svg10.dtd"> <svg width="800" height="600"> <defs> <linearGradient id="MyPinkGradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="120" > <stop offset="10%" style="stop-color:#FF0066"/> <stop offset="75%" style="stop-color:#EEEEFF"/> </linearGradient> </defs> <rect x="0" y="0" width="800" height="100" style="fill:url(#MyPinkGradient);"/> <g> <rect x="0" y="82" width="800" height="1" style="fill:#000066; stroke:#000066; stroke-width:1"/> <rect x="0" y="86" width="800" height="1" style="fill:#000066; stroke:#000066; stroke-width:1"/> <rect x="0" y="90" width="800" height="1" style="fill:#000066; stroke:#000066; stroke-width:1"/> <rect x="0" y="94" width="800" height="1" style="fill:#000066; stroke:#000066; stroke-width:1"/> <rect x="0" y="98" width="800" height="1" style="fill:#000066; stroke:#000066; stroke-width:1"/> </g> <!-- The logo from chapter 3 is re-used here. --> <svg x="0" y="0" width="400" height="500"> <rect x="10" y="20" width="100" height="100" style="fill:none; stroke:#000099; stroke-width:4;"/> <rect x="10" y="240" width="100" height="100" style="fill:none; stroke:#000099; stroke-width:4;"/> <svg x="-200" y="0"> <animate attributeName="x" begin="0s" dur="5s" fill="freeze" from="-200" to="0"/> <rect x="130" y="130" width="100" height="100" style="fill:none; stroke:#000099; stroke-width:4;"/> <line x1="35" y1="130" x2="110" y2="180" style="stroke-width:5; stroke:#000099"/> <line x1="35" y1="230" x2="110" y2="180" style="stroke-width:5; stroke:#000099"/> <text x="150" y="180" style="font-size:18; stroke:#FF0066; fill:#FF0066;"> Vector</text> <rect x="18" y="130" width="100" height="100" style="fill:none; stroke:white; stroke-width:16;"/> </svg> <text x="20" y="70" style="font-size:18; stroke:#FF0066; fill:#FF0066;"> Scalable</text> <text x="20" y="290" style="font-size:18; stroke:#FF0066; fill:#FF0066;"> Graphics</text> </svg> </svg>
A logo with rotating text messages
Now use the combined ellipses you saw in Chapter 3 to form the basis for a simple logo for RootsPics.com. When you are creating an animated logo, you should often create a static version first. A first attempt at a RootsPics.com logo might look like this:
Listing 9.8 (EllipsesRootsPics01.svg)
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/ DTD/svg10.dtd"> <svg width="800" height="150"> <svg x="0" y="0" width="800" height="150"> <g> <ellipse cx="240" cy="70" rx="220" ry="30" style="stroke:none; fill:#000099"/> <ellipse cx="221" cy="74" rx="192" ry="22" style="stroke:none; fill:white"/> <text> <tspan x="90" y="70" style="font-size:14; font-family: Ventana, Arial, sans-serif; fill:red; stroke:red;"> RootsPics.com </tspan> <tspan dx="-8em" dy="1.5em" style="font-size:12; font-family: Ventana, Arial, sans-serif; fill:#CCCCCC; stroke:#CCCCCC; opacity:0.7"> For your picture needs as you explore your roots. </tspan> </text> </g> </svg> </svg>
Notice that an <svg> element is nested within another. If you want to adjust the position of the whole logo on the page, you can simply adjust the x or y attributes of the nested <svg> element, and all the components move together the requisite distance because they take their position from the upper-left corner of that nested <svg> element.
To add some interest to the logo, add a linear gradient to the rear ellipse (the one that is dark blue) so that it graduates from a pale blue on the left to the dark blue on the right. You need to create the gradient within a <linearGradient> element nested within the <defs> element. The <defs> element is inserted after the outer <svg> element and before the inner one, like this:
<svg width="800" height="150"> <defs> <linearGradient id="Gradient01"> <stop offset="20%" style="stop-color:#9999FF"/> <stop offset="90%" style="stop-color:#000099"/> </linearGradient> </defs> <svg x="0" y="0" width="800" height="150">
You apply the gradient to the ellipse like this:
<ellipse cx="240" cy="70" rx="220" ry="30" style="stroke:none; fill:url(#Gradient01)"/>
and modify the text RootsPics.com so that the same gradient is applied to it as fill and stroke:
<tspan x="90" y="70" style="font-size:14; font-family: Ventana, Arial, sans-serif; fill:url(#Gradient01); stroke:url(#Gradient01);"> RootsPics.com </tspan>
Suppose that the effect that you want to create below the RootsPics.com text is one of a mini-slide show, with three short pieces of text rotating over time to highlight some services that RootsPics.com might supply. The technique for the placement of those pieces of text is to describe them relative to each other so that for the second and third pieces of text, the dx attribute on the <tspan> element is a negative number (the second and third pieces of text are pulled back to the beginning of the line). If all three pieces of text were visible at the same time, you would have an unsightly overlap of characters.
To create the rotating text messages, you create an animation using the targetElement syntax mentioned briefly early in Chapter 8, "Animation: SVG and SMIL Animation." To achieve the effect you want, you need to coordinate the timings of the animations while they cycle through visible and hidden states. The first <tspan> should be visible when the page loads, and the other two should be hidden. You need to create animations that alter the value of the visibility property at appropriate times. The following code shows one technique to achieve this effect:
<tspan id="Message1" dx="-8em" dy="1.5em" style="font-size:12; font-family: Ventana, Arial, sans-serif; fill:#CCCCCC; stroke:#CCCCCC; opacity:0.7" visibility="visible"> <animate begin="0s" dur="12s" targetName="Message1" attributeName="visibility" values="visible; hidden; hidden; visible" keyTimes="0s; 4s; 8s; 12s" repeatCount="indefinite" /> For your picture needs as you explore your roots. </tspan>
Notice that an id attribute has been added to the <tspan> element. The targetName attribute of the <animate> element references the <tspan> element by means of the id attribute. The animation begins at 0 seconds after the page loads and has a duration of 12 seconds. At key times, the value of the visibility property is changed to either visible or hidden to reflect the rotating messages you want at particular times. The value of the repeatCount attribute indicates that this animation continues indefinitely. Similar animations, with different timings for visibility and hiddenness, are created for the other two <tspan> elements.
With all those parts put together, your final code looks like the following code. The RootsPics.com text is static. The contents of the other three <tspan> elements are in turn made visible or hidden to provide rotating text messages within the logo.
Listing 9.9 (EllipsesRootsPics04.svg)
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/ DTD/svg10.dtd"> <svg width="800" height="150" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <linearGradient id="Gradient01"> <stop offset="20%" style="stop-color:#9999FF"/> <stop offset="90%" style="stop-color:#000099"/> </linearGradient> </defs> <svg x="0" y="0" width="800" height="150"> <ellipse cx="240" cy="70" rx="220" ry="30" style="stroke:none; fill:url(#Gradient01)"/> <ellipse cx="221" cy="74" rx="192" ry="22" style="stroke:none; fill:white"/> <text> <tspan x="90" y="70" style="font-size:14; font-family: Ventana, Arial, sans-serif; fill:url(#Gradient01); stroke:url(#Gradient01);"> RootsPics.com </tspan> <tspan id="Message1" dx="-8em" dy="1.5em" style="font-size:12; font-family: Ventana, Arial, sans-serif; fill:#CCCCCC; stroke:#CCCCCC; opacity:0.7" visibility="visible"> <animate begin="0s" dur="12s" targetName="Message1" attributeName="visibility" values="visible; hidden; hidden; visible" keyTimes="0s; 4s; 8s; 12s" repeatCount="indefinite" /> For your picture needs as you explore your roots. </tspan> <tspan id="Message2" dx="-21em" style="font-size:12; font-family: Ventana, Arial, sans-serif; fill:#CCCCCC; stroke:#CCCCCC; opacity:0.7" visibility="hidden"> <animate begin="0s" dur="12s" targetName="Message2" attributeName="visibility" values="hidden; visible; hidden; hidden" keyTimes="0s; 4s; 8s; 12s" repeatCount="indefinite" /> Photographic prints of yesteryear </tspan> <tspan id="Message3" dx="-15em" style="font-size:12; font-family: Ventana, Arial, sans-serif; fill:#CCCCCC; stroke:#CCCCCC; opacity:0.7" visibility="hidden"> <animate begin="0s" dur="12s" targetElement="Message3" attributeName="visibility" values="hidden; hidden; visible; hidden" keyTimes="0s; 4s; 8s; 12s" repeatCount="indefinite" /> Paintings of locations of your family's roots. </tspan> </text> </svg> </svg>
A logo with several text animations
Now go on and use a more complex sequence of animations, and create a logo for S-V-G.com, with the slogan "SVG with more than a dash of brilliance!"
When viewed as a static image, the logo looks like the one shown in Figure 09.05. Because you will animate various letters and words within the logo separately, you need to separate out carefully the parts you want to animate individually. The following code shows the logo before any animation is added. The code looks just like Figure 09.05 onscreen.
Figure 09.05. The logo for S-V-G.com.
Listing 9.10 (S-V-Gcomlogo01.svg)
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/ DTD/svg10.dtd"> <svg width="400" height="200" > <svg x="0" y="0" width="300" height="100"> <rect x="0" y="0" width="100%" height="100%"/> <text x="10" y="30" style="font-size:36; font-family:Ventana, Arial, san-serif;"> <tspan dy="0m" style="fill:red; stroke:red;"> S </tspan> <tspan dx="0m" style="fill:#00FF33; stroke:#00FF33;"> - </tspan> <tspan dx="0m" style="fill:#FFFF00; stroke:#FFFF00"> V </tspan> <tspan dx="0m" style="fill:#00FF33; stroke:#00FF33;"> - </tspan> <tspan dx="0m" style="fill:#3333FF; stroke:#3333FF"> G </tspan> <tspan dx="0m" style="fill:#FFCC00; stroke:#FFCC00;"> .com </tspan> </text> <line x1="4%" y1="40" x2="95%" y2="40" style="stroke:#3333FF; stroke-width:1.5; opacity:1"/> <text x="10" y="60" style="stroke:#FFCC00; fill:#FFCC00"> <tspan dy="0em"> SVG with more than a </tspan> <tspan dx="0em"> dash< /tspan> <tspan dx="0em"> of brilliance! </tspan> </text> </svg> </svg>
Notice that in both lines of text, you have made use of the dx attribute with a value of 0em. That allows spacing to be preserved; at the same time, however, the separate <tspan> elements allow you to animate parts of each line of text individually.
Because you want to create the animation from a blank black background, the next step is to set the visibility property on each element to a value of hidden. You want to control the appearance of the content of each <tspan> element individually, so be sure to set the visibility to hidden on the <tspan> elements, not on the <text> elements. After that is done, the beginning state of the animated logo has a horizontal blue line on a black background with all the text hidden.
Now you animate the various parts of the logo within their individual <tspan> elements. The first thing you do is to make the letters S, V, and G (which are part of S-V-G.com) successively visible while keeping the two dashes and the .com hidden. At that stage, the content of the first <text> element looks like this:
<text x="10" y="30" style="font-size:36; font-family:Ventana, Arial, san-serif;" > <tspan dy="0m" style="fill:red; stroke:red;" visibility="hidden"> <animate attributeName="visibility" from="hidden" to="visible" begin="2s" dur="0.1s" fill="freeze"/> S </tspan> <tspan dx="0m" style="fill:#00FF33; stroke:#00FF33;" visibility="hidden"> - </tspan> <tspan dx="0m" style="fill:#FFFF00; stroke:#FFFF00" visibility="hidden"> <animate attributeName="visibility" from="hidden" to="visible" begin="3s" dur="0.1s" fill="freeze"/> V </tspan> <tspan dx="0m" style="fill:#00FF33; stroke:#00FF33;" visibility="hidden"> - </tspan> <tspan dx="0m" style="fill:#3333FF; stroke:#3333FF" visibility="hidden"> <animate attributeName="visibility" from="hidden" to="visible" begin="4s" dur="0.1s" fill="freeze"/> G </tspan> <tspan dx="0m" style="fill:#FFCC00; stroke:#FFCC00;" visibility="hidden"> .com </tspan> </text>
Then you add animations to the text below the line, like this:
<text x="10" y="60" style="stroke:#FFCC00; fill:#FFCC00"> <tspan dy="0em" visibility="hidden"> <animate attributeName="visibility" from="hidden" to="visible" begin="5s" dur="0.1s" fill="freeze"/> SVG with more than a </tspan> <tspan dx="0em" style="fill:#00FF33; stroke:#00FF33" visibility="hidden"> <animate attributeName="visibility" from="hidden" to="visible" begin="5.5s" dur="0.1s" fill="freeze"/> dash< /tspan> <tspan dx="0em" visibility="hidden"> <animate attributeName="visibility" from="hidden" to="visible" begin="6s" dur="0.1s" fill="freeze"/> of brilliance! </tspan> </text>
Then you add animations to make the dashes and the .com of S-V-G.com visible, like this:
<text x="10" y="30" style="font-size:36; font-family:Ventana, Arial, san-serif;" > <tspan dy="0m" style="fill:red; stroke:red;" visibility="hidden"> <animate attributeName="visibility" from="hidden" to="visible" begin="2s" dur="0.1s" fill="freeze"/> S </tspan> <tspan dx="0m" style="fill:#00FF33; stroke:#00FF33;" visibility="hidden"> <animate attributeName="visibility" from="hidden" to="visible" begin="7s" dur="0.1s" fill="freeze"/> - </tspan> <tspan dx="0m" style="fill:#FFFF00; stroke:#FFFF00" visibility="hidden"> <animate attributeName="visibility" from="hidden" to="visible" begin="3s" dur="0.1s" fill="freeze"/> V </tspan> <tspan dx="0m" style="fill:#00FF33; stroke:#00FF33;" visibility="hidden"> <animate attributeName="visibility" from="hidden" to="visible" begin="7s" dur="0.1s" fill="freeze"/> - </tspan> <tspan dx="0m" style="fill:#3333FF; stroke:#3333FF" visibility="hidden"> <animate attributeName="visibility" from="hidden" to="visible" begin="4s" dur="0.1s" fill="freeze"/> G </tspan> <tspan dx="0m" style="fill:#FFCC00; stroke:#FFCC00;" visibility="hidden"> <animate attributeName="visibility" from="hidden" to="visible" begin="7s" dur="0.1s" fill="freeze"/> .com </tspan> </text>
The completed code listing is shown in Listing 9.11.
Listing 9.11 (S-V-Gcomlogo05.svg)
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/ DTD/svg10.dtd"> <svg width="400" height="200" > <svg x="0" y="0" width="300" height="100"> <rect x="0" y="0" width="100%" height="100%"/> <g display="block"> <animate attributeName="display" from="block" to="none" begin="8s" dur="0.1s" fill="freeze"/> <animate attributeName="display" from="none" to="block" begin="8.5s" dur="0.1s" fill="freeze"/> <animate attributeName="display" from="block" to="none" begin="9s" dur="0.1s" fill="freeze"/> <animate attributeName="display" from="none" to="block" begin="9.5s" dur="0.1s" fill="freeze"/> <animate attributeName="display" from="block" to="none" begin="10s" dur="0.1s" fill="freeze"/> <animate attributeName="display" from="none" to="block" begin="10.5s" dur="0.1s" fill="freeze"/> <text x="10" y="30" style="font-size:36; font-family:Ventana, Arial, san-serif;" > <tspan dy="0m" style="fill:red; stroke:red;" visibility="hidden"> <animate attributeName="visibility" from="hidden" to="visible" begin="2s" dur="0.1s" fill="freeze"/> S </tspan> <tspan dx="0m" style="fill:#00FF33; stroke:#00FF33;" visibility="hidden"> <animate attributeName="visibility" from="hidden" to="visible" begin="7s" dur="0.1s" fill="freeze"/> - </tspan> <tspan dx="0m" style="fill:#FFFF00; stroke:#FFFF00" visibility="hidden"> <animate attributeName="visibility" from="hidden" to="visible" begin="3s" dur="0.1s" fill="freeze"/> V </tspan> <tspan dx="0m" style="fill:#00FF33; stroke:#00FF33;" visibility="hidden"> <animate attributeName="visibility" from="hidden" to="visible" begin="7s" dur="0.1s" fill="freeze"/> - </tspan> <tspan dx="0m" style="fill:#3333FF; stroke:#3333FF" visibility="hidden"> <animate attributeName="visibility" from="hidden" to="visible" begin="4s" dur="0.1s" fill="freeze"/> G </tspan> <tspan dx="0m" style="fill:#FFCC00; stroke:#FFCC00;" visibility="hidden"> <animate attributeName="visibility" from="hidden" to="visible" begin="7s" dur="0.1s" fill="freeze"/> .com </tspan> </text> </g> <line x1="4%" y1="40" x2="95%" y2="40" style="stroke:#3333FF; stroke-width:1.5; opacity:1"/> <text x="10" y="60" style="stroke:#FFCC00; fill:#FFCC00"> <tspan dy="0em" visibility="hidden"> <animate attributeName="visibility" from="hidden" to="visible" begin="5s" dur="0.1s" fill="freeze"/> SVG with more than a </tspan> <tspan dx="0em" style="fill:#00FF33; stroke:#00FF33" visibility="hidden"> <animate attributeName="visibility" from="hidden" to="visible" begin="5.5s" dur="0.1s" fill="freeze"/> dash< /tspan> <tspan dx="0em" visibility="hidden"> <animate attributeName="visibility" from="hidden" to="visible" begin="6s" dur="0.1s" fill="freeze"/> of brilliance! </tspan> </text> </svg> </svg>
An animated logo with a gradient and filter
In this example, you create for SVGenius.com a logo that incorporates both a gradient and a filter, together with an animation. This arrangement gives you a dynamic logo through the use of animation, but some visual subtlety through the use of the filter. In production-quality SVG logos, you are likely to want to combine these aspects of SVG to create attractive and striking visual effects. The final logo is shown in Figure 09.07, but I suggest that this should be one you run onscreen.
Figure 09.07. The completed logo, after the animation of the text has taken place with the drop shadow on the text and enclosing rectangle and the use of a gradient fill on the lines within the rectangle.
As a first step, you create a rectangle with curved corners and fill it with a regular pattern of lines. On the lower and right edges of the rectangle, you apply a narrow drop shadow filter, by adjusting the stdDeviation of the <feGaussianBlur> element to 0.5 and the dx and dy attributes of the <feOffset> filter primitive. In this initial stage, the lines are simply filled with a plain color to check placement. The code at the end of this first stage is shown in Listing 9.12.
Listing 9.12 (RectLinesLogo01.svg)
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/ DTD/svg10.dtd"> <svg> <defs> <filter id="CombinedDropShadow" width="140%" y="-20%" height="200%"> <feGaussianBlur in="SourceAlpha" stdDeviation="0.5" result="ShadowOut" /> <feOffset in="ShadowOut" dx="2" dy="1" result="ShadowOnly" /> <feMerge> <feMergeNode in="ShadowOnly"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> </defs> <svg x="150"> <rect x="5" y="55" width="300" height="80" rx="10" ry="10" style="fill:white; filter:url(#CombinedDropShadow)"/> <rect x="10" y="60" width="295" height="2" style="fill:#FF0099; stroke:none;"/> <rect x="10" y="65" width="295" height="2" style="fill:#FF0099; stroke:none;"/> <rect x="10" y="70" width="295" height="2" style="fill:#FF0099; stroke:none;"/> <rect x="10" y="75" width="295" height="2" style="fill:#FF0099; stroke:none;"/> <rect x="10" y="80" width="295" height="2" style="fill:#FF0099; stroke:none;"/> <rect x="10" y="85" width="295" height="2" style="fill:#FF0099; stroke:none;"/> <rect x="10" y="90" width="295" height="2" style="fill:#FF0099; stroke:none;"/> <rect x="10" y="95" width="295" height="2" style="fill:#FF0099; stroke:none;"/> <rect x="10" y="100" width="295" height="2" style="fill:#FF0099; stroke:none;"/> <rect x="10" y="105" width="295" height="2" style="fill:#FF0099; stroke:none;"/> <rect x="10" y="110" width="295" height="2" style="fill:#FF0099; stroke:none;"/> <rect x="10" y="115" width="295" height="2" style="fill:#FF0099; stroke:none;"/> <rect x="10" y="120" width="295" height="2" style="fill:#FF0099; stroke:none;"/> <rect x="10" y="125" width="295" height="2" style="fill:#FF0099; stroke:none;"/> <rect x="10" y="130" width="295" height="2" style="fill:#FF0099; stroke:none;"/> </svg> </svg>
Suppose that you want to add a linear gradient within the lines. An initial attempt is shown in the following code:
<linearGradient id="MyPinkGradient" gradientUnits="userSpaceOnUse" x1="150" y1="150" x2="220" y2="50" > <stop offset="10%" style="stop-color:#EEEEFF; stop-opacity:0.8"/> <stop offset="50%" style="stop-color:#FF0099"/> <stop offset="75%" style="stop-color:#EEEEFF"/> </linearGradient>
I hope that you have taken or will be taking my advice about trying to visualize how a linear gradient will look onscreen by experimenting with gradients on large background rectangles. However, you need to think about an additional issue. My habit of using a nested <svg> element means that a new user coordinate system is created. In Figure 09.06, the linear gradient on a rectangle is inserted in the background (using the coordinate system of the outer <svg> element) and the gradient as it applies on my lines.
Figure 09.06. The linear gradient is applied according to the coordinate system in use in each <svg> element.
In Listing 9.13, you can see the next stage of the development where the lines on the rectangle have been filled using the linear gradient rather than a plain fill, as in the first stage. The x1, y1, x2, and y2 coordinates of the <linearGradient> element have been adjusted to give pale blue in the lower-left and upper-right corners.
Listing 9.13 (RectLinesLogo03.svg)
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/ DTD/svg10.dtd">
<svg> <defs> <linearGradient id="MyPinkGradient" gradientUnits="userSpaceOnUse" x1="200" y1="175" x2="250" y2="50" > <stop offset="20%" style="stop-color:#EEEEFF"/> <stop offset="50%" style="stop-color:#FF0099"/> <stop offset="75%" style="stop-color:#EEEEFF"/> </linearGradient> <filter id="CombinedDropShadow" width="140%" y="-20%" height="200%"> <feGaussianBlur in="SourceAlpha" stdDeviation="0.5" result="ShadowOut" /> <feOffset in="ShadowOut" dx="2" dy="1" result="ShadowOnly" /> <feMerge> <feMergeNode in="ShadowOnly"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> </defs> <svg x="150"> <rect x="5" y="55" width="300" height="80" rx="10" ry="10" style="fill:white; filter:url(#CombinedDropShadow)"/> <rect x="10" y="60" width="295" height="2" style="fill:url(#MyPinkGradient); stroke:none;"/> <rect x="10" y="65" width="295" height="2" style="fill:url(#MyPinkGradient); stroke:none;"/> <rect x="10" y="70" width="295" height="2" style="fill:url(#MyPinkGradient); stroke:none;"/> <rect x="10" y="75" width="295" height="2" style="fill:url(#MyPinkGradient); stroke:none;"/> <rect x="10" y="80" width="295" height="2" style="fill:url(#MyPinkGradient); stroke:none;"/> <rect x="10" y="85" width="295" height="2" style="fill:url(#MyPinkGradient); stroke:none;"/> <rect x="10" y="90" width="295" height="2" style="fill:url(#MyPinkGradient); stroke:none;"/> <rect x="10" y="95" width="295" height="2" style="fill:url(#MyPinkGradient); stroke:none;"/> <rect x="10" y="100" width="295" height="2" style="fill:url(#MyPinkGradient); stroke:none;"/> <rect x="10" y="105" width="295" height="2" style="fill:url(#MyPinkGradient); stroke:none;"/> <rect x="10" y="110" width="295" height="2" style="fill:url(#MyPinkGradient); stroke:none;"/> <rect x="10" y="115" width="295" height="2" style="fill:url(#MyPinkGradient); stroke:none;"/> <rect x="10" y="120" width="295" height="2" style="fill:url(#MyPinkGradient); stroke:none;"/> <rect x="10" y="125" width="295" height="2" style="fill:url(#MyPinkGradient); stroke:none;"/> <rect x="10" y="130" width="295" height="2" style="fill:url(#MyPinkGradient); stroke:none;"/> </svg> </svg>
Finally, you add some text for the domain name, including a simple animation that draws attention to the text of the logo, but is then static after the animation is complete:
<text x="-300" y="110" style="font-family:'Times New Roman', serif; font-size:48; stroke:#FF0099; fill:white; filter:url(#CombinedDropShadow)"> <animate begin="1s" dur="2s" attributeName="x" from="-300" to="30" fill="freeze"/> SVGenius.com </text>
The final appearance of the logo, after the animation of the text is complete, is shown in Figure 09.07.
A power meter logo
I guess that you are familiar with those animated logos that resemble a power meter and announce something like "Powered by XYZ." Personally, I find some of them fairly irritating on a Web page, particularly if I am trying to digest interesting content on the page, but because constructing this type of a logo lets you put several SVG techniques into practice, it is an interesting example to develop.
First, look at how the finished product should look. Of course, because this logo is animated, I again encourage you to download and run the code. Figure 09.08 can't convey all that is going on.
Figure 09.08. A static impression of the power meter logo.
Now you create a power meter. Various techniques produce roughly similar appearances, but the way the animation is produced is shown in the following code:
<svg id="MeterHolder" x="0" y="0" width="200" height="20"> <rect id="MyMeter" x="0" y="0" width="20" height="40" style="fill:white; stroke:none;"> </rect> <rect id="Top" x="2" y="2" width="6" height="4" style="fill:red; stroke:none"/> <rect id="Second" x="2" y="8" width="6" height="4" style="fill:blue; stroke:none"/> <rect id="Third" x="2" y="14" width="6" height="4" style="fill:green; stroke:none"/> </svg>
The code is enclosed in a <svg> element that is later placed in the <defs> element and used more than once. The way the animation will be created is by changing the height of the <svg> element. When the height is 0, the <svg> element is not displayed, nor is any element nested within it. When you increase the height of the <svg> element to 6, the red rectangle becomes visible; when the height is increased to 10, the blue rectangle is visible; and when the height of the <svg> element is 14 or greater, the green rectangle is visible too. You need to animate only one attribute, therefore, the height attribute of the <svg> element, to create the appearance of all three <rect> elements being animated.
Notice that an id attribute is included on the <svg> element so that it can be referenced from elsewhere in the document.
You need to create three of these power meters, side by side. You make use of the SVG <use> element to create each one. Because you want to make each of the animating power meters have a different display, you create the animation within the <use> element, not within the definition of the <svg> element, because you can't animate referenced elements individually. It's a pity that you can't because some nice effects would be possible.
NOTE
At the time this book was written, the SVG Working Group had recently been chartered to produce SVG version 2, which includes Mobile SVG. A Requirements Working Draft has recently been issued for Mobile SVG (see http://www.w3.org/TR/SVGMobile Regs) as well as a Requirements Working Draft for SVG version 2.0 (see http://www.w3.org/TR/SVGReqs). If you want to communicate with the SVG Working Group, the W3C has a mailing list dedicated to SVG. To subscribe, send an email message to www-svg-request@w3.org with subscribe in the Subject line. SVG Working Group members have also been active on the SVG-Developers mailing list on YahooGroups.com. The SVG-Developers mailing list is probably the most active discussion forum on SVG. To subscribe, send an email to svg-developers-subscribe@yahoogroups.com .
Note that the height attribute is being animated in each <use> element, which means that the height attribute of an <svg> element, which is what the <use> element stands for here, is being animated. The animation begins as soon as the page is loaded, (begin="0s"), lasts five seconds (dur="5s"), and is repeated indefinitely (repeatCount="indefinite"). However, the values attribute has a different list of values for each of the three <use> elements because you want the three power meters to be animated independently:
<use x="2" y="2" xlink:href="#MeterHolder" > <animate attributeName="height" begin="0s" values="0; 20; 10; 20; 0" dur="2.5s" fill="freeze" repeatCount="indefinite"/> </use> <use id="SecondMeter" x="12" y="2" xlink:href="#MeterHolder" Top.style="fill:blue"> <animate attributeName="height" targetElement="SecondMeter" begin="0s" values="20; 10; 20; 0; 20" dur="2.5s" fill="freeze" repeatCount="indefinite"/> </use> <use id="ThirdMeter" x="22" y="2" xlink:href="#MeterHolder" Top.style="fill:blue"> <animate attributeName="height" targetElement="SecondMeter" begin="0s" values="10; 20; 0; 20; 0" dur="2.5s" fill="freeze" repeatCount="indefinite"/> </use>
The final code looks like this:
Listing 9.14 (PowerMeter04.svg)
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/ DTD/svg10.dtd"> <svg width="500" height="400" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <svg id="MeterHolder" x="0" y="0" width="200" height="20"> <rect id="MyMeter" x="0" y="0" width="20" height="40" style="fill:white; stroke:none;"> </rect> <rect id="Top" x="2" y="2" width="6" height="4" style="fill:red; stroke:none"/> <rect id="Second" x="2" y="8" width="6" height="4" style="fill:blue; stroke:none"/> <rect id="Third" x="2" y="14" width="6" height="4" style="fill:green; stroke:none"/> </svg> </defs> <svg id="PowerMeter" x="30" y="30" width="300" height="200"> <use x="2" y="2" xlink:href="#MeterHolder" > <animate attributeName="height" begin="0s" values="0; 20; 10; 20; 0" dur="2.5s" fill="freeze" repeatCount="indefinite"/> </use> <use id="SecondMeter" x="12" y="2" xlink:href="#MeterHolder" Top.style="fill:blue"> <animate attributeName="height" targetElement="SecondMeter" begin="0s" values="20; 10; 20; 0; 20" dur="2.5s" fill="freeze" repeatCount="indefinite"/> </use> <use id="ThirdMeter" x="22" y="2" xlink:href="#MeterHolder" Top.style="fill:blue"> <animate attributeName="height" targetElement="SecondMeter" begin="0s" values="10; 20; 0; 20; 0" dur="2.5s" fill="freeze" repeatCount="indefinite"/> </use> <text x="0" y="40" style="font-size:14; font-family:Arial, sans-serif; fill:#CCCCCC; stroke:#CCCCCC">Powered by</text> <text x="35" y="20" style="font-size:20; font-family:Arial, sans-serif; fill:#FF0066; stroke:#FF0066">SVG</text> </svg> </svg>
Creating Banner and Other Types of Ads in SVG
You quite likely will have heard that concern is being expressed in certain quarters about the perceived falling effectiveness of banner ads on Web pages. Yet, if you visit almost any commercial Web site, you find a huge variety of ads on many Web pages. To complete this chapter, look at some possible uses of SVG in creating these types of ads.
One key aspect of any banner or other type of ad is the facility to click through to another Web site. Information about the SVG <a> element, which controls this type of between-page navigation, is in Chapter 5, "Creating Navigation Bars."
The examples in this section illustrate the use of many of the SVG elements and attributes that were touched on in earlier chapters. Each of the ads is for EditITWrite.com, a (fictional) information technology editing and writing company.
A rotating text ad
The finished ad in one of its phases looks as shown in Figure 09.09.
Figure 09.09. A rotating text ad for EditITWrite.com that uses the <tref> element and the skewY transformation.
First, you create the framework for the ad. The outline of the rectangle and the lines within it are created using a <rect> and three <line> elements. The minilogo for EditITWrite.com, the letters EIW, is created by applying a skew transformation on the letters. To create the logo, you use the <tref> element, which illustrates how it is used.
Listing 9.15 (EditITWrite01.svg)
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/ DTD/svg10.dtd"> <svg width="300" height="150"> <defs> <text id="Ref" >EIW</text> </defs> <rect x="20" y="20" width="200" height="120" style="fill:white; stroke:black; stroke-width:0.5;"/> <line x1="20" y1="60" x2="220" y2="60" style="stroke:black; stroke-width:0.5;"/> <line x1="80" y1="60" x2="80" y2="140" style="stroke:black; stroke-width:0.5;"/> <line x1="80" y1="110" x2="220" y2="110" style="stroke:black; stroke-width:0.5;"/> <text style="font-size:24; font-family:Arial, sans-serif; stroke:none; stroke-width:0; fill:red;" x="25" y="120" transform="skewY(-15)" > <tref xlink:href="#Ref"/> </text> <text x="35" y="50" style="font-size:24; fill:red; stroke:none; font-family:Arial, sans-serif;"> EditITWrite.com </text> </svg>
To that basic skeleton you add two animations that are independent of each other. The first provides the flashing text Contact Us Today, which flashes twice and then stays visible for three seconds before repeating that cycle of flashing and visibility. The code to produce this effect is shown here:
<text x="85" y="130" style="fill:blue; stroke:blue; font-size:16; font-family:Arial, sans-serif;"> <animate attributeName="visibility" begin="0s" repeatCount="indefinite" dur="5s" values="visible; hidden; visible; hidden; visible;" keyTimes="0s; 0.5s; 1s; 1.5s; 2s;"/> Contact us today! </text>
Notice how the individual values within the values attribute switch from visible to hidden more than once. This switching produces the flashing effect. By varying the values within the keyTimes attribute value, you can vary the speed of the flashing.
With that second animation in place, the ad now looks as shown in Figure 09.10.
Figure 09.10. The ad after the addition of the first animation.
At that stage, the overall code resembles the code shown in Listing 9.16.
Listing 9.16 (EditITWrite02.svg)
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/ DTD/svg10.dtd"> <svg width="300" height="150"> <defs> <text id="Ref" >EIW</text> </defs> <rect x="20" y="20" width="200" height="120" style="fill:white; stroke:black; stroke width:0.5;"/> <line x1="20" y1="60" x2="220" y2="60" style="stroke:black; stroke-width:0.5;"/> <line x1="80" y1="60" x2="80" y2="140" style="stroke:black; stroke-width:0.5;"/> <line x1="80" y1="110" x2="220" y2="110" style="stroke:black; stroke-width:0.5;"/> <text style="font-size:24; font-family:Arial, sans-serif; stroke:none; stroke-width:0; fill:red;" x="25" y="120" transform="skewY(-15)" > <tref xlink:href="#Ref"/> </text> <text x="35" y="50" style="font-size:24; fill:red; stroke:none; font-family:Arial, sans-serif;"> EditITWrite.com </text> <text x="85" y="130" style="fill:blue; stroke:blue; font-size:16; font-family:Arial, sans-serif;"> <animate attributeName="visibility" begin="0s" repeatCount="indefinite" dur="5s" values="visible; hidden; visible; hidden; visible;" keyTimes="0s; 0.5s; 1s; 1.5s; 2s;"/> Contact us today! </text> </svg>
The second animation is a rotation of text messages that needs to communicate the three ideas of the domain name: technical editing, knowledge of information technology, and technical writing. Suppose that the three chosen messages are "Editing technical documents precisely", "Understanding IT and adding value" and "Writing clearly to communicate effectively".
Given the space constraints in the chosen design, each of the three messages needs to be split over two lines. The next step is to place the two lines of text in the available box and to make sure that the chosen text fits as static text. The code for the first message is
<text id="Message1"> <tspan x="90" y="80" style="font-size:14; font-family:Arial, sans-serif; fill:red; stroke:none;"> Editing technical </tspan> <tspan x="90" y="100" style="font-size:14; font-family:Arial, sans-serif; fill:red; stroke:none;"> documents precisely </tspan> </text>
Unlike with the RootsPics.com rotating message you saw earlier in this chapter, you must create an id attribute on the <text> element because all the content of the <text> element (the two <tspan> elements and their content) needs to be animated. However, you can use the animation from the RootsPics.com example as an animation visual component:
<animate begin="0s" dur="12s" targetName="Message1" attributeName="visibility" values="visible; hidden; hidden; visible" keyTimes="0s; 4s; 8s; 12s" repeatCount="indefinite" />
Choose the same value for the id attribute as before (although this time it is on a <text> element), and again choose to have three messages. If you want four messages, for example, the values and keyTimes attributes of the animation for Message1 could be modified as follows, assuming that you again want to have each message displayed for four seconds:
<animate begin="0s" dur="16s" targetName="Message1" attributeName="visibility" values="visible; hidden; hidden; hidden; visible" keyTimes="0s; 4s; 8s; 12s; 16s" repeatCount="indefinite" />
To complete the animation, you need to create a <text> element with suitable id attribute and <tspan> elements nested within. Because you know that the code for the first message is correctly positioned and animates correctly, as shown here:
<text id="Message1"> <animate begin="0s" dur="12s" targetName="Message1" attributeName="visibility" values="visible; hidden; hidden; visible" keyTimes="0s; 4s; 8s; 12s" repeatCount="indefinite" /> <tspan x="90" y="80" style="font-size:14; font-family:Arial, sans-serif; fill:red; stroke:none;"> Editing technical </tspan> <tspan x="90" y="100" style="font-size:14; font-family:Arial, sans-serif; fill:red; stroke:none;"> documents precisely </tspan> </text>
you can use that as another visual component, making suitable changes in the id attribute of the <text> element, in the values attribute of the <animate> element and in the content of each of the two <tspan> elements.
To finish the ad, you need to add a link to the http://www.edititwrite.com Web site:
<a xlink:href="http://www.edititwrite.com/ target="new"> ... </a>
After those changes are made, the code looks like the code shown in Listing 9.17.
Listing 9.17 (EditITWrite03.svg)
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/ DTD/svg10.dtd"> <svg width="300" height="150"> <defs> <text id="Ref" >EIW</text> </defs> <a xlink:href="http://www.edititwrite.com/" target="new"> <rect x="20" y="20" width="200" height="120" style="fill:white; stroke:black; stroke-width:0.5;"/> <line x1="20" y1="60" x2="220" y2="60" style="stroke:black; stroke-width:0.5;"/> <line x1="80" y1="60" x2="80" y2="140" style="stroke:black; stroke-width:0.5;"/> <line x1="80" y1="110" x2="220" y2="110" style="stroke:black; stroke-width:0.5;"/> <text style="font-size:24; font-family:Arial, sans-serif; stroke:none; stroke-width:0; fill:red;" x="25" y="120" transform="skewY(-15)" > <tref xlink:href="#Ref"/> </text> <text x="35" y="50" style="font-size:24; fill:red; stroke:none; font-family:Arial, sans-serif;"> EditITWrite.com </text> <text id="Message1"> <animate begin="0s" dur="12s" targetName="Message1" attributeName="visibility" values="visible; hidden; hidden; hidden;" keyTimes="0s; 3.5s; 8s; 12s" repeatCount="indefinite" /> <tspan x="90" y="80" style="font-size:14; font-family:Arial, sans-serif; fill:red; stroke:none;"> Editing technical </tspan> <tspan x="90" y="100" style="font-size:14; font-family:Arial, sans-serif; fill:red; stroke:none;"> documents precisely </tspan> </text> <text id="Message2" visibility="hidden"> <animate begin="0s" dur="12s" targetName="Message2" attributeName="visibility" values="hidden; visible; hidden; hidden;" keyTimes="0s; 4s; 8s; 12s" repeatCount="indefinite" calcMode="discrete"/> <tspan x="90" y="80" style="font-size:14; font-family:Arial, sans-serif; fill:red; stroke:none;"> Understanding IT </tspan> <tspan x="90" y="100" style="font-size:14; font-family:Arial, sans-serif; fill:red; stroke:none;"> so adding value </tspan> </text> <text id="Message3" visibility="hidden"> <animate begin="0s" dur="12s" targetName="Message3" attributeName="visibility" values="hidden; hidden; visible; hidden;" keyTimes="0s; 4s; 8s; 12s" repeatCount="indefinite" calcMode="discrete"/> <tspan x="90" y="80" style="font-size:14; font-family:Arial, sans-serif; fill:red; stroke:none;"> Writing clearly to </tspan> <tspan x="90" y="100" style="font-size:14; font-family:Arial, sans-serif; fill:red; stroke:none;"> communicate well </tspan> </text> <text x="85" y="130" style="fill:blue; stroke:blue; font-size:16; font-family:Arial, sans-serif;"> <animate attributeName="visibility" begin="0s" repeatCount="indefinite" dur="5s" values="visible; hidden; visible; hidden; visible;" keyTimes="0s; 0.5s; 1s; 1.5s; 2s;"/> Contact us today! </text> </a> </svg>
The cycling of the text works beautifully with this code, except that once in each cycle, all three pieces of text are visible together for a short time! That's not what you want! You can see the mess in Figure 09.11.
Figure 09.11. The undesirable overlap of the text messages that occurs briefly once in each 12-second cycle because of the trail-ing-semicolon bug.
The reason for the problem? A trailing semicolon was left in each of the values attributes on the <animate> elements. After the semicolons are taken out (they have been removed from the code download), it all works beautifully. (So much trouble for three semicolons!)
The <set> animation element provides an alternative approach to the <animate> element here. When you use the <set> element, as shown here:
<text id="Message1" visibility="hidden"> <set id="Anim1" begin="0s; Anim3.end" end="Anim1.begin+4s" attributeName="visibility" from="hidden" to="visible" repeatCount="indefinite"/> <tspan x="90" y="80" style="font-size:14; font-family:Arial, sans-serif; fill:red; stroke:none;"> Editing technical </tspan> <tspan x="90" y="100" style="font-size:14; font-family:Arial, sans-serif; fill:red; stroke:none;"> documents precisely </tspan> </text> <text id="Message2" visibility="hidden"> <set id="Anim2" begin="Anim1.end" dur="4s" attributeName="visibility" from="hidden" to="visible"/> <tspan x="90" y="80" style="font-size:14; font-family:Arial, sans-serif; fill:red; stroke:none;"> Understanding IT </tspan> <tspan x="90" y="100" style="font-size:14; font-family:Arial, sans-serif; fill:red; stroke:none;"> so adding value </tspan> </text> <text id="Message3" visibility="hidden"> <set id="Anim3" begin="Anim2.end" dur="4s" attributeName="visibility" from="hidden" to="visible"/> <tspan x="90" y="80" style="font-size:14; font-family:Arial, sans-serif; fill:red; stroke:none;"> Writing clearly to </tspan> <tspan x="90" y="100" style="font-size:14; font-family:Arial, sans-serif; fill:red; stroke:none;"> communicate well </tspan> </text>
the sequence of animations plays exactly as you want, with no ugly transitory overlap of text as the second and subsequent cycles of animation started. So you have two solutions to the problem: Remove the trailing semicolons, or use the <set> element to make the animation.
A banner ad with scrolling text
In Chapter 8, I showed you a text window with scrolling text. In that example, you create smoothly scrolling text; on this occasion, however, for another possible banner ad for EditITWrite.com, suppose that you want to have scrolling text in a traditionally sized banner ad that stops long enough for users to have a chance to read the text.
The finished ad, during part of its animation, looks like the one shown in Figure 09.12.
Figure 09.12. The EditITWrite.com banner ad during part of its animation.
For most of the earlier examples, the precise size of the SVG image hasn't mattered too much; for a banner ad, however, the precise size matters immensely. It is 468 by 60 pixels, and that's that. So that's the dimension you must work with:
Listing 9.18 (EIWBannerAd01.svg)
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/ DTD/svg10.dtd"> <svg width="468" height="60"> </svg>
First, you split the available space into two rectangles: the top one with 35 pixels (for two lines of scrolling text) and the lower one with 25 pixels for a static name. In the bottom rectangle, you create a filter effect that uses the background image, so the first rectangle (the background), which has a linear gradient across it, is used to provide the input to that filter process. The other two rectangles cover it completely, so you do not see anything other than its effect within the filter:
<rect x="0" y="0" width="468" height="60" style="fill:url(#MyBlueGradient); opacity:0.5;"/> <rect x="0" y="0" width="468" height="35" style="fill:black; stroke:none;"/> <rect x="0" y="35" width="468" height="25" style="fill:#000099; filter:url(#Turbulence1); stroke:none;"/>
As shown in the preceding example, visual components from earlier chapters are available for reuse. Make use of a linear gradient that was used earlier; in this case, with the first stop-color property adapted to give a much bluer effect. Because the linear gradient is, by virtue of being applied to the background image, an input to the <feTurbulence> filter primitive, the whole of the appearance in the lower visible rectangle has an abstract bluish effect in it.
You also reuse the skewed text EIW in the ad, placing it far to the right. If you start using skew effects, you might find that it is invisible when you first try to use it. Intuitively, from looking at Figure 09.12, you might expect to place the EIW skew text at perhaps (410,40). If you try that method, however, you don't see the text. It is hidden off the top of your screen, as you can confirm if you try coordinates like those and then zoom out and pan around to find the text. You should have a large outer <svg> element to allow for "losing" elements when you first experiment with skewing (as in Figure 09.13).
Figure 09.13. An EditITWrite.com banner ad before the addition of the scrolling text.
Listing 9.19 (EIWBannerAd02.svg)
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/ DTD/svg10.dtd"> <svg width="468" height="60"> <defs> <linearGradient id="MyBlueGradient" gradientUnits="userSpaceOnUse" x1="90" y1="50" x2="400" y2="500" > <stop offset="10%" style="stop-color:#000066"/> <stop offset="40%" style="stop-color:#FFFF00"/> <stop offset="75%" style="stop-color:#9999FF"/> </linearGradient> <filter id="Turbulence1" in="SourceImage" filterUnits="userSpaceOnUse" > <feTurbulence in="BackgroundImage" type="turbulence" baseFrequency="0.01" numOctaves="1" seed="0" > </feTurbulence> </filter> </defs> <rect x="0" y="0" width="468" height="60" style="fill:url(#MyBlueGradient); opacity:0.5;"/> <rect x="0" y="0" width="468" height="35" style="fill:black; stroke:none;"/> <rect x="0" y="35" width="468" height="25" style="fill:#000099; filter:url(#Turbulence1); stroke:none;"/> <text x="5" y="55" style="font-family:'Times New Roman', serif; font-size:20; stroke:white; fill:white;"> EditITWrite.com </text> <text style="font-size:24; font-family:Arial, sans-serif; stroke:red; stroke-width:0; fill:red;" x="395" y="140" transform="skewY(-15)" > EIW </text> </svg>
Plan to reuse parts of the scrolling text window from Chapter 8 because it is a useful visual component, after all. Make some adjustments to how it works, however, because only two lines of text can be displayed at one time.
First, you create a nested <svg> element that covers the black rectangle:
<svg x="0" y="0" width="468" height="35"> </svg>
Because all the scrolling text is nested within that <svg> element, the text cannot be visible outside it, even if you make a coding mistake.
Although you use the scrolling text window, adapting it for use here is a more significant task than most of the adaptations of visual components you have looked at so far. The first difficulty is that the text in the original is black, which does not show up well against the black background here, so you have to change the text color to yellow for the heading or white for ordinary text. The original had one smooth animation, although here you want stepped animation with two lines of text scrolling into view and then stopping long enough for them to be read. To achieve that effect, you use a values attribute in the <animate> element. To achieve the pauses in scrolling, you simply make two successive values the same so that there is no movement and therefore the pause you want:
<animate attributeName="y" begin="0s" dur="16s" values="50; 15; 15; -55; -55; -130; -130 " repeatCount="indefinite"/>
Suppose that you want to give a clear visual impression of text scrolling up by adding blank lines. However, a <tspan> element with no text in it seems to be ignored, at least by the Adobe SVG Viewer. So, you make use of the invisibility of black text against a black background and add two lines between each frame of text, which have the word blank in black lettering, giving an adequate visual impression of blank lines.
The text in the original scrolling box was font size 10; on this occasion, assume that 12 is more readable as white text against a black background.
The changes to the original scrolling box, therefore, were to change the fill color of all the <tspan> elements, change the font size except on the heading text, substitute a values attribute in the <animate> element, and reduce the dur attribute of the animation to correspond with the lesser amount of text than in the original. Although you have to make many adaptations to the original visual component, it still saves time compared to coding it all from scratch.
Listing 9.20 (EIWBanner03.svg)
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/ DTD/svg10.dtd"> <svg width="468" height="60"> <defs> <linearGradient id="MyBlueGradient" gradientUnits="userSpaceOnUse" x1="90" y1="50" x2="400" y2="500" > <stop offset="10%" style="stop-color:#000066"/> <stop offset="40%" style="stop-color:#FFFF00"/> <stop offset="75%" style="stop-color:#9999FF"/> </linearGradient> <filter id="Turbulence1" in="SourceImage" filterUnits="userSpaceOnUse" > <feTurbulence in="BackgroundImage" type="turbulence" baseFrequency="0.01" numOctaves="1" seed="0" > </feTurbulence> </filter> </defs> <rect x="0" y="0" width="468" height="60" style="fill:url(#MyBlueGradient); opacity:0.5;"/> <rect x="0" y="0" width="468" height="35" style="fill:black; stroke:none;"/> <rect x="0" y="35" width="468" height="25" style="fill:#000099; filter:url(#Turbulence1); stroke:none;"/> <svg x="0" y="0" width="468" height="35"> <text> <tspan x="5" y="50" style="font-size:14; font-family:courier, monospace; stroke:#FFFF00; fill:#FFFF00"> <animate attributeName="y" begin="0s" dur="16s" values="50; 15; 15; -55; -55; -130; -130 " repeatCount="indefinite"/> EditITWrite.com </tspan> <tspan x="5" dy="1em" style="font-size:12; font-family:Arial, sans-serif; fill:white; stroke:white;"> EIW can provide many of your technical writing needs. </tspan> <tspan x="5" dy="2em" style="font-size:12; font-family:Arial, sans-serif;"> blank </tspan> <tspan x="5" dy="2em" style="font-size:12; font-family:Arial, sans-serif; "> blank </tspan> <tspan x="5" dy="1em" style="font-size:12; font-family:Arial, sans-serif; fill:white; stroke:white;"> We have expertise in XML, SVG, Java, XHTML, JavaScript, </tspan> <tspan x="5" dy="1em" style="font-size:12; font-family:Arial, sans-serif; fill:white; stroke:white;"> Lotus Domino and other Web technologies. </tspan> <tspan x="5" dy="2em" style="font-size:12; font-family:Arial, sans-serif;"> blank </tspan> <tspan x="5" dy="2em" style="font-size:12; font-family:Arial, sans-serif; "> blank </tspan> <tspan x="5" dy="1em" style="font-size:12; font-family:Arial, sans-serif; fill:white; stroke:white;"> We can translate from German, French, Spanish, </tspan> <tspan x="5" dy="1em" style="font-size:12; font-family:Arial, sans-serif; fill:white; stroke:white;"> Japanese and other languages into English. </tspan> </text> </svg> <text x="5" y="55" style="font-family:'Times New Roman', serif; font-size:20; stroke:white; fill:white;"> EditITWrite.com </text> <text style="font-size:24; font-family:Arial, sans-serif; stroke:red; stroke-width:0; fill:red;" x="395" y="140" transform="skewY(-15)" > EIW </text> </svg>
Figures 09.14, 09.15, and 09.16 show the three phases of text in the banner ad for EditITWrite.com.
Figure 09.14. The first bit of text shown in the scrolling banner ad for EditITWrite.com
Figure 09.15. The second bit of text shown in the scrolling banner ad for EditITWrite.com
Figure 09.16. The third bit of text shown in the scrolling banner ad for EditITWrite.com
In this chapter, I have showed you how to combine several parts of the functionality provided by SVG, and I hope that you have begun to gain a feel for the power that SVG provides when these basic visual components are combined. In Chapter 10, "Embedding SVG in HTML or XHTML Pages," you go on to look at how you can embed the SVG images you want to use in an HTML or XHTML Web page.
| CONTENTS | |
EAN: 2147483647
Pages: 26