Save Correctly

If you use Save as… instead of File | Save as…, you can select a different file format. The output options include different SVG variants, such as Inkscape SVG, plain SVG (and its zipped variants), and optimized SVG.

If you save in Inkscape SVG, everything remains the same. Saving as plain SVG, on the other hand, removes all Inkscape/Sodipodi proprietary elements. If you use optimized SVG, a dialog box with four tabs appears. The last tab reports that Inkscape uses the SVG optimizer Scour [1].

In the first tab, Options, you can specify the significant digits for the coordinates (Figure 1). In the code example for the circle, you can see that the coordinates have six digits after the decimal point; however, you will not usually need this kind of accuracy to display a graphic on the web. If you enter a 6 in the Options tab, and the number has three digits before the decimal point, it will have three digits after; if you have tow digits before the decimal point, you will have four after.

Figure 1: If you save your file as an optimized SVG in Inkscape, this dialog will open.

If you enable the Shorten color values option, the short version is used for all color values (i.e., fill:#f00 instead of fill:#ff0000). Convert CSS attributes to XML attributes writes color values to the SVG document instead of the CSS attribute. You should not do this, for example, if you are designing icons that need to get their color values from CSS.

The Collapse Groups button removes unneeded groupings. Many graphic designers group together all or individual elements of the graphic, which makes the workflow easier. In code, a group is represented by the g tag, for example <g id="g1211"></g>. This example contains 18 bytes that are not important for correct rendering. Inkscape itself always creates a group for the layers in the document, but this kind of group only makes sense while you are working on the drawing, not when it is displayed.

The Create groups for similar attributes option creates groups for objects with the same fill color and outline. The software then writes the values for the attributes to the g tag, for example <g fill="#f00">. All the objects in this group are therefore black, which removes the need for the corresponding attribute for each object (i.e., a minimum of 10 characters with two objects).

The Keep unreferenced definitions option keeps the unreferenced definitions. Work around renderer bugs tries to work around known rendering bugs in some engines. However, all web browsers render SVG quite well, so you don't really need this switch.

The second tab SVG Output (Figure 2) also contains some options. The option Remove the XML declaration is not needed to render the graphic. However, it should be kept if the graphic contains text with special characters.

Figure 2: The Optimize dialog with the tab for customized SVG output.

It makes sense to enable the next option Remove metadata – there is sometimes quite a large volume of metadata, such as the author and license entries. Remove comments deletes comments contained in the document; Embed raster images writes existing raster images as Base64 code into the SVG document.

The Enable viewboxing checkbox is interesting; you can often see faulty files with it. The viewport is the visible image area and can be compared with a window where all or only part of the view is shown.

The size of the viewport is defined by the attributes width and height. The dimension for the viewbox is often the size of the document, so you first need to adjust the page size accordingly. To adjust the page size, open the File | Document Properties dialog and enable Resize page to content…. Then click on Resize page to drawing or selection.

The IDs tab of the Optimized SVG output dialog(Figure 3) lets you remove or shorten unused IDs. In SVG, every object is given an ID, but this ID is often longer than necessary. You usually only save one or two bytes, but the sheer mass of the data can add up.

Figure 3: The tab with the ID functions in the Optimize dialog.

If you now save the file as SVG, it will be far smaller. By how much depends on the complexity of the graphic: The more complex, the greater the savings – usually around 50 to 65 percent.

Alternatives

Optimizing vector graphics in the Inkscape GUI can take some time. It is also possible to call Inkscape at the command line, although the command-line options are limited to cleaning up definitions.

Inkscape uses the file extension on the command line to determine what to save the file as. SVG stands for Inkscape SVG only.

The Scour command-line tool is a better choice for optimizing an Inkscape file at the command line; Listing 6 shows its syntax.

$ scour input_filename.svg output_filename.svg --create-groups --no-renderer-workaround --remove-descriptive-elements
--enable-comment-stripping --enable-viewboxing --no-line-breaks --strip-xml-space --enable-id-stripping --shorten-ids

There are other tools for editing and optimizing SVG files, for example SVGO [2]. However, very few distributions have SVGO in their repositories. To install it anyway, use the Node.js package manager:

$ sudo npm install -g svgo

SVGO follows a philosophy that is different from Scour, so the call is less complex:

$ svgo -i filename.svg

The command overwrites the filename.svg file with the optimized version. If you want to save it in a separate file, use the -o new_filename.svg switch.

SVGO performs some operations that Scour does not offer. For instance, SVGO compares path values and converts duplicates into clones. You can enable this option with the --reusePaths option.

SVGO also comes with a function for recursive operations and can therefore be applied to directories. In Scour, you would have to write a small script for recursion. In any case, SVGO is the more modern tool. A plugin exists for using SVGO directly from within Inkscape [3], but currently it does not work.

Another tool for cleaning SVG files is svgcleaner [4]. Svgcleaner has a graphical user interface called SVG Cleaner [5]. This tool is also rarely found in the repositories of the popular distributions. Since the GUI is written in Qt, you have to compile it yourself.

The developers implemented svgcleaner in Rust, so you can install it using the Rust package manager Cargo:

cargo install svgcleaner

Svgcleaner takes an even more radical approach than SVGO and creates even smaller files. If you work with CSSs in SVG, make sure you avoid the svgcleaner program, because it also removes CSS attributes.

Since Rust writes the binary file to a separate subdirectory of its home folder, you first need to change the directory, and when you get there, call svgcleaner:

$ cd /home/user_name/.cargo/bin/
$ ./svgcleaner input_filename.svg output_filename.svg

Conclusions

Even if you're a vector graphics beginner, the tools and techniques described in this article will help you get started with optimizing your SVG web files. Smaller files will mean faster load times for your website visitors – and could also lead to less traffic and lower costs for you and your customers. However, it is important to note that all the tools described in this article are not designed to work with the next generation W3 vector-graphics standard SVG 2.0, which is currently at the draft stage.