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.

Check out the release article to learn about SVGito and its optimizations.

New: Typography Resources

For Sketch, HTML, CSS, & SVG

Check out the resources from my recent article for Net Magazine, demonstrating how to use text on a path, fancy OpenType font features, and special characters in Sketch and on the web.

Animating Icon Examples

JavaScript snippet used in CreativeLive Icon Class: Measure length of an SVG path

Training Courses for Professionals Learning Sketch.

I recently created these video-based courses for Sketch. The courses are fast-paced and focused on real projects and practical workflows.

Sketch Resources for Icon Design

Download the Sketch project file from the CreativeLive Icon Design class (containing the color swatches and whale icons).

Plugin: Rename It! for Sketch makes it a breeze to rename a bunch of layers at once.

Article: Harnessing Vector Awesomeness in Sketch will introduce you to creating all sorts of vector shapes and help you overcome common challenges.

Article: Mastering the Bézier Curve in Sketch will have you creating perfectly smooth custom shapes like a pro.

Article: What's Up With Sketch's Scissors Tool? demystifies this useful but initially perplexing tool, and explains when to use open and closed vector paths.

Video Tutorial: Sketch's Scissors Tool Trick shows you how to change the start point on a vector path—which is especially useful for line-drawing animations.

Video Tutorial: Design the Interactive Attachments Icon (see above) using Sketch, SVG, and CSS. Produced for Net Magazine.

SVG Fundamentals

Learn SVG markup with Joni Bologna's awesome (and free) Pocket Guide to Writing SVG. Each super friendly article tells you just enough without getting too technical.

Wondering about a particular SVG element or attribute? It's probably described in Jakob Jenkov's SVG Reference. Just look at all those topics in the left hand column!

An SVG Primer, by Scott Murray, takes an in-depth look at styling SVG elements.

SVG wizard Sara Soueidan explains all the ways to embed an SVG on a webpage.

I love these friendly yet thorough guides by Web Platform covering the various components of SVG (gradients, masking, fonts, animation, transforms, etc.).

When you've got a super specific question, refer to the Official SVG Spec. You can do it!

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.

Advanced SVG Techniques

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.

For a great intro to the most common parts of the <animate> element, check out this article by Oak Studios.

Here's the resource I always reference when working with SVG animation: Web Platform's comprehensive (but not too lengthy) guide, Smarter SVG Animation.

When you need to know everything about any part of SVG animation, look no further than Sara Soueidan's outrageously comprehensive guide on CSS Tricks.

Animating with JavaScript

A little JS snippet to measure the length of an SVG path.

Sarah Drasner has tested all of the ways to animate SVG, and shares her insights in this article. Spoiler alert: we should all be using the Green Sock animation platform!

With the announcement that Chrome is deprecating SMIL, Sarah suggests alternatives.

Snap SVG is a simple and easy framework for animating SVG with JS.

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.