Icon Design · Sketch · SVG · Animation

I just released a free web-app for optimizing SVGs—especially those exported from Sketch. It's called SVGito, and it's launching with a few optimizations that you won't find in other SVG optimizers. The big one is cleaning up Sketch's extra fill + inside/outside border markup, discussed in my recent Sketch borders article. SVGito was inspired by my new course about SVG workflows in Sketch.

Optimizing SVG & Cleaning the Markup

Design software like Sketch or Illustrator includes some extraneous markup in exported SVGs. Custom attributes, unnecessary groups, long decimal values—these increase file size and make it difficult to read when making changes manually.

SVG Editor, by Peter Collingridge is a lightweight web app that will clean up many parts of your SVG, and even shorten long decimal values. I prefer this tool when I need to manually edit the SVG markup or use it for animations, not just reduce file size.

SVGOMG, by Jake Archibald does the same thing but has tons more options and a prettier UI. Best tool if you only need the smallest file size possible.

SVGito, by Sketch Master provides several optimizations that you won’t find in any other tool. It’s especially useful for SVGs exported from Sketch, and when used before SVGOMG. Read about SVGito and its optimizations in this article.

Basic SVG Sprite Example

SVG Media Queries Example

SVG sorceresses Sara Soueidan and Joni Bologna both have great articles about using SVG Sprites. Sara's article examines all of the ways to use SVG sprites. Joni's article focuses on the <symbol> + <use> approach, specifically for icons.

Understanding SVG's coordinate system is critical, especially if you're using transforms on SVG elements. Sara Soueidan breaks it down thoroughly in this article.

Animation & Animated SVG

A beautiful video about how to achieve realistic motion, based on principles laid out by the original animators at Walt Disney Studios:

SMIL (“SVG ANIMATION”)

Although SMIL is starting to be replaced with other animation frameworks, it's easy to learn if you're already familiar with SVG markup and CSS animation. You can morph shapes, move them along a path, and animate just about any SVG attribute.

The Green Sock animation platform (GSAP) currently seems to be the most capable JS framework for animating SVG. They've addressed tons of cross-browser bugs, made any kind of animation—even morphing shapes—a breeze, and optimized the performance to be equivalent to CSS Animation. If you're considering it, be sure to check out Sarah Drasner's articles and awesome examples.