Tools for working with SVG

Browsers

Most suitable for this workshop:

  1. Firefox
  2. Beaker Browser
  3. Chromium / Chrome

Things will probably work fine in Safari or Edge, but I haven’t tested them an I’m not familiar with how they work, so if that’s all you have on your computer, I would recommend that you download Firefox.

Basic Text Editors, pre-installed on your computer:

MacOS X: TextEdit
Windows: NotePad
Linux: gEdit

These are very simple programs that just do one thing - edit text.
They likely won’t highlight code to make it easier to read, and they won’t offer a live preview of your SVG, so you should keep the SVG open in a browser while editing.
If you’re working this way, each time you want to update the image you will need to save your file (Ctrl + S in the editor) and refresh the browser (Ctrl + R in the browser).

Specialized code editors to download and install on any operating system:

These programs are ✨ super fancy text editors ✨. They will automatically highlight SVG syntax, so that, for example, something like <text>text</text> will be much easier to read, because <tags> will be shown in a different color to their content. You can install extensions/packages to live-preview SVG files in the editor as you’re working on them (see below).
These three editors are all Free Software, so their source code is publically available and reusable, which is great. They’re made by data-hungry corporations though, so below you’ll find instructions to stop them ‘phoning home’.

Atom (Github/Microsoft) - atom.io

Turn off data tracking

  1. Go to Settings (Ctrl + comma) ( Cmd + comma on a Mac)
  2. Click the Packages tab
  3. Search for “metrics”
  4. Click the ‘Disable’ button on the metrics package panel

Install SVG Preview

  1. Go to Settings (Ctrl + comma) ( Cmd + comma on a Mac)
  2. Go to ‘Install’ in the side panel
  3. Search for ‘SVG Preview’
    You should find this one, by Josa Gesell: atom-svg-preview
  4. Click the ‘Install’ button on the svg-preview package panel
  5. Once installed, Ctrl + Alt + V will open the preview pane.

Visual Studio Code (Microsoft) - code.visualstudio.com

Turn off data tracking

  1. File > Preferences > Settings
  2. Search for ‘telemetry’
  3. uncheck the Telemetry: Enable Telemetry setting

Install SVG Preview

  1. View > Extensions
  2. Search for ‘SVG Preview’
    You should find this one, by Simon Siefke: svg-preview
  3. Click ‘Install’ on the svg-preview extension panel
  4. Once installed, Ctrl + Alt + P will open the preview pane.

Brackets (Adobe) - brackets.io

Turn off data tracking

  1. Help > Health Report
  2. uncheck the checkbox

Install SVG Preview

  1. File > Extension Manager…
  2. search ‘SVG Preview’
    You should find this one, by Peter Flynn: svg-preview
  3. click Install.
  4. The extension will load automatically when editing an SVG file. If the graphic covers too much of your screen, temporarily make the width/height of your SVG smaller.

Vector Illustration Programs

Inkscape

I’ve been using Inkscape for many years and I’m excited about the brand new Inkscape 1.0! So many improvements!

Download Inkscape 1.0

The following tools are not open source, but they’re commonly used for vector graphics and can read and write SVG.

Adobe Illustrator

Affinity Designer

Sketch

Command Line Tools

pastel - github.com/sharkdp/pastel

An awesome multipurpose color tool!

SVGO - https://github.com/svg/svgo

For optimizing SVG files.

Inkscape!

You can also access inkscape via the command line in order to batch process and convert SVGs

Web-based Tools

Firefox / Chromium / Chrome Developer Tools

Right-click on an SVG, choose ‘Inspect Element’ or ‘Inspect’. Dig into from other people’s SVGs on the web, and learn from them. Debug your animations and monitor their performance.

SVGOMG (SVGO’s Missing GUI)

Invaluable graphical version of SVGO. I use this tool on pretty much every SVG I touch, to make files smaller, cleaner and clearer.

cubic-bezier.com

Often the basic timing function keywords (ease, linear etc) won't get you the exact effect you're looking for. In those cases, you can instead apply a custom cubic bézier curve, like this:

animation-timing-function: cubic-bezier(.17,.67,.58,-0.46);

But how do you work out that weird series of numbers? you use cubic-bezier.com to visually create and compare bézier curves for animation!

Javascript libraries for SVG

(We won’t be going into Javascript for this workshop, but just in case you feel like digging deeper)

SVG.js - svgjs.com

makes scripted creation/manipulation of SVG in your website/application much, much easier.

anime.js - animejs.com

animation library - Quite easy to use, very lightweight, lots of functionality and good performance - it’s really great! I would give it 5 stars but… unlike SVG.js, KUTE.js & GSAP, SVG’s cross-browser transform-origin woes have not been fixed in this library.

KUTE.js - thednp.github.io/kute.js

animation library - more technically-focused, modular and quite well-documented. transform-origin is sorted! Community seems a bit lacking though.

GSAP

Very popular, but not open source, so it’s useless for my purposes.