How to Optimize SVG with the Help of Trym App

KontentApps
KontentApps
Published in
3 min readSep 9, 2016

As we all moved to responsive design where all elements are scaled and resized depending on the device the website is viewed on, SVG format has become the solution to many problems while creating adjustable layout with user-friendly interface.

Using SVG graphics on a website is going to provide visitors with high-end performance and smooth browsing. Here comes one of the main advantages of using SVG format — maintaining high quality of any vector graphics, if they are zoomed or resized. Also each element and attribute in SVG files, such as logo, navigation icon, vector-style illustration or pattern can be animated and so opens the door for more creativity and leap of imagination.

We’re also using SVG graphics wherever possible, including icons on the Zoommy website. But the main issue of SVG format is that it’s not optimized. Such programs as Adobe Illustrator or Sketch can add some service information, paddings and comments that the end user actually doesn’t need. Sometimes it can be really annoying, especially when you’re in the middle of your workflow process.

To help you save your time, we’d like to show with an example how you can optimize and convert SVG icon on the fly.

So here’s an example of Instagram free icon by Freepik:

Icons made by Coucou from www.flaticon.com is licensed by CC 3.0 BY
View source in Google Chrome

Well, obviously there’s too much unnecessary stuff here: spaces, breakes, comments… and the end-user will load this file from a server that is real overhead.

Now let’s run this icon through Trym and see how you can simplify your work with this helpful app:

Trym application

As you see you can get 11% of effectiveness as the program removes all unnecessary stuff from the file. Please notice that this percentage is not constant, it may vary from 2 to 30%. It depends on chosen icon, image editor and complexity.

With the help of such useful program you can view, optimize and convert SVG icons with no trouble. If you have a multi page website with a bunch of SVG files, Trym will save your time and drive space. Check it out!

For more information about developing other helpful programs for designers and developers, please check our website at https://kontentapps.com

--

--