Announcing svg_optimizer: Droids on Roids’ Open Source Flutter Package

SVG files are probably the most common graphic files in Flutter projects. We are using them because of their relatively small size and ability to scale without losing quality. There are some tools such as SVGO that let us optimize SVG files, so they can be even lighter, and svg_optimizier will help you to automate this process in your project!

Meet our own SVG-optimizing open source Flutter package!

The story of svg_optimzier

In Droids on Roids, we used to pass every SVG file from our designers through the SVGO tool – either through the online editor or manually in the console application. This can be bothersome and it’s also really easy to forget.

We immediately saw a space for automating this process and searched for a way to do this, but couldn’t really find a seamless solution. Obviously, you can create a custom Bash script that would do this for you, but then you have to manage another step in an already not-so-small CI/CD pipeline. So, when we heard about the asset transformers mechanism introduced in Flutter 3.22 we were really excited. It was exactly what we were looking for!

What are asset transformers?

If you follow Flutter’s new releases, you have probably already heard of the asset transformers mechanism. It was introduced in Flutter 3.22 and gives developers a lot of capabilities to manipulate assets in your project. To be precise, asset transformers automatically transform assets at build time. Once you add a transformer to an asset or a whole directory of assets, it will transform them every time you run or build your app. 

In simple words – asset transformers take every defined asset during build time and apply the given transformer. If you want to take a deep dive into asset transformers here is the official documentation.

How does it work?

So, how does svg_optimizer actually work? Well, at first glance it may seem a bit complicated, but in fact it is very simple – It utilizes the aforementioned SVGO tool to shrink all SVG assets in size.
First of all, let’s reach to the official SVGO documentation and explain what SVGO is.

And that’s what SVGO actually does – it removes the redundant information to minimize svg file size.

What svg_optimizer does is it takes an SVGO tool (which must be preinstalled on your machine) and just calls an optimization process with the default SVGO configuration for every specified asset. Simple, right? You can also specify your own custom SVGO configuration file and use it with the svg_optimizer package, but I’ll talk more about that later in this article.

How can I use it?

Our package is very simple, but you have to make some preparations before you can actually use it. As I mentioned before, svg_optimizer utilizes the SVGO optimization tool, so you will have to install the tool on your machine. SVGO is based on Node.js so, to install SVGO, you will need to install Node.js first, but don’t worry – it is really easy! 

I will only cover Node.js installation on MacOS, but installing it on other systems is similar and you can find the instructions here.

Let’s install Node.js first! 

Go to the console and type the command below.

brew install node

Once the installation is done, we can install the SVGO itself.

Go to the console and type the following command:

npm install -g svgo

… and that’s it! All of the prerequisites are completed and we can proceed to installing svg_optimizer in your Flutter project.

The first step is to add the svg_optimizer dependency to dev_dependencies in the pubspec.yaml file.

Next, add a transformers parameter to the assets part of your pubspec.yaml file.

The code snippet above adds a svg_transformer to the whole assets/svg directory, so all of the svg files in this directory will be transformed.

It doesn’t necessarily have to be a whole directory, you can also add a transformer to a single svg file.

After these steps, svg_optimizer is fully configured and ready to use in your project, but it’s not everything! 

Currently, svg_optimizer will optimize your svg files with the default SVGO configuration (which is great), but you can specify your custom configuration if you like. To run svg_optimizer with a custom configuration, you have to pass the svgo.config.mjs file path to svg_optimizer args with the --config parameter.

If you want to learn more about creating custom SVGO configurations, refer to the official documentation.

Benchmarks

You are probably wondering if optimizing those files is really that big of a deal and if it will make your project any better. Don’t you worry, I got you covered!

We prepared a set of benchmarks which prove that it is really worth it to use svg_optimizer in your projects.

For our example projects and associated assets, we’ve divided into small, medium and big project directories. A small project has 10 svg files, a medium has 100 svg files and a big has 400 svg files, which gives us a total of 510 svg files that can be optimized and measured during benchmarks.

Build output file size benchmark

The first benchmark was designed to measure the effectiveness of the svg_optimizer package by comparing the size of output files generated by the flutter build command, with and without the optimization package applied. This comparison helps in understanding the impact of SVG optimization on the overall project size.

This benchmark builds an IPA or App Bundle for small (10 svg files), medium (10 + 100 svg files) and large (10 + 100 + 400 svg files) projects, with and without svg_optimizer package and measures their size. 

This is an example output for App Bundle benchmark.

As you can see, svg_optimizer can significantly reduce your build output file. Of course, those savings depend on the number of svg files in your project and their “quality”.

On-screen svg loading time benchmark

Our next benchmark is all about measuring time reduction in terms of loading svg files and displaying them on screen. The benchmarking process involves using the flutter_driver package to automate the loading of svg files on-screen and measuring the time taken for them to render. 

What does this benchmark actually do? 

It takes all of the svg files in the example project and displays them in a column. Next, we measure the time of this process in a widget test with a traceAction function. This records the timeline of the given action and sends the measured data to flutter_driver which allows for saving it in a file. 

Upon completion, the test results are saved in the example/build directory. Two files, loading_svgs.timeline.json and loading_svgs.timeline_summary.json, contain detailed metrics on the rendering times. The loading_svgs.timeline.json file can be opened with Chrome browser’s tracing tools, available at chrome://tracing, which allows for an in-depth analysis of the performance impact.

So, first we had to run the test without svg_optimizer. This is how the output file opened in Chrome’s tracing tool looks like.

All of the DartWorker rows are basically the workers that are trying to load svg files. As you can see, it takes around 300 ms to load and display unoptimized files.

Next, we had to run the test with svg_optimizer added to all of the assets and here is the output file.

After optimization, it took around 200 ms to load svg files and display them on screen. 

svg_optimizer saved ~100 ms which is ~30% time reduction, so it’s a significant improvement!

The above benchmarks were conducted on an iPhone 15 Plus.

Summary

In this article, we covered the basic configuration of the svg_optimizer and analyzed the potential benefits that come with using this package.

We believe that the package brings a great value to the projects and we encourage you to give it a try.

You can also check our svg_optimizer on pub.dev or GitHub!

I hope that you enjoyed this article. Thank you for reading!

Related posts