Inkscape for the Web

Inkscape » SVG and the Web » 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:

Simplify colors. Convert all colors to #rrggbb format (or #rgb format if possible). Inkscape already uses this format by default, but if you import a file with say fill="lightgoldenrodyellow", converting the color to "#fafad2" could save a few bytes.
Style to xml. Converts style attributes to XML attributes, e.g. style="fill:#ff0000" to fill="#ff0000". Some people argue that using XML attributes is better practice. It will probably result in slightly larger files. If you plan on using CSS to style objects, don't enable this option. It, may, however be useful if you plan on using your drawing on a mobile phone as the style attribute is not supported in the SVG Tiny specification. Inkscape always uses style attributes.
Group collapsing. Removes Groups if they don't have attributes or a <title> or <desc> children. Inkscape created files will not have these unless you have used the XML Editor dialog or the Object Properties dialog to specifically add them.
Enable id stripping. Removes id attributes. Inkscape assigns an id to all objects (e.g. id="rect3045"). These attributes are useful when an object is referenced by another (e.g. an object is cloned using the <use> tag) or in referring to an object in JavaScript. Most ids are not referenced and can be removed.
Embed rasters. Embeds externally referenced bitmap images such as PNGs.
Keep editor data. Prevents removal of items in the Inkscape or Sodipodi Name Spaces that are useful for editing with Inkscape (e.g., Grids and Guide Lines).
Enable viewboxing. If a viewBox attribute is not present, creates one using the width and height attributes, and then sets both width and height attributes to 100%. This is useful if you wish your SVG file to automatically scale to use all available space on a web page.
Strip xml prolog. Removes XML prolog (i.e., <?xml version="1.0"?>).
Set precision. Sets numerical precision on all coordinates and attributes. Drawings meant for the web rarely need precision greater than three or four decimal places. You can also set the default numerical precision used by Inkscape in the Inkscape Preferences dialog in the SVG output section (Numerical precision).
Indent. Sets the indentation for each XML opening (or closing tag). Options are Space, Tab, and None. In all cases, each tag with attributes is placed on one line.

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.


Simple Animation		Chapter 24. Customization