When it comes to images, graphics and visual content, there is one file format that is going to take off eventually – SVG. It is a file format that allows you to display vector images on your website. This means that you can scale an SVG image up and down as needed without losing any quality, making it a great choice for responsive web design. In this post, we`ve put together collection of useful free tools for working with SVG files.
SvgPathEditor
Online editor to create and manipulate SVG paths.
Pintr
Turn your images into plotter-like line drawings, create single line SVG illustrations from your pictures.
Perfect Freehand
Draw perfect pressure-sensitive freehand lines.
BBBURST
bbburst is a simple tool that makes it easy to create SVG graphics that contain an explosion of colorful shapes. Perfect to add behind panels, buttons and headers in your designs to add some pizzazz.
Boring Avatars
Boring avatars is a tiny JavaScript React library that generates custom, SVG-based, round avatars from any username and color palette.
Haikei
Haikei is a web app to generate unique SVG shapes, backgrounds, and patterns – ready to use with your design tools and workflow.
Termtosvg
termtosvg is a Unix terminal recorder written in Python that renders your command line sessions as standalone SVG animations.
Badgen
Fast handcraft svg badge generating library.
SVG 3D Builder
This framework aims at creating 3d models with SVG and to provide a concise API. It is purely developed with concepts of two-dimensions. One of its essential implementations is Bezier in both curve and surface. It is one thing to describe them with mathematic equations, but another thing to illustrate them with computer graphics.
Get Waves
This handy tool that lets you generate SVG waves for your web designs.
Basic Pattern Repository
This thing is a collection of hand-made patterns intended to be used in inline svg. It’s a result of a bit of a design journey, in where I used a set of super simple shape-illustrations on my website but I wanted them to be able to reflect whatever color users were able to override in the settings. I used patterns from a figma library I created, based on someones pictures that they published before figma community libraries where a thing. But I had troubles exporting them as SVG, so I had to recreate them and had a horrible time doing it. So I thought it might be a good reason to learn some hand-coding SVG.
Blobmaker
Organic blob shapes have been trending in web design for a while. Making them can be a bit of a pain though. Enter Blobmaker, a simple tool to make lots of beautiful SVG blobs easily.
Dotgrid
This is a distractionless vector tool with line styles, corner controls, colours, grid-based tools, PNG and SVG export.
SVG Background Generator
This is a tool to create eye-catching backgrounds for websites and blogs. They are small in size and free to use. Edit them to suit your needs, as you wish.
Boxy SVG
Boxy SVG project goal is to create the best SVG editor for non-technical users as well as for professional web designers and web developers.
SVG Colorizer
With this free tool you can automatically change the entire color palette of any given svg pack intelligently keeping the shades, highlights & shadows. It extracts and replace all the colors and, if necessary, will automatically generate more colors to fill the whole palette. Made with love by the Iconshock Team!
SVGInject
A tiny, intuitive, robust, caching solution for injecting SVG files inline into the DOM.
SVG Filter
A tool for playing with SVG filters!
SVG Gradient Map Filter
This tool creates SVG Gradient Map Filter from given colors. You can use ready palettes or edit them and get yours.
Polygon generator
A very handy SVG polygon generator by Varun Vachhar.
Svgurt
This is an open source image to SVG transformation tool with a lot of knobs and controls.
Shapeshifter
SVG icon animation tool for Android, iOS, and the web.
Free SVG Maps
It is free tool that provide you a list to select a map you need. All maps come in two level of details: High and Low.
Circulus
Tool by Sara Soueidan that generates the circular navigation menu code for you, with tips on animating it
SVGomg
The browser-based this tool is very popular for optimizing SVG files.
js2flowchart
A visualization library to convert any JavaScript code into beautiful SVG flowchart.
SVGI
This is a CLI tool to inspect the content of SVG files. It provides you information about the file, the elements in the SVG and the hierarchy. It also count the number of elements and in the future, it will provide tips to improve the SVG
SVG Stacker
An experimental tool that turns a folder of SVG files into a single SVG Stack. It also creates some demo HTML files that use the stack with different embedding-techniques.
Lean-SVG
Fed up with the useless lines present in SVG files, or with large sizes of SVG files? Or worried with the transforms in SVG causing hindrance to animations? Don’t you worry Lean-SVG is here!
SVG to JSX with GUI
It’s a tool to convert SVG to JSX on Web browser.
Clip Path
Clip Path CSS code generator is very useful tool you can use to create CSS masking on your page. You can create any CSS clip path code just with your mouse without any coding.
SVG Dashed Lines Generator
A simple dashed lines generator for web using SVG stroke-dasharray attribute.
Pattern Fills
A collection of svg patterns and build scripts that allow utilizing them in svg, css and d3.
Trianglify
Awesome tool to generate low-poly backgrounds, textures, and vectors.
I love that framework that aims at creating 3d models with SVG and providing a concise API. They are so cool and easy to create. Thanks for explaining it so well.
SVG 3D Builder is a great choice among the others. I know it personally. It helps a lot in designing.
Really cool SVG tools you have here!
You can add this CSH to SVG generator to your list:
https://www.photoshopsupply.com/vector/csh-to-svg