Features Videos Help About Updates
Menu Buy Now

Optimizing SVGs

First Steps:
Getting Started
Live-Reload Browsers
Browser Sync
Set Language Options
Set Output Paths & Action
Second Steps:
Defaults For New Projects
Build Your Project
Set Target Browsers
Stuff To Know:
CodeKit + Git
Troubleshooting
License Recovery
PostCSS Tools:
Autoprefixer
PurgeCSS
Custom PostCSS Plugins
Other Tools:
npm
Babel โ€” (JS Transpiler)
Terser โ€” (JS Minifier)
Rollup โ€” (JS Bundler)
Cache-Buster
HTML-Minifier
LightningCSS
Bless
Languages:
Sass
Less
Stylus
JavaScript
CoffeeScript
TypeScript
Pug
Haml
Slim
Kit
Markdown
JSON
Image Optimizers:
WebP
PNG
JPEG
SVG
GIF
Frameworks:
CodeKit Frameworks
Tailwind
Bootstrap
Bourbon
Bitters
Zurb Foundation
Susy
Nib
Jeet
Syntax Checkers:
ESLint
Advanced:
Hooks
Environment Variables
Adding Custom Languages
Team Workflows
Scripting CodeKit
Editor Plugins:
Nova
Atom
Sublime Text
Coda 2
More
Read-Only Mode
Upgrading From 2.0
FAQ
The SVGO logo

SVGO

Most editors include extra tags, attributes, and metadata in SVG files. CodeKit uses SVGO to optimize these files so they're small and fast.

Off By Default

SVG optimization is off by default. Unless you're using a build folder, the input SVG file is overwritten by the minified version. You may not want that (or you may want to set a different output path first) so SVGO is opt-in.

Enabling SVGO

Simply set the Output Action for SVG files to Optimize. For details, read Setting Output Paths & Actions. If you're not using a Build Folder, be sure the Output Path is set correctly so you don't overwrite the input file.


SVGO Options

First, make sure you've read Setting Language Options.

A screenshot of the SVGO project settings pane in the codekit window

To set options for all SVG files in a project simultaneously, open Project Settings and choose the SVG category under Languages, as shown above. To change options for just one file, select it and use the inspector pane.

Documentation

There are way too many options to cover here. Most are fairly self-explanatory, but you should read the official documentation for details.

Raster Images, Too

CodeKit can also optimize raster images.

Made in San Diego, CA

Follow the Developer on Twitter

Email Support

Report a Bug

Privacy Policy