You can now easily learn how to become a more experienced SVG developer, as I recently published a post that went into detail about all the major available books on the topic. Have you checked them out? I also wrote about SVG patterns and how to get them, as well as some resources on responsive text and filters. Today, we’re going to take a look at helpful SVG tools.
Just like you, I’m pretty much a first time users for these tools, so don’t be surprised to find that our opinions of each are quite similar. SVG is a very rapidly evolving technology, but it is lacking proper developers and designers that spend most of their time developing, and learning about the possibilities. I’m sure that as soon as browsers begin to progress, so will SVG.
You’re more than welcome to add any of your own favorite tools to this list, I’m only now beginning to explore what’s available out there, and it’s never a days work to collect everything. Also, if you’re looking for a specific tutorial, guide or resource for SVG – please, let me know and I’ll see what I can do.
SVG Circus
SVG Circus enables you to create cool animated SVG spinners, loaders and other looped animations in seconds. You can change up things like starting points, the paths for the animations to take and a lot more. There are also many tricks and presents to choose from, after taking a quick look – I’m quite excited for a few of them. Which ones did you like the most?
Snap.svg
Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking, clipping, patterns, full gradients, groups, and more. Now, the really great news is that the project is maintained by Adobe, which means that there are some really skilled people behind this, but there’s more – after doing some quick research, I learned that there are quite a few YouTube videos that cover this library, making the learning curve a lot more exciting!
iconmelon
Despite the growing popularity of SVG, its time around and excellent browser support, we have a lack of good vector icon approaches. It’s time to fill this gap and use SVG as icons in our web projects. You can learn more about this topic on the official Codrops article. What’s more, you can play with the effects on the Iconmelon site, or you can submit your own icons for consideration!
Plain Pattern
I think this is the second time that I mention this particular site, but it really is that good, and should be in everyone’s bookmarks by now. The Plain Pattern site allows you to quickly generate SVG patterns based on the color of your choice. Probably quicker than writing everything by hand!
Highcharts
Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types. What about those SVG charts?
Glyphter
Not entirely sure of what SVG is capable? Take a look at this incredible tool that will let you play around with all types of fonts and icons, it really is a font machine! Drag and drop an icon on the right side, put it in any of the boxes in the middle, and watch the console unfold! You can change quite a few details for each of the icons, making it a very appealing tool for app developers, and people who need to work with fonts and icons.
Paths.js
This library helps generating SVG paths with a high level API. These paths can be then used together with a template engine such as Mustache or Handlebars to display SVG graphics in the browser. If instead of a static template engine, you use a data binding library, such as Ractive.js, Angular or Facebook React, you get animated graphics for free.
svg.js
A lightweight library for manipulating and animating SVG. You won’t find a library that’s smaller, or more concise than this one. I also found out that SVG.js offers some plugin capabilities, which further enhance the experience. It looks like you can use a plugin that allows you to modify filters for pictures and icons that you’re building.
SVG Tools for Web Developers & Designers
I suppose I’m only touching the surface here, and we should soon expect to see a proper influx of tools and resources related to making SVG workflow a lot less of a pain. I had a quick look at the global design tools market for SVG, and there are only like 5-6 mature tools that allow to create and save SVG files. Which one are you using?
