SVG Colors, Patterns & Gradients

Chapter 1. Things You Should Already Know

This book is written with the assumption that you already know something about SVG, web design in general, and maybe even a little JavaScript programming.

However, there are always little quirks of a language that some people think are straightforward while other, equally talented, developers have never heard of. So this chapter gives a quick review of topics that you might want to brush up on—if you don’t already know them.

SVG Is Drawing with Code

An SVG is an image file. It is perfectly possible to only use it as an image file, the same way you would use other image formats, such as PNG or JPEG. You can create and edit an SVG in a visual editor. You can embed it in web pages as an image.

But SVG is more than an image. It is a structured document containing markup elements, text, and style instructions. While other image formats tell the computer which color to draw at which point on the screen, SVG tells the computer how to rebuild the graphic from its component parts. That has two main consequences:

• The final appearance of an SVG depends on how well the software displaying it follows the SVG instructions. Cross-browser compatibility is often a concern.

• It is easy to edit parts of an SVG—to add, remove, or modify particular pieces—without changing the rest. You can do this in your editor, but you can also do it dynamically in your web browser to create animated or interactive graphics.

SVG Is Always Open Source

Not only is ...