Using SVG with CSS3 and HTML5 — Supplementary Material

Example code and online extras for the O'Reilly Media book by Amelia Bellamy-Royds, Kurt Cagle, and Dudley Storey.

Chapter 4
Tools of the Trade: Software and Sources to Make SVG Easier

Software tools make it easier to create graphics and process files so they are ready to deploy on your web server and display on your pages. The tools discussed in this chapter include:

In addition, we introduce the vast panoply of free and licensable SVG content that can help you quickly enhance your web development process and designs, even if your personal artistic skills don’t extend beyond stick figures.

An online extra article discusses rendering programs that display the SVG or convert it into other image formats.

This chapter specifically mentions some of the most popular software and services. These are not the only options, and we don’t guarantee they are the best. They are given as examples of what is out there, and of how different options vary from one another. When choosing tools for your own projects, think about the features you need, and the budget you can afford.

Figures and Examples#

The file names link to the code view on GitHub. Beware: the linked screenshots are hi-resolution; some have very large file sizes.

View all files for this chapter on GitHub.

Figure 4-1. Samples from the Open Clip Art Library

On the left, Simple Farm Animals 2 by user Viscious Speed; on the right, line drawings from Sir Robert Baden-Powell’s 1922 book An Old Wolf’s Favourites (horse and rider, crow), converted to SVG by user Johnny Automatic.

Figure 4-2. SVG from Wikimedia Commons

On the left, a hollyhock flower by user Ozgurel; on the right, a labeled diagram of a peach by Mariana Ruiz Villarreal (aka LadyofHats).

Figure 4-3. The open source Inkscape graphics editor
Figure 4-4. The Draw SVG free online SVG graphics editor
Figure 4-5. The Atom code editor with SVG Preview enabled
Figure 4-6. The Brackets code editor with SVG Preview enabled

Online Extras#