SVG to PNG / JPEG / ICO (Favicon) Converter

Hi there This is a free online tool that allows you to convert SVG files to PNG, JPEG, ICO (Favicon) images.

It is very simple and fast - it runs only in your browser and allows you to customize image width and height Try it out here: https://svg-to-png-jpeg-favicon.vercel.app

Story

While trying to do some svg to images conversion, I couldn't find any simple online tool that allows me to do so This was frustrating since the latest Web APIs - URL API and Canvas API have made it very easy to convert files to different image types on a modern browser. So I went ahead and coded out this simple tool myself and shared it out there with others who might also experience the frustration

Implementation

This tool is open-source - you can use it for anything and read about its full implementation in /pages/index.tsx. The core utility is the Canvas Class, which is only ~100 lines of JavaScript code. At high level, it uses the below Web APIs to perform the svg conversion:

1. URL.createObjectURL to read the svg file and convert it to a DOMString
2. CanvasRenderingContext2D.drawImage to render a svg image on a canvas without losing resolution
3. HTMLCanvasElement.toDataURL to convert the svg file on canvas to be different image types based on user selection - .png .jpeg .ico

Since Web APIs are bundled into a browser, you can run this tool entirely offline on any modern day browser.

Tech Stack

*Vercel is used over GitHub page to deploy this tool because it has better SEO support with SSG and can be potentially helpful for others to find it on Google

Local Testing

git clone https://github.com/xitanggg/svg-to-png-jpeg-favicon.git
cd ./svg-to-png-jpeg-favicon
npm install
npm run dev

Finally, open http://localhost:3000 with your browser to use the tool locally