Leon Atherton

Leon is a developer at IDRsolutions and product manager for BuildVu. He is responsible for managing the BuildVu product strategy and roadmap, and also spends a lot of his time writing code to build new features, improve functionality, fix bugs, and improve the testing for BuildVu.

6 Tips for Optimising SVG Files

2 min read

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 HTML5 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 JPDF2HTML5 where we demonstrated the effect these optmisations have in our PDF to HTML5 converter.

You can try the PDF to HTML5 converter online for free at convert.idrsolutions.com.

If you’re a first-time reader, or simply want to be notified when we post new articles and updates, you can keep up to date by social media (TwitterFacebook and Google+) or the Blog RSS.

Leon Atherton

Leon is a developer at IDRsolutions and product manager for BuildVu. He is responsible for managing the BuildVu product strategy and roadmap, and also spends a lot of his time writing code to build new features, improve functionality, fix bugs, and improve the testing for BuildVu.

Leave a Reply

Your email address will not be published. Required fields are marked *