Painting the Web

Static SVG Secrets

Now that you have a good idea of how to create an SVG image from scratch or with a tool, let's return to the concept of embedding SVG into web pages.

SVG has its greatest strengths in dynamic usage because it can be generated with any number of server-side technologies, becomes part of the web page, and can then be manipulated using client-side applications. SVG can also be used as illustrative images, or even as replacements for other PNG or JPEG images, though you have to be careful about browser support.

I've also used SVG as annotation directly in HTML text. For instance, I've used SVG to create tiny little musical notes, which I then used around a line of text to annotate the fact that the phrase that followed was from a song. I didn't even create the notes directly: I found copies of the SVG at Wikipedia and adapted them for my own use.

Finding and Adapting SVG

As more browsers support SVG, look for more instances of SVG to appear "in the wild." This is great because the more examples, the more we can learn from looking at the SVG used to create the individual files. Better yet: if the SVG is public domain or open for copying or reuse, we can start with a ready-made image and adapt.

Tip

How does copyright apply to SVG? Just the same as it applies to photos and writing. Where SVG is different from a book or photo is that SVG (like the Web 2.0 graphics I covered in Chapter 5) can provide rich sources of learning, without our having to copy the exact SVG file or ...