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:
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.
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.
Image Tracing
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.
Contributions welcome.
