Once upon a time, one of the biggest issues facing adoption of the Scalable Vector Graphics standard was the lack of decent tools for creating SVG graphics. Most SVG needed to be created by hand, or
—if that was too daunting—to be converted from other proprietary graphical standards. This reliance on converted graphics meant that the full features of SVG weren’t always used.
On the other side, many vector graphics editors include features that are not part of the standard SVG specification. To ensure that this extra information and features are retained when you save and reload the SVG (a process called “round-tripping”), these programs either have separate, proprietary image formats (like Adobe Illustra‐
tor’s .ai format) or add extra markup to the SVG file (as Inkscape does). In order to create graphics that will display consistently with other software, these programs also include commands that will
“flatten” the extra features into standard SVG 1.1. If your intent is to
Click, Drag, Draw | 111
make content available for the Web, always ensure that you export the final version of your graphic in standard SVG. Without this step, the file may be many times larger than the “pure” SVG version, which will slow and complicate your site. We discuss additional SVG optimisation tools at the end of this chapter.
There are now numerous graphical applications that can export files as SVG. The defining feature of the apps described here are the vis‐
ual, what-you-see-is-what-you-get (WYSIWYG) editors where you can position shapes with your mouse (or stylus, or finger) and select colors from on-screen palettes. They differ in the range of SVG fea‐
tures they support, and in how easy they are to use.
Regardless of which program you use, there are some common steps you can add to your workflow to make the final output more opti‐
mized for web use:
Define your Artboard or Drawing Size
The first step of creating a graphic should be to choose the right reference system for your work in your application of choice.
While vector shapes are indifferent to size and scale, it’s logical to use measurements that mirror the purpose of your SVG file.
For the web, this usually means pixels. If your work is a precise illustration of a real-life object that must be faithfully repesen‐
ted, you might choose inches, centimeters or millimeters.
For most software and export options, the size you choose for your artboard defines the coordinate system for the SVG viewBox. Making the artboard oversized will leave whitespace when the file is displayed, potentially ruining the display. You can always change the artboard size after initially setting it, and many programs allow you to crop the view to just fit the current drawing.
While it’s important to size the artboard appropriately, it’s also important not to draw to the very edges of the canvas: SVG ele‐
ments that are exported while touching the edges may display trimmed anti-aliasing (the effects that help “smooth” display on raster screens) poorly. Leaving one or two pixels from the edge to any non-rectangular SVG elements that are meant to be fully displayed in the viewBox is usually a good idea.
Set up color preferences for web use
Most vector illustration applications were originally designed for print, and therefore have their color space set to CMYK.
RGB is much more appropriate for screen use, and has a wider gamut (range of colors) than CMYK; be sure to set this as your preference before you begin drawing.
Structure your design
When you draw in SVG you’re not just making images: you’re creating data. For that reason, it’s important to name each rele‐
vant object as you make it (lowercase, without any spaces, so it can be directly converted into a valid id attribute). It’s much easier to create these references during visual editing, rather than later. Most applications will identify exported SVG ele‐
ments by their layer or group name, but in some cases, you must explicitly turn on settings to use the custom names as id values.
Use the application’s grouping and layering feature wisely, for any sets of graphics you’ll want to transform or style as a block.
Groups are also important for the logical structure of your document, as they can be given alternative text (as described in ???).
Simplify Shapes
In most SVG drawings, the list of coordinate points that describe each shape is the largest contribution to file size. When drawing, therefore, you want to use the fewest possible number of points to create a shape. This will in turn produce the best vector illustration, at the lowest file size.
To help with this, the more advanced graphics programs over path simplification tools, which smooth out curves, reducing the number of points and keeping things manageable. Similarly, merging related shapes can simplify the file, unless you will be animating or dynamically styling them individually.
Decide whether to convert text
An important feature of SVG graphics is that text can be search‐
able and easily editable. However, to keep it looking the way you designed on the web, you need to ensure that the end user has the correct fonts. This either means only using common fonts
Click, Drag, Draw | 113
or providing web fonts; in either case, you’ll need to edit the CSS yourself to ensure proper fallbacks.
If precise text rendering is more important than editability—for example, in a logo—many programs allow you to convert styled text elements into graphical shapes for each letter. Adobe Illus‐
trator will also provide you with the option to convert type to shapes when you export the SVG file.
Decide how to create a backdrop
SVG backgrounds are transparent by default. If you want to cre‐
ate the appearance of a background color in a SVG document, you have three choices:
1. If the SVG is used as an image on a web page, provide a background-color for the image in CSS.
2. Add a background style for the <svg> root element in the SVG itself (or as part of your main document CSS, if you’ll be using the code as inline SVG).
3. Include a colored rectangular backdrop shape in the SVG, that takes up the entire artboard, and make it the rearmost layer in the document.
The rest of this section introduces a sample of vector graphics pro‐
grams for creating SVG, and offers some tips and warnings about how to get web-quality output from them.