Chapter 15. Generating SVG

The previous chapters have described the major features of SVG. All the examples have been relatively modest and have been written in an ordinary text editor. For graphics of any great complexity, though, few people will write SVG from scratch. Let’s face it: almost nobody does this by hand. Instead, graphic designers will use some sort of graphic tool that outputs SVG, and programmers will take existing raw data and convert it to SVG with a script.

If you’re dealing with a graphic program’s output that is already in SVG format, you can sit back and relax; all the heavy lifting has been done for you. If you ever take a look at the SVG that it generated, it may be hard to read. Some programs, for example, may not use groups (the <g> element) efficiently or they may not optimize paths. When you use these programs, you are trading off the ease of generating SVG for the absolute control you have when you write the entire file by hand. Hopefully, with a better understanding of what’s going on “under the hood,” you will be better able to write code to adapt and interact with the graphics program’s output.

Generating SVG code from a data file is a trickier topic. The possibilities will depend on what type of data you have to start with and what type of programming languages you can work with.

One option for generating SVG is to build up an SVG document object model using the methods presented in Chapter 14. D3.js, which we alluded to briefly in Using JavaScript ...

Get SVG Essentials, 2nd Edition now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.