Tools for Optimizing SVG

A list of SVG optimization tools

This article will introduce various SVG optimization tools, covering command line tools, desktop applications, web applications, APIs, and design software's own functions, and recommend some in-depth learning resources. It should be noted that many tools are no longer maintained, but are still available and can be used in combination.

Command Line Tools

• SVGO (the most popular tool at present)
• Scour
• svgcleaner

Although these tools are no longer actively maintained, they can still effectively optimize SVG. There is no need to be limited to a single tool, and you can choose the appropriate tool combination according to the actual situation.

Command line tools combined with task runner

• grunt-svgmin
• gulp-svgmin
• gulp-svgo
• svgo-loader (webpack)

These plugins can integrate tools such as SVGO into your front-end workflow.

Desktop application

• ImageOptim (macOS)
• macOS "Folder Operation"
• SVGO GUI (Obsolete, 32 bits)

Windows and Linux systems also have common image optimization software, but their support for SVG needs further confirmation.

Web Application

These tools are convenient for you to upload individual SVG files for online optimization:

• SVGOMG
• Nano
• Kraken
• SVG Miniifier
• SVG optimiser
• svg-editor

API

• ImageOptim Web Service API
• Kraken
• Imgix (SVG support required)
• Cloudinary (mainly used for uploading, optimization function is not yet clear)

Design software comes with optimization function

Designing SVGs exported by software usually requires optimization, but the software itself also provides some optimization features:

• Sketch: svgo-compressor (and SVGito web application)
• Figma: Provides certain optimization functions by default
• Illustrator: SVG NOW
• Inkscape: Export "Optimized SVG" (using Scour internally) or use SVGO-Inkscape

In-depth learning resources

The following articles and videos will help you gain a deeper understanding of SVG optimization:

• Michelle Barker: Web-side SVG optimization
• Jayden Seric: How to optimize SVG
• Sara Soueidan: Tips for creating and exporting better SVGs for the web and practical SVGO optimization tools
• Cosima Mielke: Tools and resources for editing, conversion and optimization of SVG
• Jake Giltsoff: Web-side SVG, preparation and optimization
• Andreas Larsen: SVG optimization for web use
• Josh Stoik: Web-side SVG optimization

Manual SVG optimization

• Raymond Schwartz: Understand and manually improve SVG optimization
• Amberd Design Studio: How to gradually optimize SVG files
• Video Tutorial: Reducing Vector Points in Illustrator
• Kevin Powell Video Tutorial: How to Create, Clean, and Optimize SVGs
• Brenda Storer presentation: Interpreting SVG code
• Dudley Storey: SVG Optimization: Basics

Notes:

1. Tools that are no longer maintained: SVGO, Scour, svgcleaner. ( Update : SVGO has now been restored to maintenance.)
2. Wikipedia's Johannes Kalliauer points out that every tool has its advantages. Although SVGO is popular, it also has the most bugs. svgcleaner has the fastest speed. Scour and svgcleaner can also fix damaged SVGs, while SVGOs can't.

The above is the detailed content of Tools for Optimizing SVG. For more information, please follow other related articles on the PHP Chinese website!