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:
-
Graphical editors that emphasize visual components rather than code
-
Code editors that provide hints and immediate feedback
-
Libraries that streamline the creation of dynamic graphics with JavaScript
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#
- “SVG Snapshots: Converting Vector to Raster”: Sometimes, you need a “snapshot” image of an SVG, saved in a common raster (aka, bitmap) image format, such as PNG or JPEG. The conversion can often be automated using dedicated rasterization tools.