How we built Svgsus
Born in the land of despair, with lean UX and joyfulness at heart, Svgsus rose to ease the day of every designer, and every developer ever touched the skin of an SVG before.
Here’s how it started
We’ve all been there.
As a designer, a noticeable amount of our time is spent trying to find suitable icons. Some of us are still digging through Finder, “Gah, I know it’s here somewhere”. Others don’t bother storing them. We simply go to www.nounproject.com or Material icons etc., search, find, download, open Finder, drag to our software. Every time.
And yeah, there are a few nice Apps out there (some free and some not) that helps us organize and find our beloved SVGs. But we’ve never really felt that they fulfill our need when it comes to simplicity and price.
So yes, there were already a bunch of different workflows to handle SVGs, some more efficient than others, but none was perfect. This is what got us thinking, a really simple tool which only lists icons and allows search / filtering would improve our work flow by a lot. And it seemed quite easy to build.
Somewhere around here the first idea of Svgsus was born, or SVG Dept. as it was called back then.
List, search and more?
We quickly built two prototypes, one native and one based on the Electron framework. Early on it became clear to us that the Electron-based version was better adapted to tackle the obstacles ahead. A wide range of open source libraries to clean and transform SVGs were crucial, and the fact that it did run very smoothly made the decision easy.
During this early phase we had a discussion with a friend of ours, an amazing iOS developer, and told him about our idea.
“That’s a great idea, but I would love if it could give me the actual (UIBezierPath) code”.
Once again, this got us thinking. Handling SVGs as a developer isn’t easy either.
When developing for the web, we struggle with ugly exports (👋 Sketch) which require us to open the file, clean the SVG, copy the code and paste it for inline use or transform it into an SVG symbol or pug-format (formerly known as jade).
Android is somewhat similar, we love the Vector Drawable format, but that still requires converting each file and, if not cleaned before converting, we often see incorrect results.
And then there’s iOS. We’ve previously used a Photoshop script to export PS paths to iOS code (UIBezierPath). It’s pretty time consuming but we’ve still felt better about doing so than using third-party libraries since they’re slow, we always need to clean the SVGs first, and when things go wrong, you have no idea why. What if our solution would be able to write the iOS code for us? That would be neat.
And there it was, “the-even-better-idea”.
We wanted to build a tool that makes it easy to search and manage SVGs as a designer, and that eases the process of importing SVGs when developing.
Fostering a prototype
YAY! We had an idea. And a really simple prototype. The fact that this prototype, currently able to list, search and drag SVGs into other design tools, was already very useful to us was a clear indication it could make a difference.
At least to us.
Now came the obsession (also a good indication), and we started adding automated functionality to make sure exported SVGs are always cleaned (using SVGO) and that dragging files also would give us our preferred code if dragged to text editors.
Not everyone (especially when developing) are interested in having nicely structured folders of SVGs. They’re simply received via mail, Slack, or some other channel to be used in the code. What if that file could be dragged into Svgsus and not to be stored but instead immediately converted and cleaned? That really felt like a nice flow. While building that, we ended up with one of our leanest features; Dragging a file through Svgsus and then dropping into an editor would give us our beautifully generated code.
And well, that’s how it continued — new ideas ignited new ideas and we soon had a bunch of features implemented. We hated exporting SVGs from Illustrator and Sketch, could we improve that? And is the filename really enough to do proper search? And what if I want to convert a whole bunch of files?
Yeah. You get it.
Clipboard as *the* interface
It hadn’t really struck us before. The potential of the clipboard. Copy & paste is such a common action, even my parents knows about it. And the APIs seemed really easy to use. That’s when we started experimenting.
What does Illustrator, Sketch and other design tools put in the pasteboard when a shape is copied? Can we take what’s in there, clean it, and do a quicker, and better export? And yes, it did seem that way. Next question, where do we put the results once we’ve cleaned and converted the shape? Instead of prompting the user with a dialog, having to choose whether they want code (text) or a file, and a target destination, we kept using the clipboard. We added both the file, symbol and the code to the clipboard. If a user paste in Finder, they would get the file. If they paste in a design tool, they would get the shape, and if pasting in an editor, they would get the code. Seamless UX.
This was an eye opener, there’s so much potential. And yes, we do acknowledge the downfalls with copy & paste, such as it being an uncommon and hidden interaction pattern (for these use cases). But still, our target group (ourselves) want a lean and clean workflow. Using the clipboard is lean and clean. As long as we could teach our users the basics, we felt really good about making this a key interaction in Svgsus.
Using the clipboard (copy/paste and drag/drop) gives us the luxury of keeping the UI clean and tidy.
How it works and why it works
Here are some snippets that quickly describes a few use cases.
Add your own icon sets
- Drag a folder that contains SVGs into Svgsus.
Tip: If the SVGs are located in subfolders, they will be grouped by each subfolders name inside Svgsus.
Search, drag and drop
- Search for e.g. ‘bug’.
- Drag the SVG to your preferred design tool.
You can also drag the content to an editor to get the code.
Turn an SVG file into code
- Drag the SVG file into Svgsus.
- Keep dragging the file to your editor. Release. Done.
Tip: Release the file into Svgsus, and paste (cmd+v) into your editor. This will give you better indentation.
Turn a shape selection into an SVG file
- Make the selection and copy the shape (cmd+c).
Use Sketch, Illustrator or some other vector based tool. - Paste (cmd+v) it into Svgsus.
- Paste again wherever you want the SVG to be located. What you got now is a clean and beautiful SVG.
Tip: Code for the SVG is also available if you paste into an editor.
Convert multiple files at once
- Enable ‘multi convert’ in the top right corner.
- Select the assets you’d like to export.
Tip: Use cmd+a / cmd+alt+a to select / deselect all. - Select desired format.
- Convert!
- Open Finder in desired location and paste (cmd+v) the files.
If you prefer to select location right away, simply click the download icon.
Where Svgsus stands today
Today Svgsus has evolved to become a somewhat mature and useful tool. Initially we had a pretty clear vision on what the Minimum Viable Product would be and we’ve now gone way beyond that product. This means we’ve started implementing a different process where our users have a key role. It’s your feedback and ideas that help shape and prioritize our work.
“Oh my God, this is brilliant and dead simple to use.”
- Moses
