9.15. Minify SVG

A completed SVG file could get fairly large in size. Considering that these files would be accessed through a network and the web with a browser, large files would consume more time to load. Optimizing such files is key to reducing load times, which has proven useful for other browser files such as html, css and javascript. Minification is the process of removing all unnecessary characters from text-based files without changing its functionality. This includes but not limited to white space characters, new line characters and comments which are only useful for readability but not needed for execution.

Inkscape has a built-in function to reduce the file size of an SVG called Optimized SVG. It requires some configuration, and if not configured properly could possibly produce unwanted results. Fortunately in Inkscape+SAGE there is a save file type which is pre-configured for optimizing an SVG file to be used with IntegraXor.

[Note] Note

Minifying an SVG should only be done when the SVG is complete and ready for deployment.


Save a Copy window

Select "Save a Copy..." from the "File" menu (SHIFT-CTRL-ALT-S). A pop-up window should appear such as the one in the figure above. Make sure the file save location is correct and select "Optimized SAGE SVG (*.min.svg)" from the save as type selection box. It is best to leave the filename as it is for better reference because the file extension will add a ".min" to the filename automatically to differentiate the files and prevent overwriting the original. In the example above it should say gasskid in the file-name field. When done, click the save button to begin the process and save the new minified file.

[Note] Note

Using "Save as..." (SHIFT-CTRL-S) will work as well, but would load the newly created file into the main window rather than creating it in the background. Any editing from here onwards would be modifying the minified SVG and NOT the original.


[Tip] Tip

Alternatively, by adding a '.min' or '.min.svg' at the end of the file-name and leaving the save type to its default (Inkscape SVG), would yield a similar outcome.

gasskid.min
gasskid.min.svg


Upon clicking the save button, the process will start and depending on the size and complexity of the original file it may take longer to complete. There are TWO indicators that the process has completed. First there would briefly be an indication status in the status bar (bottom-most part of the main window), indicating the file has been successfully saved. The other would be checking the folder for the newly created file or the time-stamp of the file if the file already existed in the folder and was replaced.

[Note] Note

If the output file would replace an existing file, there will be a pop-up window to confirm the replacement of that file. If 'Cancel' is chosen, a new save window will appear, however, proceeding with this window would produce a similar outcome as if 'Save as' were used (the file would open in main window). This is an issue within Inkscape itself and could possibly be fixed in the future.


File saved indicator

[Note] Note

The file-name in the indicator is the name of the file that is being copied and not the new file being created. This is the default behaviour of Inkscape when saving a copy to any file type.


[Caution] Caution

DO NOT close Inkscape while it is still processing and saving the minified SVG; error messages will appear. However, the minified file would still be created and function as usual.


It is advised that when creating a minified SVG, the original is kept for further editing in the future. Minification should always be done from the original file. It is possible to edit and save (CTRL-S) the minified SVG; the file would remain minified. Furthermore, when doing heavy editing on an SVG and CTRL-S is used to constantly save progress the time it takes to complete the process may be a problem and could introduce errors if editing is continued without waiting for the process to complete.