• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL



SVG is not an application. There are no “quick keys” or drop-down menus, and it doesn't come neatly packaged with a tutorial at your local computer store. Rather, SVG is a markup language that has thus far existed with only a technical “recommendation” that outlines the functions of all its code—the W3C's Scalable Vector Graphics (SVG) 1.0 Specification.

Though that document is of a tremendous value to any developer using the technology (and hopefully this means you in 24 hours), it provides little practical instruction to the beginner.

That's where this book comes into play.

Who Should Read This Book

This book assumes that you are reading this with little knowledge of SVG before beginning. As such, this book will provide you with conceptual overviews of the technology, step-by-step instruction, and, most importantly, practical application of the technology. It also will assuredly provide you with strong selling points on the technology.

Your comfort with this technology, and many of its related concepts, will be greatly increased if you have already produced Web content. If you understand HTML, you will have a basic knowledge of how a markup language works; as SVG is also a markup language, the structure of SVG will seem familiar. Knowledge of XML will surely be helpful, as SVG is an XML language and consequently follows the structure and syntax of this technology. Other technologies, such as SMIL, JavaScript, and CSS, are used in various ways to define SVG content, and any experience with them may help you create more advanced graphics. Aside from JavaScript, this book will provide you with enough information about these technologies to create SVG artwork. To advance your understanding, you may consider investigating these technologies after you finish this book. SVG's ability to work easily with other technologies is one of its many strong points.

Lastly, SVG is a language for defining graphics. Though SVG has a technical side, its purpose is to define visual appearance. Your experience with design theory and your ability to translate ideas into visual expression will directly impact your ability to create impressive visual graphics (in SVG or otherwise) on your own. However, if you do not have such inclinations, you needn't put this book down; visual examples are already defined and illustrated, allowing you to learn the technical aspects of the technology without having to come up with your own artwork for each lesson. Furthermore, this book will define how to accomplish certain visual effects common to WYSIWYG graphics tools (such as Adobe Illustrator, Corel Draw, and so on). These effects are illustrated in this book's figures, in case you are unfamiliar with their appearance and vocabulary.

How This Book Is Organized

This book is organized into 24 chapters; each chapter contains a series of lessons that were created to take roughly one hour to read and complete. Nearly every hour's lessons relate in some form to your construction of a completed piece that will be the culmination of this book. With the knowledge that each lesson works towards a larger goal, you will hopefully remain motivated towards completing the example.

The book is organized into a series of parts:

  • SVG Fundamentals—Understanding the syntax, structure, and basic elements of the technology is the first step to using SVG. This section will explain the environment and rules, as well as basic drawing commands.

  • Manipulating SVG—Although the previous section explains how to create code and shapes, this section explains how to affect their appearance. Applying fills, strokes, and filters, as well as symbols, you will begin to see your artwork take shape.

  • Bringing SVG to Life—SVG is more than flat, non-moving imagery. This section will teach you the basics of animation and interaction (such as buttons and rollovers).

  • Text and Typography—SVG's ability to control the appearance and manipulation of letterforms separates this technology from most of its peers. These chapters will cover font, size, alignment, and style application, as well as font creation.

  • Using JavaScript to Unleash SVG—SVG, though an amazing technology, cannot accomplish every imaginable interaction and animation. These chapters will provide a series of examples that illustrate SVG's ability to utilize JavaScript enhancements in its code.

  • SVG Mastery—This final group of chapters covers more complex concepts that will enhance your ability to create SVG: organization, optimization, WYSIWYG SVG creation, SVG resources, and common problems. This section also contains the book's complete example, with its code detailed line-by-line.

The 24 hours are followed by an appendix, which provides you with further reference material. Once finished with all the hours' examples, you will not only have an impressive-looking example of the technology, but you also will have become truly knowledgeable in the fundamental concepts and application of SVG.

As many of the concepts and lessons of this book are dependent on information from previous chapters, you are strongly encouraged to read this book in the order the chapters are arranged. If you are looking for a fast track to learning the basic concepts, you can skip to Hour 4, “Document Layout,” and work through Hour 17, “Typefaces.” The chapters preceding Hour 4 detail the requirements of the technology, and the chapters following Hour 17 discuss more advanced concepts detailing how to enhance your code and content.

Though this book cannot serve as the one-and-definitive guide to the technology, it will serve as a strong introduction to the technology. By following all the examples in their order, you will significantly reduce your need to look elsewhere for any questions that may arise, as you will likely find their answers in a previous chapter.

This book will not teach you everything about SVG, but it will teach you everything you need to know to get started developing SVG.

With that said, it's time to start learning. On to Hour 1, “Getting Started with SVG.”

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint