Authoring programs

All of the examples so far in the book have been generated by hand. In practice, as you'll learn throughout this book, SVG is often generated by software. Most of this book will look at creating and manipulating SVG using web-based tools and libraries, but SVG images can also be generated by desktop drawing applications. While working on the web, you will often work with SVG images that have been created by designers in applications, such as Inkscape (https://inkscape.org/en/), Adobe Illustrator (https://www.adobe.com/products/illustrator.html), or Sketch (https://www.sketchapp.com/). These applications are wonderful because they allow non-technical designers to work with SVG to create images using advanced drawing tools.

While it's not a requirement for the rest of this book, I would suggest getting your hands on something you can use to author SVG in this way. While you want to learn how to work with SVG in a dynamic, web-based environment, it's great to have the option to use advanced drawing tools to update and manipulate SVG elements. I have used both Adobe Illustrator and Inkscape over the years and many people swear by Sketch, so those are three options to start with. For just starting out, I would suggest looking first at Inkscape. Inkscape is a free, open source software released under the GNU license and it's pretty solid from a feature perspective, so it's a good default choice.

Whatever application you choose (and even if you don't choose one and simply inherit SVG images authored in one), it's good to know that there are some downsides to these applications. These applications are designed for the authoring experience and aren't producing SVG images optimized for the web so it's important to keep that in mind when pulling SVG images created by graphics program into a web project. You'll learn more about optimizing SVG images later on in the book, but you should be aware of what you're up against from the start.

Look at the following screenshot. It shows a difference between two files that both render the exact same image. The one on the left is the SVG source file output by Inkscape. The file on the right is an optimized version. As you can see, there's a lot of extra data sloshing around in the Inkscape file. That data is required by the application, but wouldn't be required on the web, so removing it allowed us to cut the file down significantly:

You'll learn about tools to clean up SVG files like this in Chapter 11, Tools to Optimize Your SVG.