PNG to SVG is all about image tracing and vectorization—the conversion of a raster image (jpg/png) to a vector image (svg).
If you are overwhelmed by the variety of options, the general consensus is:
- Vector Magic is the gold standard at $300
- Potrace is the open source champ for monochrome images
- Inkscape is the best free app option for color images (built on potrace)
- Mac apps like Super Vectorizer are a decent value for money at $40
- Getting an Adobe Illustrator subscription solely for image tracing is hard to justify financially at $240/yr
For best results with low resolution images, preprocess them with an AI image upscaler, and then vectorize them.
Many of the apps listed below do not include command line versions, and are impractical to host online. However, they are script-able with apps like Keyboard Maestro and AutoHotkey.
To host your own converter online, check out the open source specifications and code examples below.
- Adobe Illustrator
- $20.99/mo for Mac/Win
- Clip Studio
- $50 for Mac/Win
- CorelDRAW Graphics Suite 2020
- $500 license for Mac/Win
- $20.75/mo for Mac/Win
- DMesh Pro
- $10 for Mac
- Light version available
- EZImageVectorizer
- $10 for Mac
- Graphic Powers
- $595 lifetime for Win
- $15/mo for Win
- Gravit Designer
- $100/yr for Mac/Win/Lnx/Web
- Lite version available
- Image Vectorizer
- $5 for Mac
- ImageQuantization
- $5 for Mac
- iVinci
- $20 for Mac
- PhotoLine
- €59 for Mac/Win
- Super Vectorizer
- $40 for Mac
- TracedLines
- $10 for Mac
- Vector Magic
- $300 license for Mac/Win/Web
- $10/mo
- Vector Queue
- $6 for Mac
- Vectorize
- $9 for Mac
- vectorizer
- $5/mo for Web
- VectorStyler
- $100/yr for Mac/Win
- Adobe Capture: Creative Kit
- Free for iOS/iPad
- autosvg
- Free for Web
- Autotrace
- Free for Mac/Win/Lnx
- autotracer.org
- Free for Web
- Drag Potrace
- Free for Mac
- fconvert
- Free for Web
- Geometrize
- Free for Mac/Win/Lnx
- imagetracerjs
- Free for Mac/Win/Lnx
- Inkscape
- Free for Mac/Win/Lnx
- Intaglio Vectorize
- Free for Mac
- KVEC
- Free for Mac/Win/Lnx
- Online vectorizer
- Free for Web
- opentoonz
- Free for Win
- Photopea
- Free for Web
- Pixels to SVG
- Free for Web
- primitive.lol
- Free for Mac
- RapidResizer
- Free for Web
- Raster Retrace
- Free for Mac/Win/Lnx
- SVGcode
- Free for Web
- vectorization.eu
- Free for Web
- Vectorization.org
- Free for Web
- Vectornator
- Free for Mac/iOS/iPad
- VTracer
- Free for Web/Mac/Win/Lnx
I’m always looking for more alternative vectorization software! Create a GitHub issue and I’ll add it to the list.
The original goal of this document was to outline a specification for NodeJS serverless functions to convert raster images to SVG, and link to other repositories for implementations.
As such, the rest of the document serves as a simple specification for how requests and responses should be structured to convert between raster images and SVG. Check out the related repositories for implementations of the specification.
- image2svg-awesome
- image2svg-client
- image2svg-imagetracerjs
- image2svg-potrace
- image2svg-primitive
- image2svg-kvec
Image Tracing
- imagetracerjs (✅ The Unlicense)
- primitive (✅ MIT)
- kvec (Freeware)
- potrace (
⚠️ GPLv2)
Serverless
function ImageInput() {
const [files, setFiles] = React.useState<File[]>();
const onSubmit = (event) => {
event.preventDefault();
if (!files?.length) return;
async function getSvg() {
try {
const formData = new FormData();
files.forEach((file, index) =>
formData.append(`image-${index}`, file, file.name)
);
const response = await axios.post(url, formData, {
headers: {
"Content-Type": "multipart/form-data",
},
});
} catch (error) {
console.log(error)
}
}
getSvg();
};
return (
<form onSubmit={onSubmit}>
<input
id="file"
name="file"
type="file"
multiple
required
accept="image/jpeg, image/png, image/webp, image/gif, image/svg+xml, image/heic"
onChange={(event) => {
const files = Array.from(event.target.files);
if (files?.length) {
setFiles(files);
}
}}
/>
</form>
);
}{
"algorithm": "imagetracerjs",
"files": [
{
"fieldName": "image-1",
"originalName": "demo-one.png",
"svg": "<svg>…</svg>"
},
{
"fieldName": "image-2",
"originalName": "demo-two.jpg",
"svg": "<svg>…</svg>"
}
]
}To support the continued development of this project, consider donating.
Add support for color images- Plugins for Sketch, Figma, and Adobe XD
- Compare the results of all the apps over a set of images
Contributions welcome.