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 → 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:
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
converting the color to
"#fafad2" could save a few bytes.
Style to xml.
Converts style attributes to XML
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.
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
ids are not
referenced and can be removed.
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 ( → → (Alt+D)), rather than duplicating the object ( → (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 ( → → ) 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 → (Ctrl+L) can remove unnecessary nodes.
|© 2005-2017 Tavmjong Bah.||Get the Book or EBook.|