SVG to PNG Converter

Overview ======= SVG to PNG Converter is a modern Chrome extension designed to bridge the gap between vector and raster graphics. SVG files are resolution-independent and perfect for web development, but many platforms, tools, and export pipelines still require PNG files in specific dimensions. This extension solves that problem by providing a fast, private, and user-friendly conversion experience directly in the browser. Core Features ============ 1. File Upload & Drag-and-Drop Support - Users can drag and drop SVG files directly onto the upload zone for instant loading - Alternative browse button for traditional file selection - Real-time file validation to ensure only valid SVG files are processed - Clear error messaging if invalid files are selected - File name and original dimensions displayed after upload 2. Multiple Output Size Options The extension offers seven preset size options covering the most common use cases: - Original: Exports the SVG at its native dimensions - 16x16: Favicon and browser tab icon standard - 24x24: Toolbar and menu icon sizes - 32x32: Small application icons and UI elements - 48x48: Medium application icons and assets - 128x128: Larger icons for application launchers - 256x256: High-resolution icon and asset exports Each size can be independently selected via checkbox, allowing users to export multiple variants simultaneously. 3. Custom Size Input - Users can add up to 5 custom dimensions beyond preset options - Flexible width and height input with validation (1-2048 pixels) - Prevents duplicate custom sizes automatically - Real-time feedback with max limit warnings - Quick add via "+" button or Enter key - Remove custom sizes with single-click delete button - Visual disabled state when maximum custom sizes reached 4. Intelligent Filename Pattern System Multiple filename pattern templates cater to different naming conventions: - {name}-(size).png (default): Uses original filename with size suffix (e.g., `logo-16.png`) - icon-(size).png: Generic icon naming pattern - icon_(size).png: Underscore-based naming variant - icon-{size}.png: Alternative bracket syntax - {size}.png: Size-only naming for minimal filenames - Custom Pattern: Users can define their own patterns using `{name}` and `{size}` placeholders Smart logic automatically simplifies filenames when only the original size is selected (e.g., `logo.svg` → `logo.png` without size suffix), reducing unnecessary filename complexity. 5. Batch Download Capability - Convert and download multiple PNG variants simultaneously - 300ms delay between downloads prevents browser blocking - Success notifications indicate total files downloaded - Handles single file and multi-file downloads seamlessly - File download progress feedback with loading spinner 6. Dark Mode Theme Support - Light and dark theme toggle accessible via moon/sun icon in header - Persistent theme preference saved to Chrome storage - Professional color schemes optimized for both themes: - Light: Clean white background with blue accents - Dark: Dark gray background with properly contrasted text - Smooth transitions between theme changes 7. Original Dimensions Display - Automatically parses SVG viewBox and dimension attributes - Shows original width and height after file upload - Helps users understand native resolution before export - Fallback to reasonable defaults (100x100) if dimensions not specified 8. Reset Functionality - Clear File: Removes current SVG without resetting all options - Reset: Complete reset of all settings, including: - Uploaded file removal - Unchecking all size selections - Clearing custom sizes - Resetting filename pattern to default - Disabling convert button 9. Real-Time User Feedback - Status messages for success, error, and warning scenarios - Loading spinner with visual feedback during conversion - Error handling for invalid files or conversion failures - Automatic message dismissal after 3 seconds - Non-intrusive notification positioning 10. Professional UI/UX Design - Compact 380x550px popup window optimized for extension format - Responsive layout that works on different screen sizes - Smooth animations and transitions for all interactions - Hover states and visual feedback for interactive elements - Color-coded buttons (primary, success, danger) for action clarity - Clean typography and proper spacing throughout - Accessible form controls with proper focus states 11. Offline-First Architecture - No external API calls or dependencies - Conversion happens entirely within browser using Canvas API - Works without internet connection - No data transmission to external servers - Privacy-respecting approach with all processing local 12. Input Validation & Error Handling - SVG file type validation before processing - Width/height validation for custom sizes (1-2048px) - Prevents duplicate custom sizes - Duplicate filename detection with user warnings - Graceful error messages for all edge cases - Console logging for developer debugging 13. Visual Icon Asset - Professional blue gradient icon with visual clarity - Represents SVG-to-PNG conversion with modern design - Includes success checkmark badge - Visible at multiple sizes (16px to 128px) - Matches extension brand colors and aesthetic 14. Performance Optimization - Efficient canvas rendering using native browser APIs - Minimal resource usage and fast conversion times - Optimized PNG encoding for web delivery - Quick file downloads without compression delays - Responsive UI that doesn't freeze during conversion 15. Accessibility Features - Proper label associations for form controls - Semantic HTML structure for screen readers - High contrast color scheme compliant with WCAG standards - Keyboard navigation support (Enter key for custom size addition) - Descriptive tooltips and placeholder text - Focus states for all interactive elements User Workflows ============== Workflow 1: Simple Single Export 1. User opens extension 2. Drags SVG fi…