H5移动端节日贺卡SVG背景应以轻量、适配、可交互为核心：用viewBox+百分比坐标实现自动缩放，defs+use复用元素减体积，CSS媒体查询与prefers-reduced-motion做动效降级，SVG内联HTML并精简优化。
在 H5 页面中用 SVG 绘制移动端节日贺卡背景元素，核心是“轻量、适配、可交互”，不依赖图片资源，又能随屏幕缩放保持清晰。重点不是画得多复杂，而是用好 viewBox、响应式单位和 CSS 配合，让雪花、灯笼、彩带等节日元素自然融入手机屏幕。
用 viewBox + 百分比坐标实现自动缩放
SVG 在移动端最怕写死像素值。正确做法是：设置 viewBox="0 0 100 100"（或按设计稿比例定），所有图形坐标和尺寸都用相对值（0–100 范围内）。再通过 CSS 控制 SVG 宽度为 100% 或 100vw，高度设为 auto 或 aspect-ratio: 1/1。
- 例如画一个居中圆形灯笼：
<circle cx="50" cy="50" r="12" fill="#e74c3c"/>，无论容器多宽，它始终在画面中央占约 1/4 宽度 - 文字类祝福语用
<text x="50" y="30" text-anchor="middle" font-size="8">新年快乐</text>，font-size 也用相对值，配合 CSS 的svg { font-size: 4px; }统一缩放
用 defs + use 复用节日元素，减少代码体积
移动端加载敏感，避免重复写多个灯笼、雪花或烟花路径。把常用图形定义在 <defs> 里，再用 <use> 引用，并通过 x、y、transform 精确摆放。
- 比如定义一个雪花符号：
<defs><g id="snow"><path d="M0-4L1-1 4 0 1 1 0 4 -1 1 -4 0 -1-1 0-4"/></g></defs> - 然后在不同位置插入：
<use href="#snow" x="20" y="15" fill="#fff" opacity="0.8"/>，再配合 JS 随机生成 20 个，就能做出飘雪效果
结合 CSS @media 和 prefers-reduced-motion 做体验降级
节日动效（如旋转灯笼、浮动气球）在低端机上容易掉帧。用 CSS 媒体查询判断设备能力，或监听系统“减少动画”偏好：
- 默认开启微动效：
svg .lantern { animation: float 4s ease-in-out infinite; } - 加一层保护：
@media (prefers-reduced-motion: reduce) { svg .lantern { animation: none; transform: translateY(0); } } - 对 iOS Safari 等老版本，可用
@supports not (animation: float 1s) { ... }回退为静态样式
导出时精简 SVG，嵌入 HTML 避免额外请求
别把 SVG 存成独立文件再 <img src="xxx.svg"> —— 这样无法用 CSS 控制颜色、无法绑定事件、也不支持内联动画。正确方式是把优化后的 SVG 代码直接写进 HTML（或用 JS 注入）。
- 用工具如 SVGOMG 删除注释、冗余属性、编辑器元数据
- 把 fill="#ff6b6b" 改成 fill="currentColor"，方便后续用 CSS 的 color 属性统一换主题色（比如春节红 → 元宵节紫）
- 需要点击互动的元素（如可点亮的灯笼），加上
cursor: pointer和onclick或事件委托，无需额外包裹 div
