Chapter 16. Building Your SVG Skills
 | CONTENTS |  |
In this chapter:
- Combining Your Skills
- Interactive SVG
- SVG and ECMAScript
- An SVG Mindset
- Clipping Paths
Combining Your Skills
I hope that in this book I have communicated to you something of the power and flexibility of SVG and also whetted your appetite to learn more about SVG. I have been able to give you, in the space available, only an introduction to some of the more commonly used facets of SVG.
As I have introduced you to the concept of SVG visual components, I hope that you have appreciated that SVG has enormous flexibility to allow you to express your own creative instincts. That creative potential can be fully realized, however, only when you fully understand SVG.
In earlier chapters, I have introduced you to what I anticipate to be typical uses of SVG images on the Web as navigation bars, buttons, animations, banners, and banner ads, for example. I have introduced you to many SVG elements and attributes, but, inevitably, haven't been able to cover everything.
I have tried to split topics up in ways I hope will help you grasp how SVG han-dles that particular aspect. Yet the likely way for you to produce attractive SVG graphics is, in practice, to combine many of the techniques that have been presented to you individually.
Interactive SVG
SVG gives enormous scope to incorporate interactivity and animation. I have shown you interactions and animations using simple, often individual, graphical elements and shapes. In production settings, you might use more complex, perhaps grouped, graphics shapes and animate those on complex paths. The techniques you have been shown are time-based and event-based visual components that you can, and should, experiment with. Combining those visual components is what allows you to release your creative instincts through SVG.
SVG and ECMAScript
In this book, I have focused primarily on what SVG is capable of: using the declarative XML-compliant syntax alone. However, a huge area for potential development is the combination of ECMAScript (JavaScript) with SVG to produce animations or programmatic interactivity that SVG is incapable of producing alone.
JavaScript can dynamically alter characteristics of an SVG document by altering the Document Object Model, or DOM, for the document. In addition to allowing you to produce animations that closely resemble those produced using the SVG animation elements, you can create powerful interactions that declarative SVG cannot produce.
One useful tutorial site on using JavaScript with SVG is at http://www.kevlindev.com.
An SVG Mindset
SVG is different from any Web graphics format that has ever been available. If you are to make the best use of SVG, therefore, you have to reex-amine many thought patterns you take for granted. Out goes the notion, for example, that you can display only 256 colors in many of your Web images. With the arrival of SVG, you have no reason not to have 24-bit color.
When you are creating SVG, you need a mindset that is half designer and half programmer. Or, perhaps more accurately, you need a mindset that is fully designer and fully programmer. I must admit that when I first started using SVG, I found it difficult to think of the design aspects of a Web image or Web page while also trying to struggle through the exploration of how SVG syntax worked. You might find the same thing to be true.
The cure for that semifrozen mindset is practice. Just experiment with the various techniques I have shown you. Take a look at some of the existing graphics you have created, and try to imagine how you might create them, or something similar, in SVG. As you work your way toward those visual targets, you will gradually find perhaps with moments of sudden insight that you are gaining progressively greater control over the SVG images you are producing.
Creating and using visual components
Twenty years or so ago, computer programmers normally developed mono-lithic programs, a little like the way many graphics designers now produce a Web image. I am not trying to insult or provoke anyone I am simply saying that graphics designers often work in a way that computer programmers have now discarded, partly because the work is, for the programmer, inefficient or cannot be updated frequently or easily.
You produce a final image that works, but changing it or updating it, for example, is or can be a major task. Just as programmers took some time to adapt to the arrival of object-oriented programming techniques, with the exception of a few far-sighted pioneers not immediately grasping the potential, the same situation might be true with SVG graphics. To conceive of visual components that are reusable demands a change in mindset, which takes time to work through the graphic design profession.
Visualize the image you want to create, and then break that image down into its possible component parts. For each of those components, work out how you would create that visual component. After you have created the individual components, you should be able to follow the earlier examples of putting together these types of components.
Although this approach might seem strange at first, it isn't too different from the way you perhaps work in a conventional graphics package. Rather than make a particular choice from a Photoshop or Paint Shop Pro menu and adjust its settings, you choose an SVG element, or combination of elements, that produce a similar effect.
This technique might feel different because the visual components you are creating in SVG feel so much like that like visual components you cre-ate whereas the familiar menus of your favorite graphics program feel comfortable to you. But you are using or creating visual components. Think a little about the effects in your favorite graphics program.
Embedding SVG in XML
In Chapter 10, "Embedding SVG in HTML or XHTML Pages," I discussed how to embed an SVG image within an HTML or XHTML document. However, the characteristics of XML-based languages mean that they can be mixed if a particular syntax form, XML namespaces, is used correctly. The W3C Recommendation that defines this concept is the Namespaces in XML Recommendation; the full text is at http://www.w3.org/TR/1999/REC-xml-names-19990114.
To use SVG in this way, you need to make clear that all the SVG elements you have become familiar with are associated with a Uniform Resource Identifier (URI), specifically http://www.w3.org/2000/svg. You do that by using a namespace declaration that is a special attribute with the following syntax:
xmlns:svg="http://www.w3.org/2000/svg">
In the following example, I declared the SVG namespace in the outer <xmml:document> element. Thereafter, all SVG elements have an svg prefix separated from the element name by a colon.
Listing 16.1 (Namespaces.xml)
<?xml version="1.0" standalone="no"?> <xmml:document xmlns:xmml="http://www.xmml.com/" xmlns:svg="http://www.w3.org/2000/svg"> <svg:svg width="500" height="400" > <svg:g> <svg:animateTransform attributeName="transform" type="rotate" values="0 150 100; 360 150 100" begin="0s" dur="10s" /> <svg:rect x="1" y="1" width="298" height="198" style="stroke:red; stroke-width:2; fill:none;"/> <svg:rect x="50" y="50" width="200" height="100" style="fill:#EEEEEE; stroke:blue;"/> </svg:g> </svg:svg> </xmml:document>
Thus, <svg:svg> is the familiar <svg> element but in a more specific identity that, together with the namespace declaration, allows SVG elements to be mixed with elements from other XML namespaces that would each have their own namespace URI and namespace prefix. When you are using namespace prefixes correctly, the XML processor knows which element belongs to which namespace, or, if you prefer, to which XML-based language the element belongs.
The X-Smiles multi-namespace browser, as mentioned in Chapter 1, "The Basic SVG Tool Set," allows SVG to be mixed with other XML namespaces, such as for the Extensible Stylesheet Language Formatting Objects (XSL-FO), Extended Forms, XForms, and Synchronized Multimedia Integration Language (SMIL).
The use of SVG with one or more other XML namespaces can be expected to increase significantly during the next couple of years. For example, RealPlayer seems to be adopting SMIL; therefore, SVG images can be integrated seamlessly with this type of multimedia presentations.
Similarly, SVG images can be displayed on the Web using XSL-FO. Some simple examples are online at http://www.xsl-fo.com/. To view these types of SVG images within XSL-FO, you need to use the X-Smiles browser or the Antenna House XSL Formatter (http://www.antennahouse.com/).
Both the X-Smiles browser and the Antenna House XSL Formatter are under continuing development, so I have not included any code at this stage because details might change during the period preceding publication. However, if this area interests you, I encourage you to visit both Web sites and download the processors to experiment. If you have a particular interest in XSL-FO, take a look at the XSL-FO mailing list, at http://www.yahoogroups.com/group/XSL-FO/.
Understanding SVG and internationalization
In the introduction to this book, I mentioned that SVG had advantages in the area of the internationalization of Web sites. Take a look at the basics of the technique that makes SVG useful in this context.
Suppose that you want to create a site for SVGenius.com for speakers of English, German, and French. The code in Listing 16.2 produces a simple multilingual logo with one of four appearances onscreen, depending on the language settings in the SVG viewer or Web browser.
Listing 16.2 (International02.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> <rect x="50" y="50" rx="5" ry="5" width="200" height="80" style="fill:#CCCCFF; stroke:#000099"/> <text x="90" y="80" style="fill:#000099; stroke:#000099; font-size:18; font-family:Arial, sans-serif;"> SVGenius.com </text> <switch> <text x="120" y="110" style="stroke:#000099; fill:#000099; font-size:20;" systemLanguage="en"> Hello! </text> <text x="110" y="110" style="stroke:#000099; fill:#000099; font-size:20;" systemLanguage="fr"> Bonjour! </text> <text x="100" y="110" style="stroke:#000099; fill:#000099; font-size:20;" systemLanguage="de"> Guten Tag! </text> <text x="52" y="110" style="stroke:#000099; fill:#000099; font-size:12;"> Sorry, we don't speak your language. </text> </switch> </svg>
The SVG <switch> element indicates that no more than one of the elements nested within it is displayed. If you step through the options one at a time, you see that the first option is systemLanguage="en", meaning English. If the system language is English, the greeting contained within that <text> element is displayed and the other options within the <switch> element are ignored.
However, if systemLanguage is not English, the next <text> element is evaluated. If it has a value of fr (French), the greeting Bonjour! is displayed. If that fails, systemLanguage is evaluated on the third <text> element, and if systemLanguage is set for German, the greeting Guten Tag! is displayed.
A <switch> element should have a default setting. In this case, the message Sorry, we don't speak your language is displayed if none of the three earlier <text> elements nested within the <switch> element matches the current system language.
At the time this book was written, the Adobe SVG Viewer had not implemented the systemLanguage attribute, so the figures produced from Listing 16.2 show the Batik SVG Viewer. If you want to test the code, choose Language from the Options menu. A window is displayed that allows you to add or remove system languages, for the purposes of the Batik viewer. You might have chosen more than one language. For example, if you set French and German, the French greeting is displayed because it is the first element within the <switch> element that satisfies the condition. All later elements, including the one with systemLanguage="de", are ignored.
The Batik setting for English seems idiosyncratic to me. It uses "en" to indicate English-US, which should be "en-us". Making an allowance for that, if you set the language to English-US, the greeting shown in Figure 16.01 is displayed.
Figure 16.01. The greeting displayed when the system language is English.
If you alter the system language to include German but neither "en" nor "fr" (French), the greeting that is displayed is the one shown in Figure 16.02.
Figure 16.02. The greeting displayed when the system language is French.
Finally, if you change the system language to German, you see the output shown in Figure 16.03.
Figure 16.03. The greeting displayed when the system language is German.
In practice, of course, the system language is set depending on the user's location and personal language preferences, and they see the greeting in only their own language.
Similarly, if you want to create internationalized animated graphics, you can apply the same techniques. For example, you can create a trilingual ticker tape message using code something like this:
Listing 16.3 (International03.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"> <rect x="0" y="0" width="800" height="100" style="fill:#CCFFCC;"/> <svg x="166" y="20" width="468" height="60"> <rect x="0" y="0" width="100%" height="100%" style="fill:white; stroke:none;"/> <a xlink:href="mailto://Consulting@SVGenius.com"> <switch> <text x="700" y="40" style="stroke:green; fill:green; font-family:Courier, monospace; font-size:20; font-weight:normal;" systemLanguage="en"> SVGenius.com offers consulting services on SVG. Click here to contact us. <animate attributeName="x" from="600" to="-1000" begin="0s" dur="20s" repeatCount="indefinite"/> </text> <text x="700" y="40" style="stroke:green; fill:green; font-family:Courier, monospace; font-size:20; font-weight:normal;" systemLanguage="fr"> SVGenius.com provides consulting services on SVG. Click here to contact us. <animate attributeName="x" from="600" to="-1000" begin="0s" dur="20s" repeatCount="indefinite"/> </text> <text x="700" y="40" style="stroke:green; fill:green; font-family:Courier, monospace; font-size:20; font-weight:normal;" systemLanguage="de"> SVGenius.com provides consulting services on SVG. Click here to contact us. <animate attributeName="x" from="600" to="-1000" begin="0s" dur="20s" repeatCount="indefinite"/> </text> </switch> </a> <rect x="0" y="0" width="468" height="60" style="stroke:#009900; stroke-width:2; fill:none;"/> </svg> </svg>.03
Unfortunately, I can't show you the various output from the system language settings. The Adobe SVG Viewer doesn't yet display SVG on the basis of the value of the systemLanguage attribute, and Batik is limited in its animation capabilities. Hopefully, by the time you read this book, you can run the code in one or both of those SVG viewers.
Clipping Paths
Finally, I want to show you a technique using SVG clipping paths, which you can use to great creative effect. What a clipping path does is similar to taking a pair of scissors and cutting out a shape. SVG allows you to "cut out" noncontinuous shapes, such as text.
The final clipping path looks like the one shown in Figure 16.04.
Figure 16.04. An SVG clipping path used with two bitmap images to create interesting text.
If you look closely at the fill of the lettering, you might recognize that the left part of the text is filled with an image of a sunset, of which you see the full version in Figure 16.05.
Figure 16.05. The sunset bitmap used for the left part of the clipping path shown in Figure 16.04.
The right part of the text is filled with the painting shown in Figure 16.06.
Figure 16.06. A painting of a seal, used as the fill for the right part of the clipping path image shown in Figure 16.04.
Take a look at how this is done:
Listing 16.4 (Clipping01.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> <g id="ClipElement"> <clipPath id="Clip1"> <text x="20" y="80" class="Clipstyle">Clipping Path</text> </clipPath> </g> <style type="text/css"> <![CDATA[ .Clipstyle {stroke:#FF0000; stroke-width:3; font-family: Verdana,Arial, sans-serif; font-size:72; font-weight:bold;} ]]> </style> </defs> <rect x="0" y="0" width="800" height="100" style="fill:black;"/> <svg x="80" width="600" height="100"> <g id="bitmapfill"> <image x="10" y="20" width="250" height="100" xlink:href="Sunset.jpg" style="clip-path:url(#Clip1)" /> <image x="260" y="0" width="380" height="100" xlink:href="SealCropped.jpg" style="clip-path:url(#Clip1)" /> </g> </svg> </svg> Let me walk you through that code, step by step. Much of it happens within the <defs> element:
<defs> <g id="ClipElement"> <clipPath id="Clip1"> <text x="20" y="80" class="Clipstyle">Clipping Path</text> </clipPath> </g> <style type="text/css"> <![CDATA[ .Clipstyle {stroke:#FF0000; stroke-width:3; font-family: Verdana, Arial, sans-serif; font-size:72; font-weight:bold;} ]]> </style> </defs> The business end is the <clipPath> element, which you see in the early part of the <defs> element. The <clipPath> element contains the SVG elements to which the image that is being clipped will be applied. In this instance, the images will be applied to a <text> element that contains the text Clipping Path. Notice that the <text> element has a Clipstyle class attribute.
The second part of the content of the <defs> element is a <style> element that, in a CDATA section, describes the font family, font size, or font weight, for example, for the text element contained within the <clipPath> element. The ".Clipstyle" CSS selector ensures that the declarations that follow are applied to the text.
How does the visual appearance of the sunset and seal images get into the text? That happens within the main body of the SVG document:
<g id="bitmapfill"> <image x="10" y="20" width="250" height="100" xlink:href="Sunset.jpg" style="clip-path:url(#Clip1)" /> <image x="260" y="0" width="380" height="100" xlink:href="SealCropped.jpg" style="clip-path:url(#Clip1)" /> </g>
The first <image> element indicates that, starting at a position of (10,20) and with a width of 250, the referenced image, Sunset.jpg, should be displayed with a clip-path property of url(#Clip1), which references the <clipPath> element you saw a little earlier in the <defs> element.
The sunset image is displayed as far as 260 pixels across (a starting position of 10, specified by the x attribute plus a 250-pixel width).
Then the second <image> element comes into play. That image starts at x="260". In other words, it abuts nicely the first image. If you look carefully at Figure 16.04, you can see the join in the first vertical line of the n of Clipping.
The left part of the text has the sunset image clipped to the shape of the text defined in the <clipPath> element. In the right part of the text. the seal image is clipped to the shape of the latter part of the text.
Suppose that you want to reposition the image so that the yellowish color of the sunset appears a little lower:
Listing 16.5 (Clipping02.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> <g id="ClipElement"> <clipPath id="Clip1" opacity="0.1"> <text x="20" y="80" class="Clipstyle">Clipping Path</text> </clipPath> </g> <style type="text/css"> <![CDATA[ .Clipstyle {stroke:#FF0000; stroke-width:3; font-family: Verdana,Arial, sans-serif; font-size:72; font-weight:bold;} ]]> </style> </defs> <rect x="0" y="0" width="800" height="100" style="fill:black;"/> <svg x="80" width="600" height="100"> <g id="bitmapfill"> <image x="10" y="40" width="250" height="100" xlink:href="Sunset.jpg" style="clip-path:url(#Clip1)" /> <image x="260" y="0" width="380" height="100" xlink:href="SealCropped.jpg" style="clip-path:url(#Clip1)" /> </g> </svg> </svg> You simply alter the y attribute of the first <image> element from 20 to 40, and the image moves down within the clipping path by 20 pixels.
If you want to reverse the images, simply swap over the filenames in the two <image> elements.
Clearly, the use of bitmaps in text gives you great creative potential.
To see a similar image online, take a look at http://www.svgspider.com/Page04.svg. The clipping path is displayed on a background whose color you can animate.
Speaking of animations, if the <image> element has an x attribute, there's nothing to stop you from animating it, right?
Listing 16.6 (Clipping03.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> <g id="ClipElement"> <clipPath id="Clip1" opacity="0.1"> <text x="20" y="80" class="Clipstyle">Clipping Path</text> </clipPath> </g> <style type="text/css"> <![CDATA[ .Clipstyle {stroke:#FF0000; stroke-width:3; font-family: Verdana,Arial, sans-serif; font-size:72; font-weight:bold;} ]]> </style> </defs> <rect x="0" y="0" width="800" height="100" style="fill:black;"/> <svg x="80" width="600" height="100"> <g id="bitmapfill"> <image x="10" y="20" width="250" height="100" xlink:href="SealCropped.jpg" style="clip-path:url(#Clip1)" /> <image x="260" y="20" width="380" height="100" xlink:href="Sunset.jpg" style="clip-path:url(#Clip1)" > <animate attributeName="x" from="10" to="260" begin="2s" dur="4s" fill="freeze" repeatCount="1"/> </image> </g> </svg> </svg> Take a look at those scudding clouds blowing on a breeze within your text! Beautiful! Be sure to run the code to get an idea of what is possible.
SVG is enormously powerful. I hope that this glimpse of what is possible, such as this animated clipping path example, makes you want to dive in and experiment. The water is lovely!
| CONTENTS | |
EAN: 2147483647
Pages: 26