SVG files, or Scalable Vector Graphics files, are an improved way of using vector graphics on the internet. They are relatively easy to create in Adobe Illustrator or other design tools, and there are various ways that SVG files can enhance web performance.
Once you’ve created an SVG file, it can be beneficial to optimize it so that it is easier to work with later on.
This article will show you various steps and tips on how to optimize an SVG file easily.
Optimize an SVG file with Adobe Illustrator
Method 1: Simplifying Object’s Path
A great technique to try when optimizing your files is to work with the internal features in Adobe Illustrator that allow you to simplify your paths or reduce the extra points.
The first tool to use is the “Simplify” function.
Step 1:
Go to Object > Path > Simplify. Use the “Curve Precision” slider to manipulate the object and delete extra points.
Step 2:
You can view how this has changed the object in Outline mode by going to View > Outline.
Method 2: The Smooth Tool
Step 1:
Double-click on the Smooth Tool icon, which will open up the Smooth Tool options window.
You may need to experiment with this technique with the Fidelity and Smoothness tolerances to see optimal results.
Step 2:
Take the Smooth Tool and move it along the path with extra points to help reduce them.
Method 3: The Wrap Tool
Step 1:
Go to the Tools panel and double-click on the Warp Tool icon. This will show you a dialog box with the Warp Tool options.
Step 2:
Set the brush size to a couple of sizes bigger than the edited object. Select the object, then remove points by clicking the mouse button and moving it only a short distance.
While this technique may require some experimentation, it can help reduce the number of points.
Optimizing and Cleaning SVG files with Spritebot
Step 1:
Select all the items within the Illustrator by going to Select > All. Then, group them all together by going to Object > Group.
Now, in the Layers Penal, you can see that they are all grouped.
You can choose to rename each layer; they will be maintained in your file, which can help you reference the layer in the code.
They will be the ID tags in the .svg file.
Step 2:
Go to File > Export > Export for Screens. This will bring you to the “Export for Screens” options. Click on the gear icon.
This will open the Format Settings.
Click on the SVG on the right-hand side and make sure you have the below settings.
Then click Save Settings. Then click Export Artboard.
Step 3:
Click here to download SpriteBot and install it on your computer.
After the installation is complete, please open it and drag and drop your .svg file in the app.
The app will automatically optimize your file, making the file size much smaller.
The Online Method
If you regularly have difficulty with the size of your Illustrator files or struggle with all the internal settings that Illustrator adds, you may need to understand the export settings available with Illustrator better. A great tool to use is a free service called SVGOMG.
Once you are on the website, the first step you want to take is to go to the upper left-hand corner and click on “Open SVG.” This will lead you to a changed interface that shows your optimized file, just like it would appear on a web browser. There are a variety of settings that you can switch on and off so you can compare the file sizes and find out how much space you will be saving.
In the top right-hand corner, you can view how much space the original and the optimized files take up and the percentage of space saved with the optimized version at the bottom of the screen.
The next selection is “Compare gzipped,” which is helpful if you plan to run your site through a gzip compression.
With SVGOMG, you can see exactly the difference that would make. You can also select “Prettify code,” which will help to make the formatting of the file’s code better readable (or “prettier”).
As with the other selections, you can see exactly what will give you the highest percentage of savings.
Below the prettify code selection is the “Multipass” option. This is fairly self-explanatory; it runs multiple passes on the code.
Just as with the other options, it may or may not save you more.
Pictured above is the use of the “Precision” tool. This works to match your optimized version more or less to the original file.
If you keep it farther to the left, then you’re choosing to be less strict about the quality, and further to the right means you want it to match more precisely to the original file.
The other features in the lower right-hand corner can help by cleaning up whitespace in the file, cleaning IDs, removing/tidying the enable background, and rounding/rewriting number lists.
An important thing to remember with the IDs is that if you plan on using the SVG file for web design, you may want to leave the ID in there.
Another great feature of SVGOMG is that you can view the code. In the top left corner, click on “Code,” and you can see how the features on the right-hand side directly affect the code.
Once you’re finished, a round blue button is in the lower right-hand corner. If you click on it, you will be shown the options for where you’d like to save the file.
At the end of the day, optimizing a single SVG file may not make a big difference in the performance of your website. However, if you want to include a wide variety of vector graphics on a single site, the small changes in each file size can make a big difference overall. So, the best practice when dealing with SVG files is to optimize them as much as possible!
If you know other ways to optimize an SVG file we did not list here, please share on social media and tag this post!