SVG to PNG Converter

About

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 file into drop zone
3. Sees original dimensions displayed
4. Clicks "Convert & Download"
5. Downloads single PNG file instantly

Workflow 2: Multi-Size Export for Web Icons
1. Opens extension
2. Uploads SVG icon file
3. Selects preset sizes (16, 24, 32, 48, 128)
4. Keeps default filename pattern
5. Clicks convert
6. Receives multiple optimized PNG files

Workflow 3: Custom Dimensions Export
1. Uploads SVG graphic
2. Selects standard sizes
3. Adds custom size (200x150)
4. Adds another custom size (300x200)
5. Sets custom pattern `{name}_web_{size}.png`
6. Downloads all variants with custom naming

Workflow 4: Original-Only Export
1. Uploads SVG
2. Selects ONLY "Original" checkbox
3. Downloads as simple `filename.png` without size suffix
4. No unnecessary filename complexity

Design Decisions & Rationale
==========================

Offline-First Approach
- Decision: No external API calls
- Rationale: Privacy protection, reliability, instant performance, works without internet
- Benefit: Users maintain complete control over assets without data transmission concerns

Maximum 5 Custom Sizes
- Decision: Hard limit on custom dimensions
- Rationale: Prevents accidental misuse, maintains UI usability, discourages bulk exports inappropriate for extension
- Benefit: Focused tool with clear boundaries

Flexible Filename Patterns
- Decision: Multiple templates plus custom option
- Rationale: Different projects use different naming conventions, supports diverse workflows
- Benefit: Users can export with naming conventions matching their projects

Intelligent Original Size Handling
- Decision: Auto-simplify filenames when only original is selected
- Rationale: Reduces unnecessary complexity in typical single-file exports
- Benefit: Cleaner output filenames, better user experience

Theme Persistence
- Decision: Save theme preference to Chrome Storage
- Rationale: Users should maintain their preferred theme across sessions
- Benefit: Personalization, improved user experience, accessibility consideration