How to Optimize/Compress and Beautifly SVG Graphics FIles

When you are creating Vector Graphics using tools such as Inkscape and Adobe Illustrator then you can see that Size of created SVG file is quite big, and when you look at Source Code of SVG file, You can see that there is lot of unwanted metadata and attributes, which are not required. That is Why,

When You want to Optimize SVG file for your Website, you want small file size.

How to Optimize SVG Files

There is great Node.js module, which you can install and use to optimize big SVG files, So, let me show you, How you can install it.

First, Download and install Node.js, You can Download it from https://nodejs.org/en/download/, Just download latest stable version of it and install it in such a manner that you can use node.exe from windows Command Prompt.

After installing node.js, lets check if we can access node.exe from Windows Terminal or Command Prompt.

where node
@rem -- N:\NodeJSPortable\App\NodeJS\node.exe

where npm
@rem -- N:\NodeJSPortable\Data\npm.cmd

Now, Lets install svgo module or package for node.js. Open Windows PowerShell or Command Prompt, and use command given below.

npm install -g --verbose svgo
@rem -- npm info it worked if it ends with ok
@rem -- npm verb cli [ 'N:\\NodeJSPortable\\App\\NodeJS\\node.exe',
@rem -- npm verb cli   @rem -- 'N:\\NodeJSPortable\\Data\\node_modules\\npm\\bin\\npm-cli.js',
@rem -- npm verb cli   'install',
@rem -- npm verb cli   '-g',
@rem -- npm verb cli   '--verbose',
@rem -- npm verb cli   'svgo' ]
@rem -- npm info using npm@3.5.3
@rem -- npm info using node@v5.7.0

after installing svgo package for node.js, now we can use this package from command prompt. To know more about svgo you can check these websites.
https://github.com/svg/svgo
https://github.com/svg/svgo-gui
https://jakearchibald.github.io/svgomg/

NOTE: When you are working with SVG files which has UTF-8 encoded data/string, then you should use PowerShell instead of Standard Windows Command Prompt, because in some cases command prompt does not work as expected.

How to use svgo

Copy Full Path of your SVG file to Windows Clipboard and Open PowerShell.

@rem -- Case 1 (When You wanna Overwrite Existing SVG File`
svgo.cmd -i "input_svg_file_path.svg"

@rem -- Case 2 (Write Optimized version of SVG into Different File)
svgo.cmd -i "input_svg_file_path.svg" "output_svg_file_path.svg"

So, now you have a pretty long text string.

How to Beautifly SVG Files

You can not easiliy edit Optimized SVG files using test editor, because it is not readable, so we want to make it readable or prettty.

NOTE: When you are using git as version control system for your project and want to commit optimized SVG files to git, then you should Beautifly it before commiting to git.

There is a good plugin gsvg (Git-Friendly SVG), which we can use to Beautifly SVG files. so lets download and install it for node.js.
https://www.npmjs.com/package/gsvg

npm install -g --verbose gsvg
@rem -- npm info it worked if it ends with ok
@rem -- npm verb cli [ 'N:\\NodeJSPortable\\App\\NodeJS\\node.exe',
@rem -- npm verb cli   'N:\\NodeJSPortable\\Data\\node_modules\\npm\\bin\\npm-cli.js',
@rem -- npm verb cli   'install',
@rem -- npm verb cli   '-g',
@rem -- npm verb cli   '--verbose',
@rem -- npm verb cli   'gsvg' ]
@rem -- npm info using npm@3.5.3
@rem -- npm info using node@v5.7.0

How to use gsvg

Copy Full Path of your Optimized SVG file to Windows Clipboard.

gsvg.cmd "output_svg_file_path.svg" "pretty_svg_file_path.svg"