Sara Soueidan gives us a sneak-peek at some of the tips she'll be sharing at her Generate talk in London this September
SVGs are a fascinating world full of possibilities and with lots of options to do almost anything—from embedding, to styling and animating, to scripting, and more—it can easily get overwhelming to learn and work with at the first glance.
However, the more you work with SVG, the more your start building a set of tools and steps that make up your workflow and turn SVG into a powerful tool in our web development toolkit.
Here are some things you can do today that can save you some time next time you integrate SVG into your workflow.
Optimise your SVGs
Whether you create your SVGs yourself in a graphics editor or you work with someone else's SVGs, chances are you're going to be dealing with non-optimal code that is not only bloated but also a pain to edit by hand should you need to.
One of the most important steps you should take when working with SVG is to optimise your SVG code. Even if you take a careful workflow in the graphics editor, most editors almost always generate editor metadata and other redundant code that you can — and should — remove without affecting the rendering of your image. The best way to do so is to use a standalone optimisation tool.
My SVG optimisation tool of choice is SVGO: a NodeJS-based optimisation tool. SVGO comes with a set of tools that fit into almost any kind of workflow: grunt and gulp plugins, OS X folder action, drag-and-drop GUI, and more. Pick the one that suits your workflow and use it to optimise your SVG.
You can read all about SVGO tools, including notes and tips, in this this article on my blog. An additional benefit to optimising SVGs is that you will end up with a smaller file size, which is always good for better overall performance.
Use JavaScript for serious SVG animation work (currently)
SVGs can be animated using SMIL, CSS, and JavaScript. SMIL’s future does not look very bright with no Microsoft Edge or IE support and having recently been deprecated in Blink. CSS is great, but — as with CSS animations on HTML elements — it is still limited when it comes to controlling and syncing animations; that, and not all SVG properties can be animated using CSS.
For example, you currently cannot animate path data in CSS, which makes creating impressive path tweening animations in CSS impossible. Not to mention that there are some existing browser bugs and inconsistencies, and Internet Explorer doesn't support CSS transforms on SVG elements yet. So, unless you're doing some simple, not-so-important animations, I recommend using JavaScript to animate SVGs.
Libraries like Snap.svg and Greensock give you a lot of flexibility and control over animating SVGs and spare you the trouble and headache of having to deal with browser inconsistencies. Greesock even comes with a timeline feature which gives you more power to control and sync animations, with a simple, easy-to-understand API.
Learn SVG code and get comfortable editing SVGs by hand
The very nature of SVG — being an image format and a document format — is a very strong reason why you would want to get comfortable editing SVG code by hand. Not all SVG code is easily editable by hand — for example, SVG path data are a nightmare to edit by hand and sometimes even impossible to do so. But knowing your way around SVG document structure, basic shapes and main attributes can come in very handy.
It will save you a lot of time when styling your SVGs, so you don't have to keep jumping into a graphics editor to do so. Attributes like the viewBox attribute can take your SVG skills to the next level, and enable you to troubleshoot your SVGs and do all kinds of awesome stuff with them such as art direction and sprinting, without having to resort to a graphics editor.
If you're doing any transformation work, knowing how the viewBox works and the effect of SVG transformations will always save your sanity and save you a lot of time googling for Stack Overflow answers.
There is a lot more to SVG than meets the eye. If you wanna learn more SVG tips and tricks, make sure you don't miss my talk at Generate Conf in London this fall.
See Sara speak at Generate London - buy your ticket here.
