Optimize SVG files for websites
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.
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.
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.
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.
Listing 6
Using Scour
$ 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.
Infos
- Scour: https://github.com/scour-project/scour
- SVGO: https://github.com/svg/svgo
- svgo plugin: https://github.com/konsumer/inkscape-svgo
- svgcleaner: https://github.com/RazrFalcon/svgcleaner
- SVG Cleaner: https://github.com/RazrFalcon/svgcleaner-gui
« Previous 1 2
Buy this article as PDF
(incl. VAT)
Buy Linux Magazine
Subscribe to our Linux Newsletters
Find Linux and Open Source Jobs
Subscribe to our ADMIN Newsletters
Support Our Work
Linux Magazine content is made possible with support from readers like you. Please consider contributing when you’ve found an article to be beneficial.
News
-
Red Hat Adds New Deployment Option for Enterprise Linux Platforms
Red Hat has re-imagined enterprise Linux for an AI future with Image Mode.
-
OSJH and LPI Release 2024 Open Source Pros Job Survey Results
See what open source professionals look for in a new role.
-
Proton 9.0-1 Released to Improve Gaming with Steam
The latest release of Proton 9 adds several improvements and fixes an issue that has been problematic for Linux users.
-
So Long Neofetch and Thanks for the Info
Today is a day that every Linux user who enjoys bragging about their system(s) will mourn, as Neofetch has come to an end.
-
Ubuntu 24.04 Comes with a “Flaw"
If you're thinking you might want to upgrade from your current Ubuntu release to the latest, there's something you might want to consider before doing so.
-
Canonical Releases Ubuntu 24.04
After a brief pause because of the XZ vulnerability, Ubuntu 24.04 is now available for install.
-
Linux Servers Targeted by Akira Ransomware
A group of bad actors who have already extorted $42 million have their sights set on the Linux platform.
-
TUXEDO Computers Unveils Linux Laptop Featuring AMD Ryzen CPU
This latest release is the first laptop to include the new CPU from Ryzen and Linux preinstalled.
-
XZ Gets the All-Clear
The back door xz vulnerability has been officially reverted for Fedora 40 and versions 38 and 39 were never affected.
-
Canonical Collaborates with Qualcomm on New Venture
This new joint effort is geared toward bringing Ubuntu and Ubuntu Core to Qualcomm-powered devices.