Shrink Polymer iconsets by 55% (SVG)

Optimizing the download size of an application is essential for a great user experience. One often overseen aspect are embedded SVG icon sets, based on Polymer’s iron-iconset-svg element.

In particular tools like Inkscape or Illustrator add lots of unnecessary ballast to SVG files: be it when creating a new icon from scratch or when resizing the SVG viewport of an existing icon. The SVG file will be littered with unnecessary IDs, Inkscape specific attributes, white spaces, and the like.

But how much? While optimizing our own icons, we achieved an average size reduction of 55%! So, it’s clearly worth it if you have larger iconsets.

Finally, how to optimize the SVGs? That’s actually rather simple. The easiest option is to use Jake’s web-based SVGOMG: load the SVG, decide what to optimize, export, done. If you have many files, you can use directly SVGO (SVGOMG is only a graphical interface on top), and optimize the SVGs from the command line.

Happy coding!

Want to learn more about Polymer? Have a look to all our Medium posts on Polymer.