Bhavesh Shrigiri

Project Vision

The SVG Images API Service provides a simple yet powerful solution for managing SVG images across different projects. This lightweight API service enables developers to easily upload, fetch, and manage SVG files with proper validation and CORS support, making it perfect for icon management and dynamic image serving.

Key Features

📤 Image Upload System

SVG file upload via REST API
File size validation (5MB maximum)
SVG format validation
Automatic timestamp-based naming to prevent conflicts
Secure file handling with proper error responses

📋 Image Management

List all uploaded SVG images
Get detailed information about specific images
Delete images when no longer needed
Direct URL access for easy integration

🌐 Cross-Origin Support

CORS enabled for cross-origin requests
Easy integration with any frontend framework
Direct image serving for HTML <img> tags
RESTful API design for consistent usage

Technical Implementation

API Endpoints

The service provides a comprehensive set of endpoints for image management:

// Upload endpoint
app.post('/upload', upload.single('image'), (req, res) => {
  if (!req.file) {
    return res.status(400).json({
      success: false,
      message: 'No file uploaded'
    })
  }

  const fileInfo = {
    filename: req.file.filename,
    originalName: req.file.originalname,
    size: req.file.size,
    url: `${req.protocol}://${req.get('host')}/images/${req.file.filename}`,
    directUrl: `${req.protocol}://${req.get('host')}/images/${req.file.filename}`
  }

  res.json({
    success: true,
    message: 'SVG image uploaded successfully',
    data: fileInfo
  })
})

Server Architecture

Express.js Backend: Lightweight and fast server setup
Multer Integration: Efficient file upload handling
File System Storage: Local storage with organized file structure
CORS Configuration: Cross-origin resource sharing enabled
Error Handling: Comprehensive error responses and validation

Frontend Integration Examples

The API can be easily integrated into any project:

HTML Usage:

<img
  src="https://ccimageapi.netlify.app/images/your-filename.svg"
  alt="Icon"
  width="32"
  height="32"
/>

<!-- Theme-based usage -->
<img
  src="https://ccimageapi.netlify.app/images/tech-stack-typescript-light.svg"
  alt="TypeScript light icon"
  className="hidden [html.light_&]:block"
/>

JavaScript/React Integration:

// Fetch available images
const fetchImages = async () => {
  const response = await fetch('https://ccimageapi.netlify.app/images/list')
  const data = await response.json()
  return data.images
}

// React component
function TechIcon({ technology, theme = 'light' }) {
  const imageUrl = `https://ccimageapi.netlify.app/images/tech-stack-${technology}-${theme}.svg`

  return (
    <img
      src={imageUrl}
      alt={`${technology} ${theme} icon`}
      width={32}
      height={32}
    />
  )
}

API Documentation

Upload SVG Image

Endpoint: POST /upload
Form Data: image (SVG file)
Response: File information with direct URL access

List All Images

Endpoint: GET /images/list
Response: Array of all uploaded images with metadata

Get Image Info

Endpoint: GET /api/images/:filename
Response: Detailed information about specific image

Direct Image Access

Endpoint: GET /images/:filename
Usage: Direct URL for image serving in applications

Delete Image

Endpoint: DELETE /images/:filename
Response: Confirmation of successful deletion

Development Challenges & Solutions

File Validation

Implementing robust SVG validation required:

MIME type checking for security
File extension validation
Size limit enforcement (5MB maximum)
Malformed SVG detection and rejection

Naming Conflicts

Preventing filename collisions through:

Timestamp-based prefixing system
Original filename preservation
Unique identifier generation
Conflict detection and resolution

Cross-Origin Requests

Enabling seamless integration across domains:

CORS middleware configuration
Preflight request handling
Header management for security
Origin validation for production use

Technical Specifications

Performance Metrics

Upload Speed: Sub-second for files under 1MB
API Response Time: <50ms average
File Size Limit: 5MB maximum
Supported Format: SVG only
Storage: Local file system with organized structure

Security Features

File type validation at multiple levels
Size restrictions to prevent abuse
Sanitized filename handling
Error message standardization
CORS policy implementation

Use Cases & Applications

Icon Management Systems

Perfect for managing tech stack icons, UI components, and brand assets across multiple projects with consistent theming support.

Dynamic Image Serving

Ideal for applications requiring on-demand SVG delivery with direct URL access for seamless integration.

Development Workflows

Streamlines the process of managing and serving SVG assets during development and production phases.

Future Enhancements

Planned Features

[ ] Authentication system for private image management
[ ] Bulk upload functionality
[ ] Image compression and optimization
[ ] CDN integration for faster delivery
[ ] Admin dashboard for better management

Advanced Capabilities

[ ] AWS S3 storage integration
[ ] Image transformation API
[ ] Webhook notifications
[ ] Rate limiting and quotas
[ ] Advanced analytics and usage tracking

Project Impact

Developer Experience

This API service simplifies SVG management for developers by providing:

Easy Integration: Simple REST API that works with any framework
Reliable Storage: Consistent file serving with proper error handling
Developer-Friendly: Clear documentation and intuitive endpoint design

Real-World Usage

The service has proven valuable in:

Multi-project icon management
Theme-based image serving (light/dark modes)
Development environment asset management
Quick prototyping and testing workflows

Community Value

By providing a straightforward solution for SVG management, this project:

Reduces development time for asset management
Offers a clean API design pattern for similar services
Demonstrates best practices for file upload handling
Provides a foundation for more complex media services

Deployment & Architecture

Current Setup

Hosting: Netlify for reliable and fast global delivery
Storage: File system-based with organized directory structure
API: RESTful design following standard HTTP conventions
CORS: Configured for cross-origin compatibility

Production Considerations

For enterprise use, the architecture supports:

Easy migration to cloud storage (AWS S3, Google Cloud)
Authentication layer integration
Rate limiting implementation
Advanced monitoring and logging

The SVG Images API Service represents a clean, efficient solution for modern web development asset management, demonstrating how simple APIs can solve common development challenges effectively.