Beginning XML, 5th Edition

Chapter 18

Scalable Vector Graphics (SVG)

WHAT YOU WILL LEARN IN THIS CHAPTER:

• The differences between bitmap and scalable graphics
• Where and why to use SVG
• How SVG works
• Basic SVG drawing: shapes, lines, colors
• Using text in SVG
• Using splines, gradients, and filters
• Generating SVG from XSLT or XQuery
• A high-level view of web apps, SVG animation and scripting, and SVG in the web browser

W3C Scalable Vector Graphics (SVG) is widely used to define pictures and animations and to represent them using XML. SVG pictures can be scaled — that is, you can enlarge them or reduce them to any size without losing quality. The text inside SVG pictures remains editable, so that images made with SVG can be accessible to people with special needs and can be translated to other languages. SVG is also now part of the Open Web Platform introduced with HTML 5, and can be displayed and animated in a web browser. It’s easy to generate SVG with XML tools and easy to manipulate it with JavaScript libraries. SVG is just a bundle of awesome win!

SCALABLE VECTOR GRAPHICS AND BITMAPS

Computer graphics come in two main formats: bitmap graphics and vector graphics. Each of these two formats can work in a way that is either procedural or declarative.

Procedural Graphics

The oldest way to make a computer show a picture is to write a computer program that, when run, produces the desired result. This method is called procedural graphics, because you tell the computer what to do: first this then that, like a “procedure.” ...