Designing SVG Web Graphics
|
Scalable Vector Graphics is a dynamic 2D graphics format that enables designers to create graphics elements using XML. The unique functionality of SVG to render visual elements is creating new graphics horizons for design on the internet. Designing SVG Web Graphics presents real-world examples of design tasks (such as creating a logo, navigation bar, or even a full web page) embedded within the strict XML aspects of SVG. In doing so, the author pulls both graphic designers and web developers into a new direction of unprecedented Web development. 777 | |||||||||||||||||||||
Copyright
About the Author
About the Tech Editors
Acknowledgments
Introduction
SVG in Perspective
The Key Web Design Principles Apply
Why Was SVG Needed and Created?
Limitations of Bitmap Graphics
The Birth of SVG
How Is SVG Different?
More SVG Capabilities
Restyle Your Graphics or Web Site Using CSS
SVG As Visual Components
Synergy with Other XML Technologies
SVG Limitations
Part I: Getting Started with SVG
Chapter 1. The Basic SVG Tool Set
Creating and Editing SVG
Text Editors
Vector Drawing Packages
SVG Viewers
Chapter 2. SVG Document Overview
Syntax
Structure of an SVG Image (Document)
The Preliminaries of an SVG Document
The <svg> Element
Nested SVG Elements
The <g> Element
Some Basic SVG Elements
Painter's Model
SVG Coordinate Systems
Fonts
Part II: Putting SVG to Work
Chapter 3. Creating Static Graphics Elements
Essential Building Blocks
The <rect> Element
A Simple Square
The <line> Element
The <circle> Element
The <ellipse> Element
Combining Ellipses
The <polyline> Element
The <polygon> Element
The <path> Element
Chapter 4. Using Text in SVG
Text Basics
Text in SVG
The <text> Element
The <tspan> Element
The <tref> Element
Displaying Text on a Path
Chapter 5. Creating Navigation Bars
Navigation Bars
Linking Web Pages Using SVG
Adding Mouseover Effects
Simple Navigation Bars
Text Navigation Bars
Tabbed Navigation Bars
Using <svg> Elements to Aid Positioning
Chapter 6. Creating SVG Gradients
What Are Gradients?
The <linearGradient> Element
The <radialGradient> Element
SVG Gradients
Multiple <stop> Elements
SVG Gradients at Work
SVG Patterns
Chapter 7. Using SVG Filters
Why Use Filters
Using SVG Filters
The Range of SVG Filters
Examples Using SVG Filters
Chapter 8. Animation: SVG and SMIL Animation
Basic Animations
SVG As an Animation Grammar
Basic Attributes of an Animation
Applying SVG Animation to SVG Static Elements
More Complex Animations
SVG, SMIL Animation, and SMIL 2.0
The <animate> Element
The <set> Element
The <animateMotion> Element
The <animateColor> Element
The <animateTransform> Element
Rotation Using <animateTransform>
Simple Sample Animations
Chapter 9. Creating Logos and Banner Ads
Creating Logos
Creating Banner and Other Types of Ads in SVG
Chapter 10. Embedding SVG in HTML or XHTML Pages
SVG and HTML
Using the <embed> Element
Adding Scroll Bars to SVG Web Pages
Using the <object> Element
Displaying Alternative Text or Images
Chapter 11. Creating Interactive SVG Graphics
Defining Interactive
SVG Events
Sample SVG Images and Components Using Interactivity
Zooming, Panning and Scrolling SVG Images
Chapter 12. Creating a Simple SVG Web Site
Creating an Entire Web Page with SVG
Creating Web Pages with a "Graphics" Language
Who Might Use SVG As a Web Authoring Tool?
Creating SVG Web Pages
Some Sample Page Layouts
Chapter 13. Designing SVG for Use with CSS
Cascading Style Sheets
Planning Your Text and Graphics
Sample Design: SVG and CSS
Chapter 14. When Things Go Wrong
Minimizing Errors
Avoiding Problems by Using Good Coding Practice
Handling Common Error Symptoms
Diagnosing and Solving Problems
Part III: Looking Ahead
Chapter 15. Planning and Building SVG Components
Visual Components Defined
Envisioning XML and Visual Components
Understanding the <svg> Element and Visual Components
Using Components that Save Time and Work
Creating a Plug-In Component and Making It Mobile
Building a Portfolio of Visual Components
Chapter 16. Building Your SVG Skills
Combining Your Skills
Interactive SVG
SVG and ECMAScript
An SVG Mindset
Clipping Paths
Chapter 17. The Future of SVG
Where Does SVG Fit in a Web Graphics Strategy?
SVG and Macromedia Flash
The Future of SVG
SVG As a Web Authoring Tool
Creating SVG Dynamically
Part IV: Appendices
Appendix A. Online SVG and XML Resources
SVG at the W3C
SVG Viewers
SVG Tools
SVG Tutorials and Demos
SVG References
Server-Side SVG
XML Resources
Appendix B. SVG Glossary
Appendix C. What's on the Web Site
SVGSpider
Source Files
Feedback
Copyright
All rights reserved. No part of this book shall be reproduced, stored in a retrieval system, or transmitted by any means electronic, mechanical, photocopying, recording, or other-wise without written permission from the publisher. No patent liability is assumed with respect to the use of the information contained herein. Although every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions. Neither is any liability assumed for damages resulting from the use of the information contained herein.
Library of Congress Catalog Card Number: 20-01090517
Printed in the United States of America
First Printing: September 2001
05 04 03 02 01 7 6 5 4 3 2 1
Interpretation of the printing code: The rightmost double-digit number is the year of the book's printing; the rightmost single-digit number is the number of the book's printing. For example, the printing code 01-1 shows that the first printing of the book occurred in 2001.
Trademarks
All terms mentioned in this book that are known to be trademarks or service marks have been appropriately capitalized. New Riders Publishing cannot attest to the accuracy of this information. Use of a term in this book should not be regarded as affecting the validity of any trademark or service mark.
Warning and Disclaimer
Every effort has been made to make this book as complete and as accurate as possible, but no warranty of fitness is implied. The information provided is on an "as is" basis. The authors and the publisher shall have neither liability nor responsibility to any person or entity with respect to any loss or damages arising from the information contained in this book.
Credits
Publisher
David Dwyer
Associate Publisher
Al Valvano
Executive Editor
Steve Weiss
Acquisitions Editor
Theresa Gheen
Development Editor
Victoria Elzey
Technical Editors
ElShaddai Edwards
Richard F. Cecil
Product Marketing Manager
Kathy Malmloff
Book Packaging
Justak Literary Services
Copy Editor
Rebecca Whitney
Cover Designer
Aren Howell
Interior Designers
Wil Cruz
Rebecca Harmon
Compositor
Bill Hartman
Proofreader
Lara SerVaas
Indexer
Sherry Massey
Dedication
To the memory of my late father, George Alec Watt, a very special human being.
About the Author
Andrew Watt is an independent Web consultant with an interest and expertise in XML and SVG who created the world's "first" SVG-only Web site, accessible at http://www.SVGSpider.com/default.svg. He is a contributing author to Platinum Edition Using XHTML, XML and Java 2, XHTML By Example (published by Que), Professional XSL, Professional XML (2nd Edition), and Professional XML Meta Data (published by Wrox).
Andrew first viewed the Web using a text-only Lynx browser and has dark memories of the dullness of the Web before bitmap graphics. Having tasted the power of SVG, he is an enthusiastic evangelist for the advantages of SVG over bitmap graphics and saw in a flash a serious competitor to proprietary vector formats, particularly for the XML-based Web.
When he wrote his first programs in 6502 assembly language, he failed to see that his interest in graphics would one day merge creatively with his interest in programming. With the arrival of SVG, the day of the visually creative programmer is here as well as the day of the programmatically literate Web designer.
About the Tech Editors
ElShaddai Edwards is a Product Manager at Jasc Software, the developers of Paint Shop Pro and WebDraw. Since joining Jasc in 1996, he has managed a wide range of digital imaging software as well as sales and marketing programs responsibilities that have given him significant understanding of the people who want and need the company's products. ElShaddai is responsible for the strategic market and product planning of the company's Web Publishing product line.
Before his work at Jasc, ElShaddai held positions in the product development and marketing departments at Coda Music Technology. He holds a degree in music from Carleton College and has been active in several local orchestras.
Richard F. Cecil is a visual designer and producer at hesketh.com/inc. in Raleigh, North Carolina. In his role as Visual Designer, he draws on his understanding of website composition, typography, usability, optimization techniques, and current graphic design trends. He works closely with programmers, other visual designers, and information architects to design sites that are eye catching, elegant, and extensible.
Working at hesketh.com, Rick is confronted with many of the same challenges most web designers face: making sites that are user-friendly and visually appealing while working within the technological constraints of Web browsers and markup. He believes that SVG is a powerful and simple solution to many of those challenges, a technology that builds on the future of markup to meet the needs of the present day.
Rick has written for Digital Web magazine and can be reached at rick@hesketh.com.
Acknowledgments
I want first to thank Tom Arah, whose prophetic 1999 article on the then embryonic SVG so excited my interest that I couldn't resist dabbling with the emerging child that is SVG. Thanks, Tom.
I also want to thank the members of the SVG-Developers mailing list. The many discussions there are a great source of interest and education for me. I guess that it is invidious to single out individuals, but I particularly appreciate the patience and assistance of the editor of the SVG Recommendation, Jon Ferraiolo. The input on the list from Jon and from Chris Lilley, the chair of the W3C SVG Working Group, showed how open interaction with W3C can work well. Thanks, too, to Wade, Kevin, Stefan, Tobi, Michael, and all the others. You are a great bunch.
And I wouldn't want to forget to thank the young lady who posed the question to me, "You wouldn't remotely be interested in writing this, would you?" in a slightly different context. And the rest, as they say, is history. Thanks, Victoria!
Oh, and I need to thank Victoria Elzey again for being Development Editor on this project. The best development editors know how to handle their authors. Victoria has that art off to perfection.
I also want to thank the technical editors ElShaddai Edwards and Rick Cecil for their constructive comments and for spotting those little "slips" that it is all too easy for an author to make.
Thanks too to Steve Weiss, Executive Editor, and Theresa Gheen, Acquisitions Editor, for doing all the things that are best kept away from authors but are essential to turn a book from idea to reality. Thanks, too, to the many people at New Riders whom I have had no direct contact with but whose contributions helped make this book happen.
Introduction
In this chapter:
- SVG in Perspective
- The Key Web Design Principles Apply
- Why Was SVG Needed and Created?
- Limitations of Bitmap Graphics
- The Birth of SVG
- How Is SVG Different?
- More SVG Capabilities
- Restyle Your Graphics or Web Site Using CSS
- SVG As Visual Components
- Synergy with Other XML Technologies
- SVG Limitations
SVG in Perspective
Welcome to the exciting new graphics world of Scalable Vector Graphics!
Designing SVG Web Graphics explains to you the principles of SVG and shows you how to create SVG graphics for the Web. You might find it hard to believe, but, with the arrival of SVG, the world of Web graphics will never be the same. SVG will replace many uses of bitmap graphics on the Web as Web page "furniture," such as navigation bars and graphics, animations, and banner ads and provide serious competition to graphics produced in a proprietary vector graphics format, such as Flash.
In Designing SVG Web Graphics, my primary aim is not to sell you on the benefits of SVG (many articles in print and on the Web have hyped SVG); I aim primarily to show you how to design for the Web using the power and flexibility that SVG provides. However, although I am focusing on the practicalities of using SVG, I am also excited by the creative possibilities that SVG brings to the Web. And I hope that you soon will be excited by those creative possibilities too.
SVG source code is open for inspection, and just as the arrival of HTML released a surge of creativity on the Web, the arrival of SVG might also be part of a creative surge in the Web-based (and paper-based) graphics world! SVG, like HTML, is open source the source code for SVG graphics can be read by those viewing SVG images, so skills in the basics of creating SVG will transfer rapidly to tens of thousands of potential SVG graphics designers. Tens of millions of Web users will be able to access SVG images within months. Adobe is planning to have distributed 100 million copies of its SVG viewer within about six months of the publication date of this book, in addition to the distribution of SVG toolkits from other groups, which will allow the embedding of SVG in cross-platform Java applications. The rapid transference of the technologies underpinning SVG as well as of SVG knowledge mean that SVG will take off rapidly. Don't be left behind.
SVG is radically open source. Here is the SVG source code for an SVG image:
Listing 0.1 (IntroTurbulence01.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="500"> <defs> <filter id="Turbulence1" filterUnits="objectBoundingBox"> <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1" seed="0" > </feTurbulence> </filter> </defs> <rect x="0" y="0" width="400" height="500" style="filter:url(#Turbulence1)"/> </svg>
That code, short as it is, produced Figure 00.01, using only a simple SVG filter.
Figure 00.01. An SVG image (slightly zoomed) created by using the SVG <feTurbulence> filter primitive.
Mastering SVG and the technologies that work with it is not a trivial task, but the new creative potential is enormous. I invite you to join me on that exciting exploratory journey into a new Web graphics world. Just as an aspiring concert pianist has to spend time practicing scales, you need to master basic techniques and skills in SVG in order to use SVG to its full creative potential. Empowering you with that foundational knowledge and basic skills is the reason that this book is written.
To fully release the creative potential latent in SVG, you are likely to find that you need to approach at least part of SVG with a different mindset than you might bring to some other graphics design tasks. You need to think partly like a traditional graphics designer, partly like an animator, and partly like a programmer. The power of SVG is likely to be best focused by those who invest time in understanding SVG at a level that goes beyond its surface appearance, important though that is, and who explore the XML-based roots of SVG and how they can be harnessed. You can use SVG alone, but its full power and flexibility are available when you use it with other XML-based languages.
The idea of having to combine a programmer's and a designer's skill set to move forward in the new Internet graphics world is likely not new to you. Many Web graphic designers, including Flash designers, appreciate that they will have to begin to think more like programmers and acquire new skills. Designers who have experimented with or become skilled in using Dynamic HTML, DHTML, or ActionScript in Flash are likely to have some appreciation of how combining design and programming thought processes yields new and important benefits. I encourage you to adopt that forward-looking mindset as you read this book and as you begin to explore and apply SVG in your creative graphics endeavors. Just as programmers increasingly think of their task as being to combine components, graphics designers will increasingly find that they will be spending time reusing and combining visual components.
Graphics designers and programmers will work more closely together, with programmers having to understand more about design and SVG in particular to make use of SVG in their applications.
The Key Web Design Principles Apply
Web graphics must download quickly. With SVG, you can create attractive animated or static graphics that download quickly and therefore don't resemble those Flash sites where the protracted Loading... message causes the user to act out a Leaving message. SVG provides a unique combination of qualities to empower you in creating exciting, static, animated, and interactive Web graphics, but I want to emphasize that the key principles of good design still apply. SVG provides you with lots of creative power, but does nothing to stop you from using that flexibility in a way that is inappropriate.
For example, the following code describes an animated SVG gradient that behaves a little like a disco light and could be horribly intrusive on many Web pages; yet, if you adapt that visual component and produce it in a smaller version and keep the repeat count down to 2 or 3, the component might be a useful visual attention grabber (see Figure 00.02). Alternatively, in a pop music site, this type of SVG animation might usefully mimic a disco environment.
Figure 00.02. A view of an animated SVG gradient, which looks onscreen like a pulsating light.
Listing 0.2 (IntroGradient01.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="300" height="400"> <defs> <linearGradient id="GradientH" x1="0" y1="0" x2="120" y2="0" gradientUnits="userSpaceOnUse"> <stop offset="0%" style="stop-color:black" /> <stop offset="20%" style="stop-color:rgb(255, 102, 153)" /> <stop offset="50%" style="stop-color:yellow" > <animate attributeName="stop-color" begin="0s" dur="0.5s" values="yellow; #FF6699; yellow;" repeatCount="indefinite"/> </stop> <stop offset="80%" style="stop-color:rgb(255, 102, 153)" /> <stop offset="100%" style="stop-color:black" /> </linearGradient> </defs> <svg x="10" y="0" width="120" height="240"> <rect x= "0" y="0" width="120" height="240" style="fill:url(#GradientH)" /> </svg> </svg>
Good design is customer centered. If the design that you and your colleagues create does not provide what the customer wants or needs, your Web site will soon be history. Only you know your customers and their needs, so this book presents a variety of techniques you can apply in various settings. Whether you look on some of the designs as dull or understated or alternatively lively or obnoxious depends on your taste and who your target audience is. Underestimating the variety of tastes present among Web users today would be a mistake.
Why Was SVG Needed and Created?
Many existing graphics technologies are focused mainly or exclusively on the Web. If you already have GIFs, JPEGs, PNGs, or Flash, for example, what possible reason can there be for the creation of a new graphics format?
SVG was developed for two basic reasons. The first was the perception that with the arrival in 1998 of parts of the XML (Extensible Markup Language) family of technologies, the need (and an exciting opportunity) existed for an XML-based graphics format. As you begin to consider SVG and its background in XML, I hope that you begin to appreciate that a text-based, vector graphics format raises a variety of new issues and creates an exciting range of new creative opportunities. I return later to the idea of a text-based graphics format.
The second reason was a long-standing recognition of the limitations of traditional bitmap graphics.
So, if Scalable Vector Graphics arose in part from a combination of the long-standing awareness at W3C of the shortcomings of bitmap graphic formats, such as GIFs and JPEGs, what were the problems that stimulated this new development?
Limitations of Bitmap Graphics
Bitmap graphics have several limitations. Inevitably, a trade-off occurs between quality (and therefore the size of an image file) and download time. If you want to create bitmap graphics of any size and of good technical quality, the files are large and, for any given connection, are downloaded more slowly. For a fortunate minority with high-speed Internet access, that is not a significant disadvantage. For the majority, however, because of modem speeds, the only viable access to graphics on the Web is low-resolution GIFs, for example. If you compare the visual quality that you would find unacceptable in print with what you routinely accept on the Web, you begin to appreciate the subconscious compromises you make in the Web medium.
Do bitmap graphics provide a quality visual experience?
Look critically at typical bitmap graphics on a Web page. Aren't they generally of pathetic quality? They have low resolution with a limited color range. If the Web had not colored your judgment so that you accepted such poor-quality images, where else would you tolerate such tiny, fuzzy images? A photographer would turn up his nose at graphics of the quality you accept as the norm on the Web. You don't need to continue to tolerate those.
I wasn't around in the 1890s when people listened to music played from wax cylinders. Nor was I there a decade or two later when shellac records were the state of the art. The sound quality was poor, but the fact that any sound could be heard was considered exciting and entertaining. Are your positive reactions to having GIFs and JPEGs on the Web any different? You tolerate poor visual quality because you are impressed that any graphics are possible on the Web, so you suspend your critical visual faculties. I wonder whether you will look back in a few years with a fond nostalgia for the then discarded GIFs and JPEGs? Or will you be honest enough to admit that they were, in many cases, a visually poor experience?
Now take a look now at how SVG originated in the context of the important Web developments that have taken place and are still to take place with the advent of the Extensible Markup Language, or XML.
The Birth of SVG
In February 1998, the World Wide Web Consortium (W3C) released the Extensible Markup Language (XML). XML is a meta-language a language to create other languages designed for use across the World Wide Web. One aim of XML was simplicity, an aim that is arguably a distant memory given the number and complexity of W3C Recommendations that have emerged since 1998. However, although simplicity might have been erod-ed, the creation of languages based on XML opened up possibilities to integrate a variety of technologies on the Web, all of which were XML based. More specifically for your purposes, the emergence of XML gave the W3C opportunities to create a new graphics format, which has emerged as Scalable Vector Graphics. It is founded on well-formed XML documents, which would develop further a number of W3C goals for the World Wide Web.
Scalable Vector Graphics are scalable in two senses. First, because the visual appearance of an SVG graphic is stored as a text-based description and its display is recalculated when it is rendered, you can zoom an SVG image while preserving image quality. Second, SVG is a technology suited for the Web, with the potential for a multiplicity of uses for a multiplicity of users.
To give you an impression of the scalability of SVG compared to bitmap graphics, compare Figure 00.03, a piece of 12-pt. bitmap text magnified 16 times, to Figure 00.04, a piece of similarly sized SVG text magnified by a similar amount. Notice how the quality of the bitmap text is degraded with magnification, whereas the quality of the SVG text is maintained (apart from the slight flaw in the font on the bottom of the V).
Figure 00.03. Bitmap text, 12 points high, magnified 16 times. Note the loss of image quality.
Figure 00.04. SVG text of comparable size magnified to a similar degree (as seen in the Batik SVG viewer). Note the preservation of the outline of each glyph.
The first public Working Draft of the Requirements for Scalable Vector Graphics was released in October 1998. You can see the original document at http://www.w3.org/TR/1998/WD-SVGReq-19981029. From the beginning, the W3C envisioned a radical effect on the Web graphics scene because it viewed SVG as a format "which can be widely implemented in browsers and authoring tools and which is suitable for widespread adoption by the content authoring community as a replacement for many current uses of raster graphics." Note the emphasis I placed on replacement and many in the preceding quote. SVG, created by W3C to have an impact in the Web graphics community, was a conscious intention that many uses of bitmap graphics were intended to be replaced by SVG. In addition, SVG was designed, from the beginning, to be accessible to a wide range of devices "from small mobile devices through office computer monitors to high-resolution printers." The scalability of a vector graphics format made that cross-platform targeting possible. At the time it was first discussed, this focus on multiple browser types was far seeing. Now you take for granted the existence of various mobile platforms for viewing the Web, although the creation of bitmap graphics for multiple platforms, even when bitmaps can be displayed, is a potentially tedious, time-consuming process.
Internationalization
You might have been involved in creating multiple images that have many similarities but must be created as separate images to suit each language version of your company's or your client's Web site. SVG can free you from much of the repetitive work involved in internationalizing a corporate Web site. Imagine creating graphics that can be used in English and that, by simply changing the text to that of another language and providing information about which language it is, you can customize in multiple languages by using relatively simple variants of a single image.
Five years ago, the Web was arguably a North American, English-language medium. Major corporations now see the need to reach, in their native language, the one billion native speakers of Chinese and the speakers of many European languages, for example. To reach an international, multilingual audience, you need built-in facilities for internationalization. XML and SVG have those. Bitmap graphics don't. If your corporate clients are looking to improve the international reach of their Web sites, why be left behind?
The code shown in Listing 0.3 causes a simple shape to be displayed with text in either English or French, depending on the user's language settings. Unfortunately, at the time this book was written, the Adobe SVG Viewer did not yet support this code.
Listing 0.3 (IntroInternational01.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="100" style="fill:#CCCCFF; stroke:#000099"/> <switch> <text x="55" y="90" style="stroke:#000099; fill:#000099; font-size:24;" systemLanguage="en"> Hello! </text> <text x="55" y="90" style="stroke:#000099; fill:#000099; font-size:24;" systemLanguage="fr"> Bonjour! </text> <text x="55" y="90" style="stroke:#000099; fill:#000099; font-size:24;"> It failed! </text> </switch> </svg>
You can see in Figure 00.05 the displayed result when the language is set to English (en), and in Figure 00.06 the result when the language is set to French (fr).
Figure 00.05. The simple graphic that is displayed when the language settings are for English(en).
Figure 00.06. The same simple SVG graphic that is displayed when the language settings are for French (fr).
SVG was also designed to be created using a simple text editor and using server-side scripts or programs. In other words, SVG was designed to be open to creation or implementation by programmers, or at least by those who can think like programmers. Of course, it can also be created using vector graphics drawing tools that are likely to be familiar to you. Those tools are described in Chapter 1, "The Basic SVG Tool Set."
A potentially important SVG capability is that you can produce a complete Web site using only SVG. For Web authoring, you can use SVG as a "one-stop shop" create your SVG Web graphics and embed them within SVG Web pages if you choose. You do not need to use HTML or XHTML. Of course, because SVG is XML, you can also combine it with other XML technologies to produce more sophisticated XML-based Web pages.
These characteristics of SVG are likely to change the world of graphics for-ever. I discuss the issue of SVG Web pages again in Chapter 12, "Creating a Simple SVG Web Site," because it is generating quite a bit of feeling in some quarters.
W3C
I have mentioned that W3C produced the SVG specification. In case you are not already familiar with W3C, I will explain a little about it here.
W3C, an acronym for the World Wide Web Consortium, is a cross-industry body whose members include giants like Microsoft, Sun, IBM, and Adobe, whose declared aim is to "Take the Web to its full potential." W3C has done work with graphics in the past. For example, it produced the Portable Network Graphics, or PNG, graphics format (see http://www.w3.org/TR/REC-png) in 1996.
However, W3C is best known for its work in the development of HTML and, more recently, XML and its associated family of technologies, including XHTML, XLink, and XSLT.
W3C produces specification documents, called "Recommendations," that carry great influence in the Web and e-business communities. That's not surprising because IBM, Adobe, Sun, Microsoft, and a host of other software companies who are W3C members have to vote on any proposal before it is finalized as a Recommendation. W3C Recommendations are not imposed on the Web industry; they are chosen by the industry.
W3C does not, technically speaking, produce standards, but the fact that the major players in the software scene are all members of the W3C means that its Recommendations generally carry great weight. Perhaps the most visible exception to this statement is Microsoft, which explicitly reserves the right to decide for itself which standards it adopts and, on occasion, takes its own line with regard to standards. However, even Microsoft is responsive to technology trends, exemplified in its abandon-ment of its preemptive version of "XSL" and subsequent adoption of W3C XSLT. I expect to see a similar move by Microsoft in relation to its own Vector Markup Language, VML, and its adoption of SVG.
XML
I want to say two things about XML. First, it is immensely important to the future of the Web. Second, a significant amount that has been written about it in the past couple of years is hype and is plain wrong, possibly because those who were writing about it didn't fully understand the topic!
XML is not a language in any normal sense. It is a meta-language (and might have better been called XMML), which means that it is designed to create a variety of what you would normally think of as languages, of which SVG is one example. Because these different languages are all built on the same syntax contained in the XML meta-language, powerful new possibilities exist for interchanging information (including graphical information) between computer applications because the structure of XML documents is predictable. Also, powerful new opportunities exist for using XML as the basis for dynamically generated Web pages. That XML processors can process any XML-based language is a good foundation for mixing different XML-based languages, including SVG, in one Web application.
On the Web, you have seen little of the additional power that XML brings to the table. In a few big sites, XML is used on the back end, but it is still HTML or XHTML that is presented on the client browser. That is in part because the main browsers Internet Explorer, Netscape 6, and Opera are all quite a bit off the pace in terms of implementing XML (as well as being off the pace, of course, in implementing other Web technologies, such as CSS).
During the lifetime of this book, I would expect to see that situation change significantly. Prototypes of new XML-based browsers are appearing, such as the X-Smiles browser described in Chapter 1, that make mixing SVG with other XML-based languages possible today.
One factor that has held XML back on the Web is the absence of an XML-compliant linking technology. The XML Linking Language (XLink) is now a full W3C Recommendation, and early browser implementations of XLinks are appearing; for example, in the Netscape 6 browser. Internet Explorer is now lagging behind in this respect. SVG viewers, including the Adobe SVG Viewer and the Batik viewer, implement XLink simple-type links. These subjects are discussed further in Chapter 5, "Creating Navigation Bars." You can expect to see traditional browsers improve their XML capabilities. Also expect to see some exciting developments with multilanguage, XML-oriented browsers that prominently include SVG display facilities. One browser, X-Smiles (described in Chapter 1), can already display SVG with other XML-based languages, such as XSL-FO (Extensible Stylesheet Language Formatting Objects), XForms, and SMIL (Synchronized Multimedia Integration Language). You can create multimedia Web pages all based on XML and including SVG in a prominent place. Exciting, if demanding, times lie ahead with the growing use of SVG graphics in SMIL-based multimedia.
How Is SVG Different?
One important aspect of SVG you need to consider in a little more detail is how it differs from traditional Web graphics formats, both bitmap and vector. Before you go on to consider the detailed characteristics of SVG, step aside to look at some fundamental aspects of bitmap graphics.
Bitmap graphics
Bitmap graphics formats, such as GIF and JPEG, have been enormous practical successes on the Web. They were, and are, by no means perfect, as I mentioned earlier, but they were good enough for the early days of the Web. I have good reason to think and this was an explicit aim of the SVG Working Group at W3C that SVG will replace many uses of bitmap graphics.
As economic and time pressures build on all Web-facing businesses, the need for efficiency and cost containment is clear. And bitmap graphics can be (let me be honest) expensive commodities expensive in terms of time and expensive in terms of money. One reason that they are expensive, from a business point of view, is that they are used in a closed, binary, non-editable format. To alter a bitmap graphic, you need to go back into your favorite graphics package and work again with the original version of your graphic (assuming that you saved it and can still find it!). That takes time and costs money.
The move from a monolingual Web using only English to a truly multilingual, genuinely worldwide Web is also exposing some of the weak-nesses of bitmap graphics. Suppose that you want to have a Web site in ten languages. If you want to do that with bitmap graphics, you need, in all likelihood, ten different bitmap graphics. If you want to edit them, you likely need to go back and find ten separate original files.
Then suppose that your company or client wants to change the color scheme for such an international, multilanguage Web site. You might have dozens of different graphics in the site that need to have their colors changed. And, of course, if your site is the ten-language version, you need to multiply that number by ten. To make any site-wide change for a multilingual international business is costly, in time and money.
What international businesses want is a graphics format that facilitates maintenance and change; a graphics format that is always easily editable; a graphics format that has internationalized capabilities built in.
Enter Scalable Vector Graphics! It is always editable. It is built on XML, which was designed to be used internationally. As I showed you in Figures 00.05 and 00.06, creating multilingual SVG graphics is straightforward.
In addition, you can use SVG with Cascading Style Sheets, including external Style sheets, to control the appearance of SVG graphics on a site-wide basis. After all, SVG is simply XML, and CSS can be used to style any XML. Do you see why I mentioned earlier that you might have to approach SVG with a new mindset?
From a business point of view, you can gain significant potential savings by using SVG both when creating graphics for a major Web site and when updating the design or carrying out other maintenance tasks. Corporations will look for graphic designers skilled in SVG. Your choice is to be among those who have actively acquired SVG skills and who are a sought-after commodity or to be among the group who become increasingly sidelined. The world of business on the Web is not a forgiving one. You need to be on the pace!
You might be getting a little worried at this point if you are a professional bitmap-oriented graphics designer. Part of your income, or perhaps much of it, comes from carrying out those changes to bitmap graphics I have just mentioned. They are, from a business point of view, highly inefficient. Graphics designers who can offer a graphics package that is XML based and potentially more efficient are likely to have a significant commercial advantage. If you don't acknowledge the forces that are operating on Web-based businesses, you are, in my view, likely to find your business increasingly squeezed. You need to adapt to the new Web graphics.
Enough of this business planning! Let's turn back to the technical issues relating to SVG and take a closer look at a number of aspects of SVG that, taken together, distinguish it from other existing graphics formats.
Text-based graphics
You might find it quite an odd concept to think of having a text description of a graphic that is sufficient to allow a graphic to be re-created. More than that, the graphic is stored in that text-based format, downloaded from the server to the client machine in that text-based format, and rendered by the SVG viewer and rendering engine only at the time when the graphic is to be viewed.
Because the various vector objects are downloaded as text, the source code (maybe that in itself is a strange thought) is available for inspection on the client machine.
SVG has the potential to open up graphics design in a way that is similar to the open way in which the use of HTML exploded because it was possible to right-click and choose View Source. As I see it, you have two choices: Stand on the sidelines and moan about "graphics thieves," or realize the creative potential of SVG, get aboard, and keep your eye on the future.
You might find the idea of anyone seeing exactly how your SVG graphic is structured profoundly threatening. At one level, you might be indignant that someone could learn from or borrow from (steal?) your work. But when you were learning about HTML, did you ever take a peek at how the experts did it?
Perhaps the kind of thought going through your mind is that you are "safe" with bitmap graphics or a proprietary vector format. But are you safe? This sort of opening up of technology is similar to what happened to the linotype operators a decade or two ago when desktop publishing (DTP) software systems arrived. A whole class of perceived highly skilled and relatively highly paid individuals were rendered almost superfluous by the arrival of DTP software. Does that mean that nobody makes a living today from par-ticipating in producing printed matter? Of course not! But the spectrum of skills in demand today is radically different from that of the heyday of linotype machines.
The kinds of skills base or knowledge base needed by successful Web graphics designers will, I believe, change fundamentally. You will no longer be able to rely on closed formats to protect your work. I am sure that linotype operators 20 years ago thought that their future was secure because their skills were not easily acquired. Their skills were quite simply bypassed.
The kinds of changes that are likely are a greater need for programmer-type thought patterns, awareness of customer needs, and skills in the internationalization of Web sites.
XML-based graphics
My purpose is not to provide you with a detailed primer of XML, and a detailed knowledge of XML isn't necessary for your initial exploration of SVG. In this section, I touch on some basic notions that help you begin to get a grip on the basics of what is now a huge and rapidly growing field of knowledge.
The source code for SVG graphics is not held in any arbitrary text format, but an SVG image (or an SVG document) is a "well-formed" XML document. That phrase means that the elements within an SVG image or document conform to the syntax required by the XML 1.0 Recommendation from the W3C. A well-formed SVG document might have (it isn't compulsory) an XML declaration as its first line, which could look like this:
<?xml version="1.0" standalone="no"?>
Following that might be a DOCTYPE declaration that provides information to the SVG rendering engine about what structure to expect in the SVG document. An SVG image that conforms to the November 2000 Candidate Recommendation would have the following DOCTYPE declaration:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/ CR-SVG-20001102/DTD/svg-20001102.dtd">
More specifically, an SVG document also must be "valid." In XML terminology, that means that the SVG image must be structured in the way demanded by the Document Type Definition (DTD) for the SVG language.
In the DOCTYPE declaration (which is confusingly similar in name to the DTD), you see a URL similar to
http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd
That is the URL for the file that defines the allowable structure of an SVG document; in this case, one that conforms to the November 2000 SVG Candidate Recommendation. The SVG rendering engine (also called an SVG viewer) needs to process an SVG document with appropriate, predictable structure, and the DTD helps that process proceed smoothly.
You can look on the DOCTYPE declaration as stating where the DTD is to be found. The DTD defines what the allowed structure of the XML docu-ment in this case, an SVG document actually is. XML also allows part of the DTD to be embedded in the DOCTYPE declaration, but because I don't use that option in this book, after this paragraph, you can ignore that possible variant.
One of the powerful features of XML (and, by inference, SVG) is that it facilitates the interchange of information. Another is that XML-based languages can be used together in powerful and flexible ways. In Chapter 1, I briefly mention an XML processor that can display SVG with SMIL (Synchronized Multimedia Integration Language) and XSL-FO (Extensible Stylesheet Language Formatting Objects). So SVG is ideal both for integration with multimedia and with document layout formats. Although the focus of this book is on the use of SVG on the Web, SVG isn't limited to the Web.
You might be aware that XML includes the concept of namespaces, in which you can mix code from a variety of XML-based languages within one Web page. Each element is identified as belonging to a particular XML-based language, and each language has its own namespace prefix when used within that document, so the XML processor knows which elements are SVG and which are some other type of XML. In addition, you can use a scripting language, such as ECMAScript (JavaScript) to manipulate attributes or properties within more than one namespace (for example, to manipulate both an SVG graphic and the XHTML page that contains it). This mixing of XML-based languages opens up powerful, if daunting, creative possibilities.
If you find hints of the big and complex XML jigsaw puzzle a little overwhelming, don't worry because I don't bombard you with XML alphabet soup in this book. You need to learn new concepts if you are to make progress toward understanding SVG, but I explain it pretty much step- by-step as we go along.
Now move back from a brief perspective on the big picture, and take a closer look at the characteristics of SVG.
More SVG Capabilities
The reason that you are reading this book is probably that you want to find out what SVG can do and how you can make SVG do that for you. In this section, I discuss the display capabilities of SVG. Much of the remainder of this book focuses on how you use SVG.
Static graphics
The SVG specification provides a range of useful preset graphics shapes. If the shape you want isn't available, and you have the drawing skills, simply create it in your favorite vector drawing package. The current versions of Corel Draw, Adobe Illustrator, and Jasc WebDraw can all provide, at minimum, SVG export facilities. As I have already mentioned, libraries of vector graphics shapes are already available. If you can't draw the shape you want, a graphics library might have it or something close to it. Import the shape into Illustrator, for example, and save it as SVG, and you have an SVG visual component ready to modify or animate or have interactivity added to it.
SVG provides linear and radial gradients as well as an extensive range of filters that produce effects that, until recently, you would have expected only from specialized bitmap painting packages.
If your static shapes are too, well, static, have no doubt that SVG will let you bring them to life.
Animated graphics
SVG is capable of animating almost any part of an SVG image. You want to change the color of part of an image? It's simple: Just edit the stroke or fill properties. You want part of an image to become transparent or more opaque? Simply manipulate the opacity property. You want to move part of your image? Left or right? Change the x attribute. Up or down? Change the y attribute. Along a path? You can do that too.
SVG can also be combined with multimedia technologies. It has a close relationship with parts of the XML-based Synchronized Multimedia Integration Language (SMIL). Animation within SVG specifically, the declarative type of animation is based on the SMIL Animation specification and is discussed in Chapter 8, "Animation: SVG and SMIL Animation." SMIL animation is part of a larger SMIL 2.0 specification that offers powerful XML-based multimedia facilities.
For a glimpse of what is possible, take a look at http://www.x-smiles.org and download the demo files.
Interactive graphics
One of the fundamental requirements of a Web page is that it must be able to navigate, at user request, from page to page. Such interactive capabilities are routinely built in to HTML and XHTML Web pages and their Web graphics. You won't be surprised to learn that SVG has a full armory of interactivity functionality.
SVG offers a huge range of useful interactivity built in. Of course, you can create buttons that allow you to navigate from page to page. You can control animations of SVG elements by the way you click and move your mouse, for example.
No longer do you need to use JavaScript when you are creating rollovers for buttons or other navigation features. SVG provides a range of built-in events and event handlers that allow interactivity, like rollovers, to be created solely within SVG. But JavaScript capabilities are there to be used too, if you want to use them. The animation elements of SVG are powerful. For some uses, JavaScript is the icing on the cake.
You can still add additional types of interactivity by using JavaScript to manipulate the Document Object Model (DOM) of the SVG document or image.
Text layout
Many images, including buttons and logos, require the incorporation of text with graphic elements. SVG, of course, provides the ability to combine such parts of an image with the continuing advantage that all parts of the image remain editable.
SVG also has functionality that can allow you to lay out larger areas of text, including full SVG Web pages. If you want to look at an early experiment of what is possible here, visit http://www.svgspider.com/default.svg.
The range of possibilities as you piece together SVG visual components is enormous. Creating "furniture" for your Web page, such as buttons and logos, is straightforward. Rollovers? No problem, using the SVG animation elements or JavaScript. The limit to what you can create is likely to be your imagination and your detailed knowledge of SVG. This book is intended to help you understand SVG so that you can release your creative potential.
Millions of colors on the Web!
One of the limiting factors of using GIFs on the Web has been that they are limited to the display of 256 (or 216) colors, usually of the "Web-safe" palette. The palette is calculated using a 6 x 6 x 6 color cube, giving a total of 216 colors. By contrast, SVG can use 16.7 million colors (24 bit) if your monitor and software support that setting.
The SVG rendering engine (also known as an SVG viewer) can make full use of whatever range of colors (up to 24 bit) that your graphics card and monitor are capable of displaying. The SVG reaches your computer as text-based source code, which is then rendered on the client side.
An SVG rendering engine (SVG viewer) interprets the source code and interpolates the true color needed in a gradient or other complex color transition, thus providing high-quality, true-to-life (or true-to-code) color.
SVG filters: Vector graphics that look like bitmaps
If you regularly use vector drawing packages, such as Corel Draw or Adobe Illustrator, you are familiar with the gradients and other subtle visual effects that can now be incorporated in vector graphics. SVG implements many of these in filters.
Many graphics that to the human eye have subtle and complex shading are possible to replicate by relatively simple mathematical formulae. You already know that because that is what your favorite bitmap editing package does for you routinely. When using SVG, you don't have to understand all the math, but you do need to have some concept of the properties of a particular visual appearance and how altering the values of certain inputs on an SVG element has an effect on the visual display.
One of the aspects of SVG with a great deal of potential for creative application are the filters provided within a conforming SVG rendering engine. These filters can provide many of the visual appearances usually associated with modern vector drawing packages or bitmap graphics applications, like Photoshop or Paint Shop Pro.
In addition, because SVG maintains the information that defines these filters as attributes of individual SVG elements, those attributes can have their value altered over time, which produces what you see as animations. So, not only do you have a useful and powerful range of SVG filters, but you can also animate their color, transparency, and position, for example, over time. The creative potential is huge.
Here's an important difference between "animated" GIFs and animated SVG images. An animated GIF is actually a miniature slide show. Each bitmap image has to be created individually, which is sometimes a time-consuming and costly process. If you want to produce a slow, smooth transition, you need many, many images embedded in the animated GIF. The file is big, therefore, and takes longer to download. In practice, most animated GIFs use rapid transitions and motion because those are more eco-nomical with file size and download time. With SVG, you can animate fast or slow with negligible differences in file size. Why? It is only a matter of a byte or two to alter the value of an SVG attribute, which is one reason that SVG graphics can provide sophisticated animation and still be downloaded quickly.
SVG gradients: Vector graphics that look like bitmaps
Conforming SVG rendering engines can render linear and radial gradients as they interpret and render SVG source code. Vector source code can produce an enormous range of bitmap linear and radial gradients.
You can combine these gradients with animations to produce attractive visual effects. Whether you want to produce startling quick-fire transitions (such as the onscreen appearance shown in Figure 00.02) or subtle, flowing changes depends on how you use your graphics.
Restyle Your Graphics or Web Site Using CSS
You might be shocked to realize that an SVG image can be styled using Cascading Style Sheets in the same way that an XHTML or HTML Web page can be styled. Of course, after you realize that an SVG image is held as a text document with start and end tags and is XML compliant, the fact that it can be styled with CSS is obvious. SVG elements (or tags) have style attributes that correspond to CSS2 properties. By creating CSS rules using appropriate CSS selectors, external Style sheets can be created that control the visual appearance of an SVG image onscreen.
Of course, because these CSS properties can also be animated within an SVG image, lots of interesting things are possible.
Combined with the fact that SVG graphics remain editable at all times, the entire look of a Web page, including its graphics, can be changed by simply changing the relevant style sheet. The business benefits of improving maintainability should be obvious. You want a new look for your Web site? Easy! Amend the stylesheet, and you have a new-look Web site. Depending on how your site is structured, the change can affect all language sites.
Of course, the downside for Web-oriented graphics designers is that repeat business for at least some types of site redesigns might simply dry up or generate substantially less income. Wiser Web designers won't look on this situation as primarily a threat (although in a sense it is one), but rather as an opportunity to improve efficiency or focus on the message and achieve a competitive edge.
SVG As Visual Components
The concept of Scalable Vector Graphics as "visual components" is, I believe, one of the most exciting and yet most radical concepts that SVG brings to the domain of the graphic designer.
SVG has visual components at many levels. You can combine and reuse these pieces of SVG code or functionality to make the creation of SVG images more efficient and quicker. SVG visual components are either provided by the rendering engine or created by you or another graphics designer. An SVG filter is created by using one or more visual components called filter primitives. You can create an animation visual component that you can reuse or adapt for use in many of your SVG drawings.
If your reaction to the idea of visual components is one of disdain because it is too mechanical and not sufficiently creative, just pause for a moment. This reuse of visual components by designers has been going on for cen-turies. And, if you are a Web graphics designer, you are almost 100 percent certain to already have been routinely using visual components in your bitmap images. But you might not have looked on them that way.
First, look at the historical use of visual components. Arguably, the first use of visual components took place at the time when the printing press was invented. Visual components, the printing plates, were created and used over and over again. The creative ability of someone with talent who crafted the printing plates was used time and time again. Of course, those who made their living by hand-writing manuscripts might have felt threatened. Similarly, when movable type was invented, the capacity for combining type in different ways added new flexibility that wasn't possible previously. Monks or other scribes might have felt deeply threatened at the times that the printing press and movable type were invented. The benefit for society was a marked improvement in the flow of information with conse-quent societal benefits.
Each time you create a graphic that uses type, you are making use of graphical shapes with particular meaning. Those shapes possibly were created by a specialist in that particular skill. Imagine how much slower expressing text in Web pages or Web graphics would be if you were unable to use fonts that someone else had created.
Your use of visual components is not limited to text. In all likelihood, whether you use bitmap or vector graphics software, you have made use of preset graphics objects. You can adjust properties on those objects, of course changing the color, size, and position, for example but you are actually reusing visual components created by the graphics software company. Imagine how tedious your task would be if you had to create from scratch each curve you use. Think of the time you would have to spend and the mathematics you would have to master to create smooth curves, for example. Worse still, imagine if you had to somehow adjust by hand the individual pixels in a photograph rather than make use of the premade visual components, such as the effects provided by Photoshop and similar programs.
Do you still think that you don't already make use of visual components? I hope now that you accept that you already do this and on a daily basis.
So what does SVG bring to the table that makes awareness of SVG as visual components so powerful and so potentially important?
The difference that SVG makes is that you have detailed control over each property of each component and those properties remain totally editable at all times. If you want to put it simply, you can slot together parts of a graphic, including animations, a little bit like the way a child pushes together plastic bricks.
You might ask whether this process is just painting by numbers. In a way, it is, but so is all computer-based graphics work. It all depends on where the numbers are and how easily you can manipulate them.
In addition to allowing control over each property and attribute, the SVG specification allows for <svg> elements one of which is the containing, or root, element of each SVG document or image to be nested within each other. In other words, you can fit one SVG document or document fragment within another, in a way that has some similarities to the way Lego bricks are used together or the way in which complex e-commerce programs are constructed. Of course, the process with SVG is more complex and subtle than putting a child's plastic bricks together, but because you must follow rules for how this process is done, the visual components can be used together in synergy in ways that can be predicted to work.
More powerful still, an SVG document can import or include a separate SVG file to make up a composite image, in ways that are similar to the assembly of a frameset in HTML. You can assemble any SVG file a visual component, if you like with the other visual components in the importing file. If fact, you can also embed bitmap images within an SVG image and use that too as a visual component that can be animated.
By bringing together visual components in this way, graphics designers can use visual components (or objects) in a way that is very similar to what programmers use and have found to be effective in rapidly creating quality, reliable object-based software.
Don't throw your work away reuse it!
Assembling an SVG document does not have to be done in only one setting. That same SVG document or image might, if appropriately designed, be capable of reuse in more than one way or in more than one project.
With careful planning, you can create (or will eventually be able to buy) SVG components that you can plug together to produce new and attractive SVG graphics. If you use vector graphics drawing tools, you might already know of or use some of the available libraries of shapes. If you use Photoshop or Paint Shop Pro, you might make use of plug-ins. Each of them can also be applied, in principle, to SVG. You might buy ready-made vector graphics shapes. Or, you might purchase additional filters that can piggyback on an SVG viewer to provide even more visual possibilities.
Part of the power of such libraries or plug-ins applied to SVG is that they are always editable. Any aspect you don't like, you can if you have the relevant understanding of SVG adapt precisely to your needs.
If you have an attractive SVG graphic, but are dissatisfied that it is static, simply add an animation visual component. You want it to move on the screen? No problem. You want it to change color or size while it moves? That too can be handled by SVG visual components.
When you assemble visual components, you can use techniques as simple as cutting and pasting relevant bits of source code.
Suppose that you have some static text like the following contained in an SVG image, and you want to change it and animate it:
<text x="50" y="50" style="font-family:Arial, sans-serif; font-size:24;"> I am stuck in a bitmap rut! </text>
Simply add an animation component that might look like this:
<animate attributeName="x" begin="2s" dur="10s" from="50" to="500" fill="freeze"/>
and edit your text appropriately so that your SVG source code looks like this:
Listing 0.4 (AnimText.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> <text x="50" y="50" style="font-family:Arial, sans-serif; font-size:24;"> <animate attributeName="x" begin="2s" dur="10s" from="50" to="500" fill="freeze"/> I am on the move with SVG! </text> </svg>
You have your first animated SVG image with a clear message, as shown in Figure 00.07.
Figure 00.07. A simple and expressive text animation.
Just as you can adapt SVG visual components by adding animations, you can adapt for future use any SVG images created and debugged in earlier projects.
Don't worry, when I get into the meat of creating SVG images I take you through the necessary syntax and explain each aspect as I go. I simply want to show you how easy it is to plug together pieces of SVG the visual components.
However, you are not limited to using only SVG as visual components.
Use bitmap graphics as visual components
The SVG specification allows for the import of bitmap images specifically, JPEG and PNG into SVG documents. That opens up a whole raft of creative possibilities. Animate photographs or bitmap buttons or other screen furniture around the screen by using the SVG built-in animation facilities, or augment those by adding JavaScript animation or interactivity.
Don't throw away your bitmap graphics skills. You can use selected bitmaps in new ways within SVG images. The possibilities are almost limitless.
Synergy with Other XML Technologies
One of the strategic strengths of SVG is that it is XML based. SVG can be handled just like any other type of XML, transformed by XSLT, or combined with other XML vocabularies, such as XHTML, XSL-FO (Extensible Stylesheet Language Formatting Objects), SMIL (the Synchronized Multimedia Integration Language), or Extended Form (XForms). XHTML, XSL-FO, SMIL, and XForms are all either already released as Recommendations by W3C or are under active development with prototypes around and working.
Don't be put off by the alphabet soup. The creative potential here can make your eyes bulge and not only because you might have to spend long hours in front of the computer screen getting up to speed on all these technologies.
Synergy with XHTML
Perhaps the most obvious, practical use of SVG images now is as embedded images within HTML or XHTML Web pages. I describe those techniques in Chapter 10, "Embedding SVG in HTML or XHTML Pages." Depending on whether you want to use static or animated SVG, you can use SVG to replace GIFs, JPEGs, or Flash movies.
SVG also allows SVG and XHTML to be combined in the opposite way (by embedding HTML or XHTML within SVG Web pages). This can provide within an SVG Web page such facilities as interactive HTML or XHTML forms, which can't readily be provided within SVG itself.
Synergy with XSL-FO
Perhaps you are unfamiliar with the Extensible Stylesheet Language Formatting Objects, or XSL-FO. XSL-FO is an XML-based page layout (or, more precisely, document layout) language that can be displayed either on paper or on the Web.
XSL-FO Web pages are experimental at the moment, but do offer some facilities that HTML doesn't. SVG images can be embedded in XSL-FO pages in a straightforward way.
Synergy with XForms
When you are looking at the huge potential SVG synergy with other XML-based technologies, you are in danger of becoming overwhelmed in the alphabet soup of acronyms beginning with the letter X. The XForms specification being developed at the W3C aims to provide functionality that can be provided by HTML or XHTML forms only when scripted using JavaScript, for example.
Using SVG with XForms, you can provide an enormous range of XML-based Web functionality. SVG can provide graphics capabilities (and in SVG, Web pages can provide all the necessary text layout too). Watch this space! I can see that combination taking off.
SVG Limitations
I hope in the earlier parts of this introduction that I have transmitted something of my enthusiasm for SVG and have given you an impression of what it can do. If you are going to invest time and effort in learning SVG and perhaps even bet the future of your business on it you also want, and need, a realistic appraisal of its limitations.
Can SVG do everything? Of course not! Part of its limitation is the range of the SVG specification. For now, graphics designers are only beginning to get up to speed with the enormous potential that SVG offers. So, while you are still developing your skills in using SVG, you also need to be aware of the limitations of SVG itself and the tools now available to display it.
How fast is SVG?
Much depends on what aspect you are asking about, and much depends on how complex you want to make your SVG images. Also, the answer to specific questions about speed are changing all the time, as CPU speeds change and as those who are developing SVG rendering engines are learning how best to optimize them for speed in different settings.
Download times for SVG images (or "furniture") should be significantly faster than for equivalent bitmap images. Adding animations to SVG images does not, other than for complex animations, significantly increase download time.
Download times are only one part of the equation, though. How fast are SVG images displayed on the page? I have to be honest: SVG documents can be written that can bring an SVG processor to its knees, if the code hasn't been written particularly well or from trying to be too ambitious. You know that SVG can produce that exciting effect on your 1.5GHz machine, but you might forget that the 200MHz CPU that many users might still be using to access your image across the Web will struggle to cope with updating the display. SVG can be an intensive user of CPU cycles, particularly if many images are embedded in one page and several have continuing repeated animations.
Speed issues might arise partly because SVG viewers are still being written and refined. Certainly, significant speed improvements occurred between version 1 and version 2 of the Adobe SVG Viewer. Given the improvements in speed so far, I expect further performance improvements in future versions.
In parallel with improving SVG rendering engine speeds, SVG authors and designers are learning how better to write or tweak SVG to improve performance. CPU speeds are increasing steadily, and, as the experts will tell you, can be expected to increase for several years. I wonder whether trying to exploit fully the capabilities of SVG will be one reason that people will upgrade their computers.
The question that might well be in the front of your mind is how SVG will compare with Flash. Will you be subject to those interminable Loading messages, just as you are when you are visiting Flash Web sites? You needn't be. SVG can produce fast-loading Web pages, such as those accessible at http://www.svgspider.com/default.svg.
What happens when SVG animations become increasingly complex? Will download times increase? They will, but careful planning will, I expect, keep download times at acceptable levels. Will complex SVG animations be displayed on old computers with really slow processor speeds? I know of some SVG developers who are producing SVG on 166MHz machines, but I wouldn't recommend that as a routine.
Are SVG images high quality?
SVG images are intrinsically of higher quality than bitmap images, if by that one means that they can be zoomed and yet preserve image quality with no or minimal presence of the dreaded "jaggies." Take another look at Figures 00.03 and 00.04. Compare the close-up of the SVG text highly magnified with what a bitmap looks like when it is similarly magnified! In my view, there is no comparison.
Magnifying text shows that SVG images can be zoomed. But what use is that? Imagine using SVG to create a city map. You drive to the locality you want, and then you need to see more detail. No problem just zoom in on the part of the SVG map for the locality where you need to go, and get a better look at street level.
Now you are almost there, but you need to see individual buildings. No problem just zoom again.
This situation might work well on a desktop browser in your office, but what if you want that kind of functionality on the go? Remember that SVG was designed to be displayed on mobile devices as well as on traditional desktop machines. A viewer is available for the Pocket PC. I don't know of one for an in-car system yet, but you can probably expect to see them in a couple of years.
In addition to creating SVG images for Web pages, or complete Web pages, you can use SVG now for creating games or for maps on CD-ROM.
The future for SVG is exciting. If you grasp the basic techniques in this book and apply them fully and use them as a vehicle for your creative tal-ents, you will have taken an important step toward being an active and successful participant in the SVG Web graphics revolution.
Don't be left behind!
EAN: 2147483647
Pages: 26