April 4, 2024

Ten Must Use SVG Tools

Justin Golden

webdev

svg

css

design

Photo credit @gabrielbassino on Unsplash

Editing and Using SVG

1. Yqnn - SVG Path Editor

https://yqnn.github.io/svg-path-editor/

This is my favorite SVG tool. It’s a path editor and allows you to take an SVG path and edit individual commands with a graphical interface. You can also use the round and convert to relative buttons to save some space, and you can scale, flip (by using -1 in scale), rotate, and translate the path as well. You can use the keyboard to insert commands (L key for line, M key for move, etc.) and you can convert paths to others (for example, curve (C) to shorthand curve (s)). You can download the SVGs and save and load them in browser storage as well. The downside here is that you can only use a path, so if you want to add rectangles, circles, or other elements, you must first convert them to a path (which also saves you some bytes, and also it generally isn’t necessary to use a tool like this to edit them since they’re so simple)

2. SVG Circle to path

https://justingolden.me/svg-circle-to-path/

This is a simple tool I made to convert a circle to an SVG path, which can help you both save bytes, and edit your paths in the Yqnn tool above.

3. Boxy SVG

https://boxy-svg.com/app

Boxy SVG on the other hand, is a much more helpful and feature-rich tool. It’s a SVG editor, just like Yqnn, but it’s more similar to Illustrator or Inkscape rather than editing the path directly. It’s super easy to use and has a lot of features.

4. SVG URL Encoder

https://yoksel.github.io/url-encoder/

You ever have an SVG and want to use it as a background image or a pseudo element image? You’ll need to URL encode the SVG, and that’s what this tool specializes in. You can also decode an encoed SVG, and it even gives you the CSS for the background-image so you can simply copy and paste it.

5. SVG OMG

https://jakearchibald.github.io/svgomg/

SVG OMG is a great tool for optimizing your SVG, which can save you a lot of bytes. This in combination of Yqnn can really bring down your file sizes, and both take just seconds to use. SVG OMG has a lot of features for what parts of the SVG you want to remove or keep, and the default settings are perfectly great.

SVG Design Tools for Web Developers

6. Shape Divider App

https://www.shapedivider.app/

Quickly create SVG shapes to use as website dividers between sections. You can customize the shape, color, height, and more. If your website changes between section colors with a plain flat line, consider mixing it up a little.

7. Haikei App

https://app.haikei.app/

This website has many, many different SVG tools to create blobs, waves, low poly grids, and more. Mess around and see if you find something that you can use on your website.

8. Super Designer

https://superdesigner.co/tools

This website also has many different tools, including SVG backgrounds and patterns, 3d shapes, gradients, and more. I really like this website, and it seems to all be made by one guy who is very committed to making useful tools like these.

9. SVG Background Patterns

https://heropatterns.com/

https://pattern.monster/

https://philiprogers.com/svgpatterns/

https://www.svgeez.com/

https://www.svgbackgrounds.com/set/free-svg-backgrounds-and-patterns/

There are too many of these to split them into their own numbers, and they all serve the same purpose, so here you go. Use these to generate SVG background patterns for your website. I personally recommend something a little more subtle and less flashy. If you’re a math or science themed website, maybe use a light graph paper background. If you’re out doors themed, maybe use a topography or nature theme. If you’re a music website, try the piano theme from Hero Patterns. Note: Hero Patterns and Hero Icons are made by the makers of Tailwind CSS.

10. SVG Editors

https://editor.method.ac/

This tool is great for drawing paths by “hand” and then exporting as a path.

https://editsvgcode.com/

This website lets you upload or paste an SVG and then edit the code (similar to VS Code) on the left, and see your SVG update in real time. You can download and share a public link as well.

https://editsvg.online/

This website allows you to upload a SVG file and then edit it online.

https://www.svgviewer.dev/

This website allows you to edit your SVG and export for React, as a PNG, a Data URI, and more. You can optimize or prettify your SVG code as well.