50 free web tools

SVG Tools

41. Snap.svg

50 free web tools Snap svg

Snap.svg is an SVG-manipulation library from the Adobe Web Platform team

An extensive JavaScript library from the Adobe Web Platform team. This provides a clean API for creating, animating and otherwise manipulating SVGs on the web.

42. Vivus

A dependency-free JavaScript library that animates your SVGs, giving the appearance of drawing. The on-page demos are well worth checking out.

43. Circulus.svg

50 free web tools Circulus svg

Sara Soueidan’s helpful SVG pie menu navigation builder. Mmm, pie.

An online tool that lets you generate the SVG code for a pie menu. As the site points out, pie menus have (surprisingly) been found to be more usable than standard nav in many instances.

44. Paths

50 free web tools Paths

Paths is an SVG editor that helps you understand SVG’s path element syntax

An interactive interface to help explain the path element syntax for building SVGs. The editor allows you to download the completed shape in SVG format.

45. SVG Editor

With this tool you can upload an SVG file or paste in your SVG code, and it will optimise it by removing white space, unnecessary attributes, namespaces and so on, to reduce file size.

Best of the rest

46. Atom

50 free web tools Atom

GitHub’s text editor can be customised to suit your needs

The GitHub dev team's hackable text editor for modern development. Atom comes full-featured, with packages, themes, smart auto-completion, multiple panes and more. Best of all, it can be fully customised via HTML, CSS and JS.

47. Browsersync

50 free web tools Browsersync

Browsersync is a powerful tool for synchronised cross-device testing and live debugging

Browsersync is like LiveReload, but on steroids. It's a powerful tool for synchronised cross-device testing that will live-reload your project for every edit and save in all browser instances. It even syncs up navigation and scrolling in the browser sessions. You can add CSS outlines for debugging, and a latency option enables you to mimic a slower internet connection.

48. Brackets

Adobe’s contribution to the text editor race is an open source editor with focused visual tools, preprocessor support, and the ability to ease in-browser design through live preview. It also integrates well with Photoshop via the Extract for Brackets extension.

49. Accessible HTML5 Video Player

This is a video player from the PayPal accessibility team. It has custom controls and a keyboard-accessible and screen reader-supported UI. There are no scripting dependencies and it uses HTML5 form controls for volume and progress indicators.

50. Let's Encrypt

50 free web tools Let s Encrypt

Let's Encrypt will help you switch a project over to HTTPS

If you’re looking to switch a project over to HTTPS, you’ll want to investigate this option. It's a free, open and automated certificate authority that provides you with a hassle-free way to go secure.

Primary illustration courtesy of Tobias Hall.

This article originally appeared in net magazine issue 278; buy it here.

Topics