Inkscape for the Web

To be quite honest, making Inkscape convenient for creating SVGs for the web has been more of an afterthought. Having said that, many of the great SVG examples on the web have started life as Inkscape drawings, as evidenced by tell-tail fingerprints left in the source. This section focuses on ways to prepare Inkscape SVGs for the web.

A number of items have already been covered in this chapter. This section covers cleaning up the SVG source.

Vacuuming.  As a drawing is created, items like Gradients, Patterns, Markers, and Filters are stored in the <defs> section of the SVG file. If you later delete an object with, for example, a Gradient, the Gradient is not deleted. The File icon Vacuum Defs command will remove unused items.

Save as Plain SVG Inkscape stores a lot of information in the SVG file in the Sodipodi and Inkscape Name Spaces. The information is useful for editing the file with Inkscape but is not needed for display. It can be removed by choosing the Plain SVG option in the drop-down menu in the Save As dialog. Note, that this may remove things you want to keep, like scripts.

Save as Optimized SVG Choosing Optimized SVG in the drop-down menu in the Save As dialog will pop-up a dialog that allows you to customize the saved SVG file. This works by passing the file through the Scour script. Here are the various options:

Use clones.  If you include the same object multiple times in a drawing, you can reduce the file size by using Clones (Edit Clone icon Create Clone (Alt+D)), rather than duplicating the object (Edit icon Duplicate (Ctrl+D)). The former inserts a reference to the original object while the latter copies the object. References usually take up less file space than copies.

Simplify the drawing.  Keep in mind how your drawing is going to be viewed. Check that you don't have hidden objects, objects outside the drawing area, or objects that are too small to see. You can use the outline mode (View DisplayMode Outline) to help check for such objects. Check that the Paths don't have too much detail. (A good example of this is that Wikipedia maps often have orders of magnitude more nodes than necessary at typical viewing scales.) Careful use of Path icon Simplify (Ctrl+L) can remove unnecessary nodes.