Optimizing your SVG files with GUI tools

The SVG output from Sketch and other tools may contain data that are not required for display. You can also use git or other tools to do version control on SVGs, but you should remove unnecessary data before you commit them.

There is a Node.js tool called svgo, which allows you to use an unnecessary You can apply formatting and minimization processes while removing the data.

The need to do it with GUI tools

You don't have to use a GUI tool to do it, but it's an option for situations where you want to optimize a single file, or you want to use a text editor instead of a terminal, and you don't need a commit hook in git.

If you have the Sketch plugin installed, you can get an optimized export. You can do this, so there are no leaks. Also, it's not limited to SVGs, but if it's an icon, you can adjust the size of the artboard before exporting. Align it, keep the paths outlined, and make sure the artboard name makes sense. It's a good idea to do this. By doing this, the size of the ViewBox will be unified, and unnecessary transform information will be removed from it. A meaningful name should be inserted into the <title> element.

Plugins

For Figma, see With Figma's new SVG Exports, less = more, it appears that there are no tools for this.

• 1000ch/vscode-svgo: Run "Install Extensions" in the command palette (⌘ + Shift + P) and search by svgo
• 1000ch/atom-svgo: Run apm install svgo or search by svgo in "Install"
• 1000ch/Sublime-svgo: Run "Install Extensions" in the command palette (⌘ + Shift + P) and search by svgo

VSCode and Atom have Node.js built-in, so all you have to do is install it and you're good to go! Sublime Text does not include Node.js, so you have to install it. The path to Node.js (node) must be in the terminal's PATH.