Optimize SVG files for websites
Slimming Down

© Lead Image © Sandra Cunningham, Fotolia.com
Inkscape creates W3C-compliant SVG files, but they are usually larger than they need to be for the web. We'll show you how to optimize SVG files for faster load times.
Graphic images can give a website clarity and visual interest, but the web designer must contend with the tax that heavy graphic images place on bandwidth and load time. Photo images are typically scaled down to a lower resolution (and smaller file size) to run on the web, and for other types of image files, smaller is also almost always better.
One way to reduce the size of web images is to rely on vector graphics whenever possible. The Scalable Vector Graphics (SVG) format was originally developed for use on the Internet. Although SVG typically leads to significant economies of scale when compared to pixel graphics, it has taken decades for web developers to become reasonably comfortable with it.
The most popular tool for vector graphics on Linux is Inkscape. You can certainly save some kilobytes by generating graphics files with Inkscape rather than an alternative raster graphics tool like Gimp. But using Inkscape doesn't mean your files will automatically be optimized for the web. This article highlights some steps you can take to reduce the size of vector graphics image files.
Turning Big into Small
There are two ways to display a simple circle using HTML graphics: either as a path (Listing 1) or as an SVG element (Listing 2).
Listing 1
Circle as Path
<path d="M 162.66582,125.05696 A 70.917999,70.917778 0 0 1 91.747818,195.97474 70.917999,70.917778 0 0 1 20.829819,125.05696 70.917999,70.917778 0 0 0 1 91.747818,54.139183 70.917999,70.917778 0 0 1 162.66582,125.05696 Z" style="fill:#000000;stroke:none;stroke-width:7.99999;stroke-linecap:round; stroke-linejoin:round;stop-color:#000000" id="path10" />
Listing 2
Circle per SVG
<ellipse ry="70.917778" rx="70.917999" cy="125.05696" cx="91.747818" id="path10" style="fill:#000000; stroke:none;stroke-width:7.99999;stroke-linecap:round;stroke-linejoin:round;stop-color:#000000" />
Two nodes are all you need for the path, but most programs use at least four, and that includes Inkscape. These extra nodes are due to the fact that slight deviations from the original path occur with only two nodes, but this extra level of precision is often unnecessary in the web context.
As you can see, the source code from Listing 1 needs far more characters and accordingly more space. As long as you can work with elements defined in SVG (Listing 2), you should do so.
Clone or Duplicate?
Graphic artists often use a duplicate of an object instead of a clone. The duplicate repeats the complete description of the object; only the coordinates and the ID change (Listing 3). A clone, on the other hand, uses the use tag with the ID of the original (Listing 4).
Listing 3
Duplicate
<ellipse ry="8.595953" rx="8.5959797" cy="62.735138" cx="29.425798" id="path10" style="fill:#000000;stroke:none;stroke-width:0.96968;stroke-linecap:round;stroke-linejoin:round;stop-color:#000000" /> <ellipse style="fill:#000000;stroke:none;stroke-width:0.96968;stroke-linecap:round;stroke-linejoin:round;stop-color:#000000" id="ellipse102" cx="49.26012" cy="62.735138" rx="8.5959797" ry="8.595953" />
Listing 4
Clone
<ellipse ry="8.595953" rx="8.5959797" cy="62.735138" cx="29.425798" id="path10" style="fill:#000000;stroke:none;stroke-width:0.96968;stroke-linecap:round;stroke-linejoin:round;stop-color:#000000" /> <use height="100%" width="100%" transform="translate(21.089236)" id="use104" xlink:href="#path10" y="0" x="0" />
The code example from Listing 3 needs 488 characters, whereas the cloned variant from Listing 4 needs only 406 characters – with the same result. The difference might seem relatively small, but this is only a single simple object. In the case of more complex graphics, several kilobytes can quickly accumulate.
Some people might think that a few kilobytes do not matter today, but with many users accessing the Internet via smartphones, traffic is still relatively expensive. Some organizations also pay for data traffic on the server end, and a few kilobytes for a single image can add up to several gigabytes by the end of the month. But regardless of the traffic issues, optimization is a healthy habit for any website. Your visitors benefit from a compact website with faster load times and will be more likely to come back.
You should always remove unneeded nodes from paths, but this can only be done manually. An ideal path looks like the one shown in Listing 5.
Listing 5
Optimized Path
<path d="M504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zM212 140v116h-70.9c-10.7 0-16.1 13-8.5 20.5l114.9 114.3c4.7 4.7 12.2 4.7 16.9 0l114.9-114.3c7.6-7.6 2.2-20.5-8.5-20.5H300V140c0-6. 6-5.4-12-12h-64c-6.6 0-12 5.4-12 12z"/>
Inkscape
The majority of Linux users use Inkscape to create SVG graphics. Many users don't realize that Inkscape inflates graphics with a lot of unnecessary stuff. This starts with unused definitions and continues with the Inkscape and Sodipodi document types and ends with a heap of metadata. The web browser does not need all this information to render the graphics.
If you fill an object with a gradient, a definition will appear in the <defs>
section at the beginning of the document. If you change the fill, the old definition will remain in the file. You can remove these unused definitions in Inkscape with File | Clean Document.
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
-
Zorin OS 17 Beta Available for Testing
The upcoming version of Zorin OS includes plenty of improvements to take your PC to a whole new level of user-friendliness.
-
Red Hat Migrates RHEL from Xorg to Wayland
If you've been wondering when Xorg will finally be a thing of the past, wonder no more, as Red Hat has made it clear.
-
PipeWire 1.0 Officially Released
PipeWire was created to take the place of the oft-troubled PulseAudio and has finally reached the 1.0 status as a major update with plenty of improvements and the usual bug fixes.
-
Rocky Linux 9.3 Available for Download
The latest version of the RHEL alternative is now available and brings back cloud and container images for ppc64le along with plenty of new features and fixes.
-
Ubuntu Budgie Shifts How to Tackle Wayland
Ubuntu Budgie has yet to make the switch to Wayland but with a change in approaches, they're finally on track to making it happen.
-
TUXEDO's New Ultraportable Linux Workstation Released
The TUXEDO Pulse 14 blends portability with power, thanks to the AMD Ryzen 7 7840HS CPU.
-
AlmaLinux Will No Longer Be "Just Another RHEL Clone"
With the release of AlmaLinux 9.3, the distribution will be built entirely from upstream sources.
-
elementary OS 8 Has a Big Surprise in Store
When elementary OS 8 finally arrives, it will not only be based on Ubuntu 24.04 but it will also default to Wayland for better performance and security.
-
OpenELA Releases Enterprise Linux Source Code
With Red Hat restricting the source for RHEL, it was only a matter of time before those who depended on that source struck out on their own.
-
StripedFly Malware Hiding in Plain Sight as a Cryptocurrency Miner
A rather deceptive piece of malware has infected 1 million Windows and Linux hosts since 2017.