SVG Placeholder Images for Development: Lightweight, Scalable, Perfect

Why SVG for Placeholder Images?

During development, you need images that load fast, scale perfectly, and communicate layout intent. Raster placeholder services (like Lorem Picsum) download actual JPEG/PNG files — real HTTP requests, real kilobytes, and real latency on slow connections.

SVG placeholder images solve all three problems:

For local development, SVG placeholders eliminate external dependencies entirely.

Inline SVG Placeholders

The simplest approach drops an SVG directly into your HTML:

<div class="image-slot">
  <svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" fill="#E2E8F0"/>
    <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle"
          font-family="sans-serif" font-size="24" fill="#94A3B8">
      800 × 600
    </text>
  </svg>
</div>

This renders instantly, scales perfectly, and clearly communicates the intended dimensions.

Data URI SVG Placeholders

For <img> tags that require a src attribute, encode the SVG as a data URI:

<img
  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600'%3E%3Crect width='100%25' height='100%25' fill='%23E2E8F0'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='sans-serif' font-size='24' fill='%2394A3B8'%3E800 × 600%3C/text%3E%3C/svg%3E"
  alt="Placeholder image 800x600"
  width="800"
  height="600"
/>

Generating Data URIs Programmatically

function svgPlaceholder(width, height, text, bgColor = '#E2E8F0', textColor = '#94A3B8') {
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
    <rect width="100%" height="100%" fill="${bgColor}"/>
    <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle"
          font-family="sans-serif" font-size="20" fill="${textColor}">
      ${text || `${width} × ${height}`}
    </text>
  </svg>`;
  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
}

// Usage
document.querySelector('img').src = svgPlaceholder(800, 600);

Vue/Nuxt Component

For Nuxt projects, create a reusable placeholder component:

<script setup lang="ts">
const props = withDefaults(defineProps<{
  width: number
  height: number
  text?: string
  bgColor?: string
  textColor?: string
}>(), {
  text: '',
  bgColor: '#E2E8F0',
  textColor: '#94A3B8',
})

const label = computed(() => props.text || `${props.width} × ${props.height}`)
</script>

<template>
  <svg :width="width" :height="height" xmlns="http://www.w3.org/2000/svg" role="img" :aria-label="`Placeholder: ${label}`">
    <rect width="100%" height="100%" :fill="bgColor" />
    <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle"
          font-family="sans-serif" :font-size="Math.min(width, height) / 12" :fill="textColor">
      {{ label }}
    </text>
  </svg>
</template>

Responsive Placeholder Patterns

Fixed-dimension placeholders break in responsive layouts because they do not adapt to container width. Use viewBox instead of fixed width/height:

<svg viewBox="0 0 16 9" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: auto;">
  <rect width="100%" height="100%" fill="#E2E8F0"/>
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle"
        font-size="1" fill="#94A3B8">
    16:9
  </text>
</svg>

The viewBox="0 0 16 9" defines the aspect ratio. The width: 100% CSS stretches the SVG to fill the container while maintaining proportions. Common aspect ratios:

Dark Mode Support

SVG placeholders can adapt to the user's color preference using CSS prefers-color-scheme:

.placeholder-svg rect {
  fill: #E2E8F0;
}

@media (prefers-color-scheme: dark) {
  .placeholder-svg rect {
    fill: #1E293B;
  }
  .placeholder-svg text {
    fill: #64748B;
  }
}

This works with inline SVG but not with data URIs in <img> tags (CSS cannot target inside an <img>).

When to Switch to Real Images

SVG placeholders are for development and prototyping. Replace them with real images before production:

1. Content CMS: If images come from a CMS, the CMS URL replaces the SVG data URI naturally.
2. Lazy loading: Add loading="lazy" to production images for performance.
3. Blurred placeholder: Use a tiny, blurred version of the real image as a background-image while the full image loads — LQIP (Low Quality Image Placeholder) technique.

Key Takeaways

• SVG placeholders load instantly, scale perfectly, and work offline — ideal for development
• Inline SVG gives CSS control; data URIs work in <img> tags
• Use viewBox for responsive placeholders that maintain aspect ratio
• Dark mode support requires inline SVG (CSS cannot target inside <img>)
• Replace SVG placeholders with real images or LQIP patterns before production

Try It Yourself

Generate placeholder images with custom sizes, colors, and text using our Placeholder Image Generator. Supports both raster and SVG output formats.

Related Guides

• Placeholder Image Guide — when and how to use dummy images
• Mockup Image Best Practices — choosing the right placeholder for your design workflow