04.Dec.17

Pantaley Stoyanov

Pantaley Stoyanov

Enable compression on SVG files

Receiving PageSpeed Insights "Enable compression on SVG files" recommendation with gzip or deflate enabled is a strange error with a simple solution.

The issue

Our website had a PageSpeed Insights recommendation to enable compression on a few SVG files.

pagespeed-insights-compression

The gzip compression was already enabled, and just in case I explicitly added an SVG extension to be compressed.

Unfortunately, this action didn’t resolve the recommendation.

Next step was to see if our configuration was working. On the following screenshot, I’ve checked with Network Monitor that the SVG files were indeed compressed:

network-monitor-gzip-svg

This situation was frustrating as I followed all of Google’s suggestions correctly but still having an error.

In the end the solution was simple, but because of the misleading recommendation the time to find it was significant.

The Solution

After you double check that server compression is enabled you need to compress or more correctly edit the SVG file itself to reduce size.

I’ve found a useful tool called SVG Cleaner, there are probably many more similar tools, which stips unnecessary parts in a published SVG files for instance:

  • Temporary data used by the vector editing application
  • Non-optimal SVG structure representation
  • Unused and invisible graphical elements

After replacing the files with the new ones, the Enable compression error has resolved.

svg-cleaner

If you utilize SVG files on your website, you might have the same issue. This solution will fix that irritating PageSpeed Insights recommendation.

Need consulting on this topic?

Yes No