Chapter 2. Tools of the Trade

Software and Sources to Make SVG Easier

The SVG examples in this book were for the most part created “from scratch”, by typing markup or standard JavaScript to build and manipulate the graphics. However, that’s certainly not the only way to work with SVG, nor the most common one.

Most SVG art starts life inside graphical software, created by an artist working with shapes and colors instead of XML tags and attributes. Most SVG data visualizations are built using JavaScript libraries full of shorthand convenience functions. Most SVG icons are reused from one web application to another, and countless icon sets are available to license for your website.

By showing you the internal components of an SVG, stripped down to their skeletal form, we hope to give you a complete toolset to work with SVG: the skills to modify and extend any SVG you work with, no matter how it was created. With this programmatic approach to SVG, you will be better able to manipulate graphics created by others or by software, in order to match your web design or to enable user interaction. However, the mental toolset you’ll gain by understanding SVG shouldn’t detract from the software tools that other developers have created.

Software tools make it easier to create graphics, and easier to process your files so they are ready to deploy on your web server. Tools discussed in this chapter include graphical editors that emphasize visual components ...

Get Modern SVG now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.