SVG files, or Scalable Vector Graphics files, are an improved way of using vector graphics on the internet. They are fairly easy to create in Adobe Illustrator or other design tools, and there are a variety of ways that SVG files can enhance web performance.
Once you’ve created an SVG file, it can be very helpful to optimize it so that it is easier to work with later on.
This article will show you a variety of 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 allows 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 in order 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.
This is another technique that you may need to experiment with the Fidelity and Smoothness tolerances to see optimal results.
Step 2:
Take the Smooth Tool, and move it along the path that has the 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’re a dialog box with the Warp Tool options.
Step 2:
Set the size of the brush to a couple of sizes bigger than what the edited object is. 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 together.
You can choose to rename each of the layers, 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, open it and drag-and-drop your .svg file in the app.
The app will automatically optimize your file and will make the file size much smaller.
The Online Method
If you find that you are regularly having difficulty with the size of your Illustrator files or you are struggling with all the internal settings that Illustrator adds on, it may be that you need to better understand the export settings available with Illustrator. 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 and at the bottom of the screen.
The next selection is “Compare gzipped,” which is helpful if you are planning 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 selection will give you the highest percentage saving.
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, clean IDs, removing/tidying the enable background, and rounding/rewriting number lists.
An important thing to keep in mind with the IDs is that if you are planning 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, in the lower right-hand corner there is a round blue button. If you click on that, you will be shown the options on 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’re looking 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 you can!
If you know any other ways to optimize an SVG file that we did not list here please share them in the comments section.
