SVG 占位图：生成可自定义的占位符

什么是 SVG 占位图？

SVG 占位图是一种轻量级矢量图像，用作真实图像加载时的临时视觉元素、无图像可用时的默认后备，或作为刻意简单的设计元素。SVG（可缩放矢量图形）占位图优于光栅占位图，因为它们可以在任何尺寸下完美缩放，并且通常只有几百字节。

为什么使用 SVG 占位图？

图像加载性能

大图像会减慢页面加载速度。以下技术可改善感知性能：

LQIP（低质量图像占位符）：在完整版本加载时，显示实际图像的一个微小模糊版本。创造流畅的加载体验。

骨架屏：在内容到达之前，使用灰色占位形状显示布局结构。被 Facebook、LinkedIn 和 YouTube 广泛使用。

主色：从图像中提取最突出的颜色，并将其用作纯色占位符，创造视觉连续性。

开发与测试

在真实内容存在之前构建 UI 时，SVG 占位图：

• 无需真实图像即可显示图像尺寸
• 在占位图内以文本形式显示尺寸、文件类型或 ID
• 在开发环境中使用一致的视觉语言

错误状态

当图像加载失败时，显示有意义的占位图而不是损坏的图像图标：

<img src="photo.jpg" 
     onerror="this.src='placeholder.svg'"
     alt="用户照片" />

SVG 占位图格式

纯色带文本

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300">
  <rect width="100%" height="100%" fill="#CCCCCC"/>
  <text x="50%" y="50%" text-anchor="middle" dy=".35em" 
        font-family="sans-serif" fill="#666">400x300</text>
</svg>

渐变背景

更具视觉吸引力的占位图，暗示深度和纹理，而无需增加额外重量。

基于图标

常见的占位图模式包括用于头像占位图的人物剪影、用于照片占位图的风景图标以及用于文件类型指示符的文档图标。

模糊哈希

基于 WASM 的技术，编码图像的微小感知哈希。该哈希可以渲染为模糊占位图，与最终图像的颜色调色板匹配。

在 CSS 中使用 SVG 占位图

背景图像

.product-image {
  background-image: url("data:image/svg+xml,...");
  background-size: cover;
  width: 300px;
  height: 200px;
}

使用 IntersectionObserver 的懒加载

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));

宽高比保留

图像占位图的一个关键挑战是防止布局偏移（CLS — 累积布局偏移）。SVG viewBox 属性和 CSS padding-bottom 技巧都能解决这个问题：

/* 宽高比占位图 (16:9) */
.image-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 9/16 = 0.5625 */
  overflow: hidden;
}
.image-wrapper img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

常用占位图服务

有几个在线服务可以按需生成占位图：

• placeholder.com: https://via.placeholder.com/400x300
• placehold.co: https://placehold.co/400x300
• picsum.photos: https://picsum.photos/400/300（随机真实照片）
• dummyimage.com: 可自定义尺寸、颜色和文本

使用 SVG 占位图生成器

我们的工具：

1. 设置尺寸 — 宽度和高度（像素）
2. 选择背景颜色 — 纯色或渐变选项
3. 添加文本 — 尺寸标签、自定义消息或留空
4. 选择样式 — 纯色、点状、条纹或基于图标
5. 获取 SVG 代码 — 复制原始 SVG 以嵌入
6. 获取数据 URL — 复制为 base64 数据 URL 用于 CSS/HTML

生成的占位图体积小且即时渲染，非常适合开发环境和生产环境的后备状态。