Documentation Core Tools Svg Placeholder Generator

Examples

This section provides practical examples of how to use the SVG Placeholder Generator for various scenarios and use cases.

Common Placeholder Examples

1. Basic Website Placeholder

Use Case: General website image placeholder Configuration:

Width: 400px
Height: 300px
Background: #f3f4f6 (light gray)
Text: #6b7280 (medium gray)
Font Size: 24px
Custom Text: "Image"

Generated SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300" width="400" height="300">
  <rect width="400" height="300" fill="#f3f4f6"></rect>
  <text
    x="50%"
    y="50%"
    dominant-baseline="middle"
    text-anchor="middle"
    font-size="24"
    fill="#6b7280"
  >
    Image
  </text>
</svg>

2. Hero Section Placeholder

Use Case: Large hero image placeholder Configuration:

Width: 1200px
Height: 600px
Background: #1f2937 (dark gray)
Text: #ffffff (white)
Font Size: 48px
Custom Text: "Hero Image"

Generated SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600" width="1200" height="600">
  <rect width="1200" height="600" fill="#1f2937"></rect>
  <text
    x="50%"
    y="50%"
    dominant-baseline="middle"
    text-anchor="middle"
    font-size="48"
    fill="#ffffff"
  >
    Hero Image
  </text>
</svg>

3. Product Thumbnail Placeholder

Use Case: E-commerce product image placeholder Configuration:

Width: 200px
Height: 200px
Background: #ffffff (white)
Text: #374151 (dark gray)
Font Size: 18px
Custom Text: "Product"

Generated SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <rect width="200" height="200" fill="#ffffff"></rect>
  <text
    x="50%"
    y="50%"
    dominant-baseline="middle"
    text-anchor="middle"
    font-size="18"
    fill="#374151"
  >
    Product
  </text>
</svg>

4. User Avatar Placeholder

Use Case: User profile image placeholder Configuration:

Width: 100px
Height: 100px
Background: #3b82f6 (blue)
Text: #ffffff (white)
Font Size: 32px
Custom Text: "👤"

Generated SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <rect width="100" height="100" fill="#3b82f6"></rect>
  <text
    x="50%"
    y="50%"
    dominant-baseline="middle"
    text-anchor="middle"
    font-size="32"
    fill="#ffffff"
  >
    👤
  </text>
</svg>

5. Blog Post Featured Image

Use Case: Blog post featured image placeholder Configuration:

Width: 800px
Height: 400px
Background: #6366f1 (indigo)
Text: #ffffff (white)
Font Size: 36px
Custom Text: "Blog Post"

Generated SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400" width="800" height="400">
  <rect width="800" height="400" fill="#6366f1"></rect>
  <text
    x="50%"
    y="50%"
    dominant-baseline="middle"
    text-anchor="middle"
    font-size="36"
    fill="#ffffff"
  >
    Blog Post
  </text>
</svg>

Brand-Specific Examples

1. Tech Company Brand

Use Case: Technology company website placeholders Configuration:

Width: 600px
Height: 400px
Background: #000000 (black)
Text: #00ff00 (green)
Font Size: 28px
Custom Text: "TechCorp"

Generated SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" width="600" height="400">
  <rect width="600" height="400" fill="#000000"></rect>
  <text
    x="50%"
    y="50%"
    dominant-baseline="middle"
    text-anchor="middle"
    font-size="28"
    fill="#00ff00"
  >
    TechCorp
  </text>
</svg>

2. Healthcare Brand

Use Case: Healthcare website placeholders Configuration:

Width: 500px
Height: 350px
Background: #059669 (emerald)
Text: #ffffff (white)
Font Size: 24px
Custom Text: "HealthCare"

Generated SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 350" width="500" height="350">
  <rect width="500" height="350" fill="#059669"></rect>
  <text
    x="50%"
    y="50%"
    dominant-baseline="middle"
    text-anchor="middle"
    font-size="24"
    fill="#ffffff"
  >
    HealthCare
  </text>
</svg>

3. Creative Agency Brand

Use Case: Creative agency portfolio placeholders Configuration:

Width: 400px
Height: 300px
Background: #ec4899 (pink)
Text: #ffffff (white)
Font Size: 22px
Custom Text: "Creative"

Generated SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300" width="400" height="300">
  <rect width="400" height="300" fill="#ec4899"></rect>
  <text
    x="50%"
    y="50%"
    dominant-baseline="middle"
    text-anchor="middle"
    font-size="22"
    fill="#ffffff"
  >
    Creative
  </text>
</svg>

Responsive Design Examples

1. Mobile-First Placeholder

Use Case: Mobile-optimized placeholder Configuration:

Width: 300px
Height: 200px
Background: #f8fafc (very light gray)
Text: #475569 (slate)
Font Size: 16px
Custom Text: "Mobile"

Generated SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200" width="300" height="200">
  <rect width="300" height="200" fill="#f8fafc"></rect>
  <text
    x="50%"
    y="50%"
    dominant-baseline="middle"
    text-anchor="middle"
    font-size="16"
    fill="#475569"
  >
    Mobile
  </text>
</svg>

2. Tablet Placeholder

Use Case: Tablet-optimized placeholder Configuration:

Width: 600px
Height: 400px
Background: #e2e8f0 (light blue-gray)
Text: #334155 (dark slate)
Font Size: 24px
Custom Text: "Tablet"

