Tools for Optimizing SVG

Command Line Tools

The biggest (and maybe only?) player in this space: SVGO. It's even used under the hood of other tools.

Using with a Task Runner

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

Desktop Apps

• ImageOptim (macOS)
• macOS "folder action"
• Before macOS 10.15 Catalina, you could use SVGO GUI, but it's 32-bit which makes it obsolete.

There are generic app for optimizing images on Windows and Linux, but I haven't yet confirmed any of them do SVG.

Web Apps

The idea with these tools is that you have an SVG on your machine and you upload it to this web app to optimize this one SVG.

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

APIs

• ImageOptim Web Service API
• Kraken
• Imgix supports SVG if you opt-in.
• It's not entirely clear if Cloudinary actually optimizes SVG, and their API is uploading-focused, but they do support "transformations" on SVG, and their fetch URL format is API-like.

Optimizing Directly Out of Design Tools

Typically, when you export SVG out of a design tool it is in dire need of optimization. Hence, all the tools in this article. The design tool itself can help though, at least somewhat.

• Sketch's svgo-compressor (there is also a Sketch-specific web app for this called SVGito)
• Figma does its best by default
• Illustrator has SVG NOW
• SVGO-Inkscape

Deep Dive Articles

• Michelle Barker: Optimising SVGs for the Web
• Jayden Seric: How to optimize SVG
• Sara Soueidan: Tips for Creating and Exporting Better SVGs for the Web & Useful SVGO[ptimization] Tools
• Cosima Mielke: Tools And Resources For Editing, Converting And Optimizing SVG
•  Jake Giltsoff: SVG on the Web, Preparing & Optimising
• Andreas Larsen: Optimising SVGs for Web Use
• Josh Stoik: Optimizing SVGs For Web Use

Manual/Hand SVG Optimization Work

• Raymond Schwartz: Understanding and Manually Improving SVG Optimization
• Amberd Design Studio: How to Optimize an SVG File Step-by-Step
• Video from us: Reducing vector points in Illustrator
• Video from Kevin Powell: How to create, clean up, and optimize an SVG
• Presentation by Brenda Storer: Cracking the SVG Code
• Dudley Storey: SVG Optimisation: The Basics

The post Tools for Optimizing SVG appeared first on CSS-Tricks.

from CSS-Tricks https://ift.tt/2vqse0y
via IFTTT