静态 SVG 模式规范
本文档是静态输出模式的规范，SVG 代码直接嵌入 Markdown 文件，不包含动画效果。
模式特性
- 静态 SVG（无动画效果）
- SVG 代码直接嵌入 Markdown 文件（非图片引用）
- 公众号完美支持
- 工作流简化：无需管理外部 SVG 文件
一、平台适配
公众号支持
- SVG 原生渲染，矢量图形显示
- 完美支持 emoji、中文字体
- 无需转换为 PNG
- ⚠️ 注意：禁止使用渐变填充（
fill="url(#gradient)"），需使用纯色
⚠️ 背景色强制要求
【前置要求 - 最高优先级】
所有静态 SVG 画布 必须设置非白色背景色，禁止使用纯白 #FFFFFF 作为画布背景。
原因：
- 纯白背景导致圆角、边框等视觉元素与背景融为一体，无法区分
- 白色背景与内容对比度不足，视觉层次感差
- 无法体现设计感和专业性
<!-- ❌ 错误：纯白背景 -->
<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 渐变，请使用纯色：
<!-- ❌ 错误：渐变 -->
<linearGradient id="bg">...</linearGradient>
<rect fill="url(#bg)"/>
<!-- ✅ 正确：纯色 -->
<rect fill="#f8f9fa"/>Markdown 编辑器
- Obsidian、Typora 等测试通过
- 实时预览支持
跨平台兼容
- 快速加载：矢量图形特性
- 高分辨率：任意缩放不失真
二、成功标准
- 配图密度显著提升（8-15 张），有效增强文章视觉吸引力
- 每张配图概念聚焦准确，信息传递精准高效
- 极简风格贯穿始终，视觉干净纯粹但冲击力强
- SVG 代码成功嵌入到 Markdown 文件，实现自包含
- 公众号显示正常，SVG 渲染清晰无问题
- 工作流程显著简化，无需管理外部 SVG 文件
- 跨平台兼容性良好