SVG Stroke & Thickness Adjuster (Dilate/Erode Utility)

Overview

A clean, professional, browser-based utility that allows designers and developers to adjust the thickness of SVG strokes and shapes instantly. It uses the feMorphology SVG filter to perform dilation (thickening) or erosion (thinning) on uploaded SVG files. The application provides an immediate visual comparison and a raw code output for implementation.

Core Features

• Real-time Morphology Controls: A simple slider to define the radius (1px to 20px) and a toggle for Dilate (Add thickness) or Erode (Subtract thickness).
• Instant Split-View Preview: Compare the original SVG side-by-side with the modified version.
• SVG Filter Code Export: Provides the exact <filter> tag code snippet to copy and paste into your project.
• Download Result: One-click download of the modified SVG file.
• Performance Monitoring: In-memory processing that avoids file uploads to servers.

UI Layout

• Header: Title and brief sub-headline explaining the tool's purpose.
• Main Tool Area:
  • Left Sidebar (Controls):
    • File input button (drag-and-drop).
    • Range slider for radius control.
    • Toggle button for operator mode (Dilate/Erode).
    • Reset button.
  • Right Viewport (Canvas):
    • Split-screen comparison: "Original" on the left, "Modified" on the right.
    • Zoom controls and auto-fit toggle.
  • Bottom Panel:
    • Text area containing the generated <filter> block.
    • "Copy to Clipboard" button.
    • "Download SVG" button.

Design & Aesthetics

• Palette: A refined palette of "Cloud White" background, "Deep Slate" for text, and "Electric Blue" for the accent/controls.
• Typography: Inter or system-ui sans-serif fonts.
• Interactions:
  • Smooth slider transitions (cubic-bezier).
  • Micro-animations when hovering over the download/copy buttons.
  • Subtle drop-shadows on the preview cards to emphasize depth.
  • A "shimmer" loader state when a file is being processed.

Developer Constraints & Directives

• Strict Architecture: The entire app must be a single .html file. No build tools. Use only Vanilla JS.
• No Persistent Storage: DO NOT use localStorage, sessionStorage, or cookies. Keep all image data in memory variables.
• Sandboxed Compatibility: Ensure all UI interactions avoid alert() or prompt(). Use custom <div> based modal overlays for user feedback.
• Responsive Design: The UI must stack vertically on mobile (Preview on top, controls on bottom) and display side-by-side on desktop.
• Performance: Ensure SVG processing is wrapped in requestAnimationFrame to prevent UI freezing during slider manipulation.