Vector graphics are the standard for web development, but they aren't foolproof. The moment you step outside modern browsers—like embedding images in email campaigns for Outlook, or up assets to legacy CMS platforms—SVGs break.
I needed a quick, reliable way to convert SVGs to PNGs. But every tool I found online had the same frustrating workflow: upload the file to their server, wait for the backend to process it, and download the result.
Up client assets or unreleased UI elements to random third-party servers is a massive privacy risk. So, I built CrushSVG to solve this locally. Here is how I built a 100% client-side SVG to PNG converter.
The Core Concept: Moving Everything to the Browser
The goal was simple: zero server uploads. The entire conversion process had to happen in the user's browser. To achieve this, I relied on the HTML5 element and the browser's native rendering engine.
The application is built using React and Next.js, and deployed on Vercel for fast global edge delivery, but the actual heavy lifting happens purely in JavaScript on the client machine.
The 3-Step Conversion Process: Parsing the File
When a user drops an SVG into the UI, the tool doesn't make any API calls. Instead, it uses the native FileReader API to read the SVG file as a data URL (readAsDataURL). This immediately gives us a base64 encoded string of the SVG that the browser can understand natively.
Drawing to Canvas
You can't just magically convert an SVG string to a PNG. You have to "draw" it first.
I created an invisible element dynamically. Using the standard Image object in JavaScript, I set the source (src) to the base64 SVG string. Once the image loads into the DOM, I use the canvas.getContext('2d').drawImage() method to paint that exact vector graphic onto the canvas pixel by pixel.
Extracting the PNG
This is where the actual conversion happens. Once the SVG is drawn on the canvas, I use the canvas.toDataURL('image/png') method. This extracts the painted canvas as a PNG-encoded base64 string. From there, it's just a matter of creating a temporary anchor ([) tag, setting the href to the new PNG string, and triggering a programmatic click to download the file directly to the user's local storage.]
Why This Approach Matters
Building it this way completely eliminated backend costs for image processing. But more importantly, it solved the trust issue.
Because the files never leave the browser:
It's Instant: No network latency or waiting in queues.
It's Private: NDA client work and proprietary graphics stay on the local machine.
It's Infinitely Scalable: Since the user's device provides the compute power, server load is non-existent.
If you’re a frontend developer dealing with UI assets, or a marketer struggling with broken email logos in Outlook, you can use the tool for free here: crushsvg.net