Generated SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" width="600" height="400">
  <rect width="600" height="400" fill="#e2e8f0"></rect>
  <text
    x="50%"
    y="50%"
    dominant-baseline="middle"
    text-anchor="middle"
    font-size="24"
    fill="#334155"
  >
    Tablet
  </text>
</svg>

3. Desktop Placeholder

Use Case: Desktop-optimized placeholder Configuration:

Width: 1200px
Height: 600px
Background: #1e293b (dark slate)
Text: #f1f5f9 (light slate)
Font Size: 32px
Custom Text: "Desktop"

Generated SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600" width="1200" height="600">
  <rect width="1200" height="600" fill="#1e293b"></rect>
  <text
    x="50%"
    y="50%"
    dominant-baseline="middle"
    text-anchor="middle"
    font-size="32"
    fill="#f1f5f9"
  >
    Desktop
  </text>
</svg>

CSS Integration Examples

1. Background Image with CSS

.placeholder-bg {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMzAwIiB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCI+CiAgPHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiNmM2Y0ZjYiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIyNCIgZmlsbD0iIzZiNzI4MCI+SW1hZ2U8L3RleHQ+Cjwvc3ZnPgo=');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

2. Responsive Placeholder with Media Queries

.responsive-placeholder {
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .responsive-placeholder {
    background-image: url('data:image/svg+xml;base64,...'); /* Mobile version */
  }
}

@media (min-width: 769px) {
  .responsive-placeholder {
    background-image: url('data:image/svg+xml;base64,...'); /* Desktop version */
  }
}

3. Inline SVG with CSS Styling

<div class="svg-container">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 400 300"
    width="400"
    height="300"
    class="placeholder-svg"
  >
    <rect width="400" height="300" fill="#f3f4f6"></rect>
    <text
      x="50%"
      y="50%"
      dominant-baseline="middle"
      text-anchor="middle"
      font-size="24"
      fill="#6b7280"
    >
      Image
    </text>
  </svg>
</div>

.svg-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.placeholder-svg {
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.placeholder-svg:hover {
  transform: scale(1.05);
}

JavaScript Integration Examples

1. Dynamic Placeholder Generation

function generatePlaceholder(config) {
  const { width, height, text, bgColor, textColor, fontSize } = config;

  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">
    <rect width="${width}" height="${height}" fill="${bgColor}"></rect>
    <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="${fontSize}" fill="${textColor}">${text}</text>
  </svg>`;
}

// Usage
const placeholder = generatePlaceholder({
  width: 400,
  height: 300,
  text: 'Dynamic',
  bgColor: '#3b82f6',
  textColor: '#ffffff',
  fontSize: 24,
});

2. Batch Placeholder Generation

function generateBatchPlaceholders(configs) {
  return configs.map((config) => ({
    ...config,
    svg: generatePlaceholder(config),
    base64: btoa(unescape(encodeURIComponent(generatePlaceholder(config)))),
  }));
}

// Usage
const placeholders = generateBatchPlaceholders([
  {
    width: 200,
    height: 200,
    text: 'Thumbnail',
    bgColor: '#ef4444',
    textColor: '#ffffff',
    fontSize: 18,
  },
  {
    width: 400,
    height: 300,
    text: 'Medium',
    bgColor: '#10b981',
    textColor: '#ffffff',
    fontSize: 24,
  },
  {
    width: 800,
    height: 600,
    text: 'Large',
    bgColor: '#8b5cf6',
    textColor: '#ffffff',
    fontSize: 32,
  },
]);

3. Placeholder with Loading State

class PlaceholderManager {
  constructor() {
    this.placeholders = new Map();
  }

  generatePlaceholder(id, config) {
    const svg = generatePlaceholder(config);
    const base64 = btoa(unescape(encodeURIComponent(svg)));

    this.placeholders.set(id, { svg, base64, config });
    return { svg, base64 };
  }

  getPlaceholder(id) {
    return this.placeholders.get(id);
  }

  clearPlaceholder(id) {
    this.placeholders.delete(id);
  }
}

// Usage
const manager = new PlaceholderManager();
const placeholder = manager.generatePlaceholder('hero-image', {
  width: 1200,
  height: 600,
  text: 'Loading...',
  bgColor: '#f3f4f6',
  textColor: '#6b7280',
  fontSize: 32,
});

Best Practices

1. Consistent Sizing

Use standard aspect ratios (16:9, 4:3, 1:1)
Maintain consistent dimensions across similar content types
Consider responsive breakpoints when setting sizes

2. Color Harmony

Use colors that complement your brand palette
Ensure sufficient contrast for accessibility
Test colors on different backgrounds and devices

3. Text Clarity

Use descriptive text that indicates content type
Keep text concise and readable
Choose appropriate font sizes for image dimensions

4. Performance Optimization

Use Base64 for small, frequently used placeholders
Use SVG files for larger or less common placeholders
Implement proper caching strategies

5. Accessibility

Ensure sufficient color contrast ratios
Use meaningful text content
Provide alternative text when using as background images

These examples demonstrate the versatility and power of the SVG Placeholder Generator for creating professional, optimized placeholder images for any web project.

Was this page helpful?

On this page

Common Placeholder Examples Brand-Specific Examples Responsive Design Examples CSS Integration Examples JavaScript Integration Examples Best Practices