SVG (Scalable Vector Graphics) has seen a rapid increase in usage in recent years since being included in the HTML5 specification as web browsers improve support, and more websites take advantage of the benefits SVG offers over raster graphics. But one of the main disadvantages of using SVG on the web is that can be significantly slower than using raster images.
Competition for web browser market share (and the push for innovation on the web) has seen the likes of Google, Mozilla and Microsoft pour significant resources into making web browsers faster. This has been great news for web developers concerned about SVG performance, but there is still some way to go, particularly with very large and detailed SVG files such as complex diagrams and maps, especially considering the trend towards browsing the web on mobile devices.
Thankfully it’s not all down to the web browsers, and another solution is actually to produce better SVG files. We make extensive use of SVG in our PDF to SVG converter (where files can get very complex!) and have found that it’s possible to make significant performance improvements with just a few simple changes. Here are 6 tips for optimising SVG files:
1. Move styles to CSS
Moving styles into CSS is a lossless optimisation that both reduces file size (making the file faster to load), as well as improves render speed by allowing the web browser to better optimise drawing.
Before:
After:
2. Use groups
Using groups to apply styles rather than applying styles to each path is a lossless optimisation that reduces file size (making the file faster to load), as well as improves render speed by allowing the web browser to better optimise drawing.
Before:
After:
3. Use relative commands where shorter
Using relative positions rather than absolute positions is a great, lossless way to reduce file size (making the file faster to load). This can sacrifice readability for humans, but it can significantly reduce file size, especially when small adjustments are made to shapes with large X or Y positions.
Before:
After:
4. Don’t apply default styles
This is one of the smaller optimisations, but nonetheless a worthwhile one. It is a lossless way to reduce file size, making the file faster to load.
Before:
After:
5. Reduce accuracy (number of decimal places)
Excessive accuracy is often seen in SVG files that are automatically generated. Decimal accuracy is great for zoom quality, but beyond 1 decimal place, the difference is barely noticeable. This is a lossy way to reduce file size, making the file faster to load.
Before:
After:
6. Remove duplicate commands
After following tip 5, you may find that there are now duplicate commands in the file that can be removed to reduce file size and make the file faster to load.
Before:
After:
So there are 6 tips for optimising SVG files, both by reducing file size and by allowing browsers to render the content faster. Some may seem like insignificant changes, however, when applied to complex, large SVG files, they quickly add up to a significant performance improvement.
If you would like to see what effect this has for real-life examples, please watch the September release update video for BuildVu where we demonstrated the effect these optimisations have in our PDF to SVG converter.
