SVG Customizer

A modern web application that allows you to upload SVG files, customize them with various styling options, and download them as enhanced SVG files.

Features

• SVG Upload: Drag and drop or click to upload SVG files
• Real-time Preview: See your changes instantly
• Customization Options:
  • Resize (width and height)
  • Border shapes (rectangle, rounded, circle)
  • Border radius control
  • Border styles (solid, dashed, dotted)
  • Border thickness adjustment
  • Padding control
  • Color customization (border, background, SVG content color)
• Download: Export customized SVG with random ID filename

How to Use

1. Open index.html in a modern web browser
2. Upload your SVG file by:
   • Dragging and dropping it onto the upload zone
   • Clicking the upload zone to browse for files
3. Customize your SVG using the controls:
   • Adjust size with the width/height sliders
   • Choose a border shape (rectangle, rounded, or circle)
   • Modify border radius for rounded corners
   • Change border thickness and style
   • Set padding around your SVG
   • Pick your preferred colors for border, background, and SVG content
4. Click "Download SVG" to save your customized file with a random ID name

Sample SVG

A sample SVG file (sample.svg) is included for testing - it contains a star shape with a circle in the center.

Technologies Used

• HTML5
• Tailwind CSS (via CDN)
• Vanilla JavaScript
• SVG manipulation with DOMParser and XMLSerializer

Browser Compatibility

Works on all modern browsers that support:

• ES6 JavaScript
• SVG
• File API
• Drag and Drop API
• DOMParser and XMLSerializer

Project Structure

svg_customize/
├── index.html      # Main HTML file with UI
├── app.js          # JavaScript functionality
├── sample.svg      # Sample SVG for testing
└── README.md       # This file

Features Explained

Border Shapes

• Rectangle: Standard rectangular border
• Rounded: Rectangular border with adjustable corner radius
• Circle: Circular clipping and border

Border Styles

• Solid: Continuous line
• Dashed: Dashed line pattern
• Dotted: Dotted line pattern

Color Customization

• Border Color: Changes the color of the border around your SVG
• Background Color: Changes the background color behind your SVG
• Text Color: Changes the fill and stroke colors of elements in your SVG

License

Free to use and modify as needed.