# 静态 SVG 模式规范

本文档是静态输出模式的规范，**SVG 代码直接嵌入 Markdown 文件**，不包含动画效果。

## 模式特性

- 静态 SVG（无动画效果）
- **SVG 代码直接嵌入 Markdown 文件**（非图片引用）
- 公众号完美支持
- 工作流简化：无需管理外部 SVG 文件

---

## 一、平台适配

### 公众号支持

- SVG 原生渲染，矢量图形显示
- 完美支持 emoji、中文字体
- 无需转换为 PNG
- ⚠️ **注意**：禁止使用渐变填充（`fill="url(#gradient)"`），需使用纯色

### ⚠️ 背景色强制要求

**【前置要求 - 最高优先级】**

所有静态 SVG 画布 **必须设置非白色背景色**，禁止使用纯白 `#FFFFFF` 作为画布背景。

**原因**：
1. 纯白背景导致圆角、边框等视觉元素与背景融为一体，无法区分
2. 白色背景与内容对比度不足，视觉层次感差
3. 无法体现设计感和专业性

```svg
<!-- ❌ 错误：纯白背景 -->
<svg viewBox="0 0 800 450">
  <rect x="60" y="60" width="680" height="330" rx="12" fill="#FFFFFF"/>
</svg>

<!-- ✅ 正确：浅色背景 -->
<svg viewBox="0 0 800 450">
  <rect x="0" y="0" width="800" height="450" fill="#F0F4F8"/>
  <!-- 圆角框元素 -->
  <rect x="60" y="60" width="680" height="330" rx="12" fill="rgba(255,255,255,0.8)" stroke="#D0D8E0"/>
</svg>
```

**同一篇文章内的每张配图按序号轮流使用不同背景色**。背景色从以下色库选择：
- `#F5F5F5` `#F8F9FA` `#FAF8F5` `#FAF0E6` `#F0F4F8`
- `#E8F5E8` `#FFF0F5` `#F3E8F8` `#E0F0F8` `#FFFBE6`

### ⚠️ 兼容性警告

公众号 WebView 不支持 SVG 渐变，请使用纯色：

```svg
<!-- ❌ 错误：渐变 -->
<linearGradient id="bg">...</linearGradient>
<rect fill="url(#bg)"/>

<!-- ✅ 正确：纯色 -->
<rect fill="#f8f9fa"/>
```

### Markdown 编辑器

- Obsidian、Typora 等测试通过
- 实时预览支持

### 跨平台兼容

- 快速加载：矢量图形特性
- 高分辨率：任意缩放不失真

---

## 二、成功标准

- 配图密度显著提升（8-15 张），有效增强文章视觉吸引力
- 每张配图概念聚焦准确，信息传递精准高效
- 极简风格贯穿始终，视觉干净纯粹但冲击力强
- SVG 代码成功嵌入到 Markdown 文件，实现自包含
- 公众号显示正常，SVG 渲染清晰无问题
- 工作流程显著简化，无需管理外部 SVG 文件
- 跨平台兼容性良好