Technical Specification: Free Online SVG to Data-URI Converter

1. Overview

A client-side web utility that allows developers to paste or upload SVG files and instantly receive the optimized Data-URI string, ready for use in CSS background-image or src attributes.

2. Functional Requirements

• Input Methods:
  • Multiline text area for pasting raw SVG code.
  • Drag-and-drop file zone for direct .svg file ingestion.
• Processing Options:
  • Toggle for Base64 encoding.
  • Toggle for URL-encoded (URI) encoding.
  • Automatic whitespace minification.
• Output Features:
  • Real-time generation of the Data-URI string.
  • A "Copy to Clipboard" button with visual feedback.
  • A pre-formatted CSS code snippet (e.g., background-image: url('data:image/svg+xml;...');).
• Preview:
  • A visual preview box showing how the SVG renders in real-time.

3. User Interface (UI) Design

• Aesthetic: Clean, professional "SaaS" aesthetic. Light-mode only, utilizing a palette of soft grays, crisp whites, and a primary "Action Blue" (#2563eb) for buttons.
• Layout:
  • Header: Simple, descriptive H1 title.
  • Main Area: A two-column grid (on desktop) or stacked (on mobile). Left side for Input (Paste/Upload), Right side for Output (Result String).
  • Controls: Located between Input and Output sections, containing conversion toggles and utility buttons.
  • Status Bar: A subtle bar indicating success messages or file info without using alerts.

4. Technical Constraints (Strict)

• Architecture: One single HTML file including CSS and Vanilla JS.
• Storage: ABSOLUTELY NO usage of localStorage, sessionStorage, or cookies. The app must function in a sandboxed iframe without state persistence.
• No Popups: Do not use alert() or prompt(). All notifications must be handled by custom UI components (e.g., a hidden div that fades in/out).
• Compatibility: Use Blob and FileReader APIs for file ingestion. Use encodeURIComponent and btoa for string transformation.
• Responsive: Fluid layout using Flexbox and CSS Grid. Container widths should scale to 95% on mobile.

5. Implementation Roadmap

1. Core Logic: Develop the conversion engine to handle both Base64 and URL-encoded formats.
2. UI Framework: Build the layout using CSS variables for theme consistency.
3. Event Handling: Hook up drag-and-drop listeners and text input change events to trigger automatic generation.
4. Feedback: Add micro-interactions (e.g., button click ripple, copy-to-clipboard animation).
5. Optimization: Ensure the final HTML file size is minimized for fast loading.

6. Color Palette

• Background: #f8fafc (Off-white)
• Surface: #ffffff (Pure white)
• Primary: #2563eb (Blue)
• Text: #1e293b (Dark Slate)
• Borders/Dividers: #e2e8f0 (Light Gray)
• Success/Action: #16a34a (Green for success indicators)