20 Free SVG Tools for Better Graphics (Updated)

SVG is gaining popularity in web design these days and you can use tools like Illustrator or Inkscape to create SVG graphics. But when it comes to web design, we should always optimize for lighter results.

Here are the 20 tools that you can use to work with SVG quickly and efficiently. We have mostly online tools, that can help in optimization, conversion, making patterns, and more.

Interactive SVG Coordinate System

When you work with SVG, you can’t leave its coordinate. This is a great interactive tool by Sara Souiden, to help you learn how SVG coordinates work. Using the viewBox and preserveAspectRatio on SVG, guided by orange and purple lines and a handy ruler, you can play while learning how SVG coordinates function.

b64

b64 is a simple tool to optimize images then turn them into the base64 format. You can drop your SVG images (other formats such as JPG and PNG work, too), then grab the CSS with a base64 background-image as a result.

SVGO

SVG that is exported may contain unnecessary information which can be removed without affecting the rendering result. If you want to remove editor metadata, comments or hidden elements, you can use SVGO.

You can install SVGO via npm, $ [sudo] npm install -g svgo or use the GUI version that offers drag and drop to process your SVG optimation.

SVG OMG

SVG OMG turns the command line of SVGO (the previous tool) into a GUI version that more intuitive and easy to use. Just toggle the buttons to activate or deactivate each feature. In the end, you can grab the result as image files and code as well.

Shapecloud word art generator

Shapecloud is an online tool that makes it possible for you to create personalized word art designs by uploading your own shape via an SVG file (you can also choose a standard shape).

To upload an SVG in Shapecloud, click the ‘Upload shape‘. Then click ‘Click to select the file’ and choose the SVG file you want to upload.

When you are done creating, you can instantly download the design to your computer, phone, or tablet. The design can be downloaded as a PNG, SVG, or PDF file.

SVG Now

When you work on Illustrator, the exported SVG contains some information that is not necessary. With this tool, you will get the optimized version of your exported SVG right from your Illustrator workspace. This tool adds a panel with some options to optimize SVG.

SVG to PNG converter

Want to export SVG files to PNG form? Without opening applications like Illustrator to do so? Use this SVG to PNG Converter tool to get image outputs in PNG format and also PNG Base64 data URI if you need it.

SVG Circus

If you think loader animations are cool, now you can create it easily by utilizing SVG with SVG Circus. The tools enable you to make your own loader, spinner, or anything similar using looped animation. Set the ‘Actor’, position, size, color, and others from the panel, then export to get the results.

SVG Sprite

SVG Sprite is an Node.js module, which optimizes a bunch of SVG files, and bakes them into SVG sprite-types including traditional CSS sprites for background and/or foreground images, SVG stacks and more.

Quasi

With quasi you can generate Quasicrystal images like what you see below. This generator is experimental, but the results are definitely cool. You can play around by changing the value of the option, then download the results with the ‘Save SVG’ button.

Plain Pattern

Creating patterns with SVG has never been easier or more fun. Upload your image, scale down or change the spacing, rotate and recolor until you get a beautiful pattern. You can preview the result before downloading it.

Trianglify Generator

Create beautiful SVG geometric patterns with Trianglify Generator. You can set the color randomness/variant, granularity size, and choose a color palette to work with. This tool is a GUI version of Trianglify.

Export PSD to SVG

If you use Photoshop as the image editor for your work, sometimes you might need to convert your design on the Photoshop workspace into SVG, which is an unsupported format in Photoshop. Download the Script to this tool, then copy to the Adobe Photoshop/presets/scripts folder.

Rename a vector layer name with the SVG extension (e.g. layer1 become layer1.svg), and you can now run the script from File > Scripts > PS to SVG.

SVG Filters

Do you know that with SVG, you are able to add effects such as hue, saturation, blur, linear color overlay, and many others to images? Here is a tool that visualizes these effects, then gives you a snippet to make it easy to embed the effect into your project.

SVG Morpheous

SVG Morpheous is a JavaScript library that allows you to morph an SVG icon from one shape to another. You can set the easing effect, duration of transition animations, and also rotation direction.

Clip path generator

SVG allows you to click the image clip with Shape. This is quite easy if the shape is in the form of a square or a circle. But what if the shape is one with a lot of points or is a polygonal shape? That’s where you need this Clip Path Generator tool.

Chartist.js

Chartist.js is a library to create highly customizable responsive charts. It utilizes SVG to display the charts, which also can be animated using SMIL. With this library, you are able to create line chart, pie chart, bar chart and other types of charts, and even add animation to them.

SVG stroke dash generator

This is a simple tool to generate dashed lines utilizing SVG stroke-dasharray. First, choose one dash type from the list, then customize it in terms of width, height, rotation, or color. Afterward, you can grab the HTML code and CSS to apply this dashed line in your project.

Method Draw: A Simple SVG Editor

Method Draw is a web-based SVG editor with an intuitive interface that comes with tools on both sides of the canvas. You can draw lines, and shapes, input text or built-in use shapes, then edit the properties of the drawn objects. Export the image in SVG format (also comes in SVG base64 format) or save it directly in PNG.