Tips for smaller svg sizes

January 05, 2019

You fire up your favourite editor and produce SVGs but found their sizes to be bigger than expected. Is there anything you can do to reduce SVG file sizes? Read on to find out how to reduce SVG sizes to a bare minimum.

Updated (2019–01–15): Included avoiding base64 raster images using image tag

Consider the case of a simple ellipse with the same radius horizontally and vertically, which is essentially a circle:

When converted to paths, even after compression, Nano still requires 94 characters. On the other hand, Nano is smart to detect a circle from an ellipse and requires only 37 characters for the same SVG.

How about a rounded rectangle?

Not using paths requires only 53 characters, as compared to 150 characters for paths.

If you have a normal rectangle:

Consider the case of this beautiful logo, for which the original file have merged paths:

Once paths are merged, it is extremely difficult for compressors to understand your complicated merged paths, resulting in less compression. If elements are not converted to paths and merged, compressors can dynamically choose the best compression, resulting in higher compression ratio at 84.5%.

Consider the following example, where we have 2 rectangles with the same formatting as siblings, followed by an ellipse, and then followed by 2 of the same rectangles as earlier, also as siblings.

What happens is that shapes with the same formatting can be grouped or merged and share their same styling, resulting in better compression.

Select shapes with the same formatting, and then select Bring to front or Send to back.

Consider the example below where the left image uses a complex gradient fill, but the fill actually results in the same color for the entire shape, therefore we can use a simple fill for better compression.

Consider the image below where on the left, you have an image that uses gradients with userSpaceOnUse while on the right, you have (almost) the same image without userSpaceOnUse.

Using gradients with userSpaceOnUse attributes results in repeated gradients that perform almost the same, bloating the file size substantially, while with simple gradients, we can have 69.3% more compression savings.

Consider the circle below where on the left we have a rectangle with a gradient, but a circle clip path is applied, and therefore showing only a circle, while on the right, there is just a circle, without clip path.

Obviously, not using clip path can render substantive savings amounting to 22.4% in this case. While there are cases where you might need mask and clip paths, they are few and far in between, so if you can avoid them, your SVG will compress better.

SVG minifiers normally do not calculate these clip paths to remove them due to their complexity, therefore, you would have to decide if you need clip paths, and avoid them if possible.

SVG permits the inclusion of raster images using the image tag. However, these raster based images will not be compressed as they are already compressed in their native format.

Related posts:

An executive from a large brewery in St Louis (wink) recently shared with me an amazing industry secret. On-premise drinkers with exactly 1/3 left in their glass are 3X more likely to buy another…

Over the past months I have been reading (and re-reading) Iain Mcgilchrist’s book, The Master and his Emissary. It is a long book of quite extraordinary depth and scope ranging, as it does, from the…

Even if we were ready to leave everything there is almost zero chance that everything would leave us alone. You could be under the most beautiful sky counting the stars, your counting punctuated by…