How to Export SVG as PNG or JPEG with JavaScript

Publish in Javascript el 26/05/2025 16:24

Today I want to share with you a handy web tool I created for converting SVG images to PNG format while preserving transparency (alpha channel). This is particularly useful for designers and developers who need to convert vector graphics to raster format while maintaining quality.

Convert SVG files to PNG effortlessly with our lightweight and responsive online converter. This tool lets you upload any SVG file and export it as a PNG image with customizable width and height, ensuring pixel-perfect results every time. It supports alpha transparency, making it ideal for logos, icons, and graphics used in web and mobile design. No registration, no ads — just a simple and effective way to get your images ready for use anywhere.

Play Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG to PNG Converter</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }

        .container {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .preview-container {
            margin: 20px 0;
            border: 2px dashed #ccc;
            padding: 20px;
            text-align: center;
            min-height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #svgPreview {
            max-width: 100%;
            max-height: 400px;
        }

        .dimensions-container {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }

        .dimension-input {
            flex: 1;
        }

        label {
            display: block;
            margin-bottom: 5px;
            color: #333;
        }

        input[type="number"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        button:hover {
            background-color: #45a049;
        }

        input[type="file"] {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>SVG to PNG Converter</h1>
        <input type="file" id="svgInput" accept=".svg" />
        
        <div class="preview-container">
            <img id="svgPreview" />
        </div>

        <div class="dimensions-container">
            <div class="dimension-input">
                <label for="width">Width (px):</label>
                <input type="number" id="width" min="1" value="800" />
            </div>
            <div class="dimension-input">
                <label for="height">Height (px):</label>
                <input type="number" id="height" min="1" value="600" />
            </div>
        </div>

        <button id="exportBtn" disabled>Export PNG</button>
    </div>

    <script>
        const svgInput = document.getElementById('svgInput');
        const svgPreview = document.getElementById('svgPreview');
        const widthInput = document.getElementById('width');
        const heightInput = document.getElementById('height');
        const exportBtn = document.getElementById('exportBtn');

        let currentSVG = null;

        svgInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    currentSVG = e.target.result;
                    svgPreview.src = currentSVG;
                    exportBtn.disabled = false;
                };
                reader.readAsDataURL(file);
            }
        });

        exportBtn.addEventListener('click', function() {
            const width = parseInt(widthInput.value);
            const height = parseInt(heightInput.value);

            // Create a temporary canvas
            const canvas = document.createElement('canvas');
            canvas.width = width;
            canvas.height = height;
            const ctx = canvas.getContext('2d');

            // Create a temporary image to obtain the original dimensions
            const img = new Image();
            img.onload = function() {
                // Calculate dimensions while maintaining proportion
                const scale = Math.min(width / img.width, height / img.height);
                const scaledWidth = img.width * scale;
                const scaledHeight = img.height * scale;

                // Calculate position to center
                const x = (width - scaledWidth) / 2;
                const y = (height - scaledHeight) / 2;

                // Draw with transparent background
                ctx.clearRect(0, 0, width, height);
                ctx.drawImage(img, x, y, scaledWidth, scaledHeight);

                // Convert to PNG and download
                const pngData = canvas.toDataURL('image/png');
                const downloadLink = document.createElement('a');
                downloadLink.href = pngData;
                downloadLink.download = 'imagen.png';
                downloadLink.click();
            };
            img.src = currentSVG;
        });
    </script>
</body>
</html>

How the Tool Works

The tool consists of a clean HTML interface with JavaScript functionality. Here's a detailed breakdown of its components:

1. File Selection

The tool starts with a file input button that accepts only .svg files
When a user selects a file, it's read using the FileReader API
The SVG content is converted to a data URL and displayed in the preview area

2. Preview Display

The preview container shows the selected SVG with a dashed border
The image is automatically scaled to fit within the container
Users can verify their selection before conversion

3. Dimension Controls

Two number inputs allow specifying width and height for the output PNG
Default values are set to 800x600 pixels
Minimum value is enforced to prevent invalid dimensions

4. Conversion Process

When the Export button is clicked, the magic happens:

A temporary canvas element is created with the specified dimensions
The SVG image is loaded into an Image object
The image is scaled proportionally to fit within the target dimensions
The scaled image is centered on the canvas
The canvas is converted to PNG format with transparency preserved

5. Download Functionality

The resulting PNG is converted to a data URL
A temporary anchor element is created to trigger the download
The downloaded file is named "imagen.png" by default

Technical Highlights

Uses HTML5 Canvas API for rasterization
Preserves alpha channel by clearing canvas before drawing
Maintains aspect ratio during scaling
Automatically centers the image in the output
Works entirely client-side (no server processing needed)

Usage Example

Click "Select File" and choose an SVG image
The preview will show your selected image
Adjust width and height as needed (or keep defaults)
Click "Export PNG" to download the converted image

This tool is perfect for quick conversions while maintaining control over output dimensions. The client-side processing means your files never leave your computer, ensuring privacy and security.

Feel free to modify and improve the code - it's all there.