SVG Path Data Editor & Minifier

A professional-grade, browser-based utility designed for web developers and UI designers to manipulate and optimize SVG <path> elements without relying on heavy design software.

Core Functionality

• Real-Time Visual Editor: A dual-pane interface with a code editor on the left and a live-updating canvas on the right.
• Path Minifier: One-click optimization to remove unnecessary whitespace, reduce coordinate precision (rounding decimals), and shorten path command syntax.
• Syntax Parsing: Live validation of path commands (M, L, H, V, C, S, Q, T, A, Z). Highlights errors in red when the path syntax is invalid.
• Copy to Clipboard: One-click functionality to grab the optimized path data.
• Command Reference: A collapsible drawer containing documentation on SVG path syntax for quick reference.

UI/UX Design (Light Mode Only)

• Color Palette: Professional clean aesthetic using off-white backgrounds (#F9FAFB), crisp borders (#E5E7EB), and a primary action color of soft indigo (#4F46E5).
• Layout:
  • Header: Simple tool title and action buttons (Reset, Copy, Minify).
  • Main Area: Split-screen layout. Left: A monospaced text area for path strings. Right: An SVG container centered in a clean, grid-patterned viewport.
  • Footer/Modals: Custom modal overlays for "About" and "Keyboard Shortcuts" to comply with the no-alert policy.
• Animations: Subtle transitions when toggling minification settings; smooth hover states on action buttons; no jarring layout shifts.

Technical Implementation Constraints

• Single File: Everything must be contained in one HTML file (CSS in <style>, JS in <script>).
• Sandboxed Compatibility:
  • NO STORAGE: Absolutely no use of localStorage, sessionStorage, or cookies. Maintain application state in JavaScript memory only.
  • NO POPUPS: Implement modals (divs with absolute positioning) for all user notifications or information dialogs.
• Performance: Use requestAnimationFrame for the canvas preview rendering to ensure a smooth 60fps experience when the user is typing path data.
• Responsiveness: Use CSS Grid/Flexbox to switch from side-by-side desktop view to a stacked mobile view (code top, preview bottom) on smaller screens.
• Libraries Allowed: Tailwind CSS via CDN, and a lightweight library for SVG manipulation if needed (like standard DOM manipulation or a small helper script).