16 Useful SVG Tools

SVG is optimal for web graphics today as it is lightweight, resolution independent and browser agnostic. So here are some useful tools that will enhance the animation & interactive capabilities of SVG.

SVG-edit

This is a fast, web-based, javascript-driven SVG drawing editor that works in any modern browser.

svgedit


SVG Circus

It enables you to create cool animated SVG spinners, loaders and other looped animations in seconds.

svg-circus


SVG for Everybody v1.0.0

Use external SVG spritemaps today. SVG for Everybody minds the gap between SVG-capable browsers and those which do not support external SVG spritemaps.

svg-for-everybody


Ready to use SVG icons for the web

Choose an icon. All you have to do is copy & paste the HTML code.

svg-icon


ZorroSVG

Transparent PNGs are great, but they come at a price: file size. Wouldn’t it be nice if there were transparent JPEGs instead? Unfortunately there is no such thing, but ZorroSVG gives you the power of transparent PNGs for the size of a JPEG.

ZorroSVG


iconizr

Takes your SVG drawings and processes them to a CSS icon kit, coming in several different flavors. It prefers high-resolution (retina) SVG over PNG icons, data URIs over CSS sprites and single images and provides fallbacks for even the least capable browsers. It outputs Sass along with (or instead of) CSS code.

svg-icon


Patternbolt

Patternbolt is a fine selection of SVG pattern background, packed in a single CSS or SCSS file.

patternbolt-12


Method Draw

Method Draw is a fork of SVG Edit, a web based SVG editor. The purpose of Method Draw is to improve the usability and user experience of SVG Edit. It removes some features such as layers and line-caps/corners in exchange for a more simple and pleasant experience.

method-draw-1


SVGO

SVG files, especially exported from various editors, usually contains a lot of redundant and useless information such as editor metadata, comments, hidden elements, default or non-optimal values and other stuff that can be safely removed or converted without affecting SVG rendering result.

svgo-2


Glyphter

Just drag & drop SVGs onto the character grid and download your spiffy new font.

glypther-3


Trianglify

Trianglify is useful tool for generating colorful triangle meshes that can be used as SVG images and CSS backgrounds.

triangle-4


Seen.Js

Render 3D scenes into SVG or HTML5 Canvas.

seenjs-5


SVG Edit

SVG-edit is a fast, web-based, JavaScript-driven SVG drawing editor that works in any modern browser.

svgeditor-6


SVG Optimiser

Because of how SVGare defined, they can be rewritten without affecting the resulting image. By optimising how SVGs are written, it is often possible to reduce file size and make them easier to work with.

svg-editor-7

Grumpicon

Grumpicon is great SVG tool. Just drag and drop your SVG files onto the browser window and it will return a downloadable zip that mirrors the output you’d get from the command-line tool.

grumpicon-8


svg.js

A lightweight library for manipulating and animating SVG.

svgjs-9


PSD To SVG

This script, once activated, exports all vector layers named with “.svg” at the end of the layer name as SVG files, along with their shape and color attribute. No more slicing SVGs one by one like a caveman.

psdsvg-10


1 Comments

  1. Sarahsays:

    Tanks for the useful list, you might want to ad http://www.svgminify.com/. Its a free online tool to reduce the size of your SVG file by removing the superfluous informations that Illustrator or Inkscape embed into a SVG export.

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.