Technical Specification: Free Online SVG to PNG Converter & High-Res Exporter

Overview

This tool is a client-side, browser-based utility designed to convert Scalable Vector Graphics (SVG) into raster formats (primarily PNG). It prioritizes performance, privacy (zero server-side processing), and high-fidelity output customization.

Core Features

• Drag-and-Drop Interface: Easily upload .svg files or paste raw XML code directly into the editor.
• Live Preview: A real-time rendering engine that displays the SVG as it will appear in the final export.
• High-Resolution Export: Support for custom pixel dimensions and scaling factors (1x, 2x, 4x) to handle high-DPI displays.
• Background Control: Toggle between transparent, solid white, or custom background colors for the output image.
• Client-Side Rendering: Uses HTML5 Canvas API for all transformations, ensuring no data ever leaves the user's browser.
• No Storage Dependencies: The application maintains state purely in memory, adhering to the strict no-storage constraint.

UI/UX Design

• Layout:
  • Header: Simple, minimalist title with a clean utility-first aesthetic.
  • Main Area: A split-pane layout. On the left/top, the Input/Settings panel. On the right/bottom, the Canvas Preview.
  • Controls: Intuitive sliders for scaling, color swatches for backgrounds, and a prominent 'Download' button.
• Aesthetic:
  • Palette: Crisp whites, soft grays, and professional cobalt blues for active elements.
  • Typography: Modern sans-serif fonts (e.g., Inter or system defaults).
  • Micro-interactions: Smooth transition animations when switching modes or applying settings (e.g., opacity transitions, slide-up animations).

Developer Directives

1. Single-File Architecture: All HTML, CSS, and Vanilla JavaScript must be contained in a single index.html file. No external frameworks like React or Vue are permitted.
2. State Management: Use in-memory JavaScript variables. DO NOT use localStorage, sessionStorage, or cookies due to iframe sandbox restrictions.
3. Formatting: Use Tailwind CSS (via CDN) to maintain a responsive, professional SaaS appearance.
4. Handling Popups: Use a custom overlay modal (<div> based) for alerts, errors, or information dialogs rather than window.alert().
5. Rendering Strategy: Use DOMURL.createObjectURL to convert the SVG string to a Data URL or Blob, then draw to a <canvas> element for rasterization.
6. Responsive Design: Ensure the canvas container handles varying aspect ratios and window resizing without loss of quality or overflow.
7. Accessibility: Ensure all interactive elements have proper aria-labels and focus states for keyboard navigation.