zengtianli /html-fig · HTML/SVG 所见即所得作图法
核心理念（铁律 #21）：作图默认走这套，不默认手搓 matplotlib 反复跑。 所见即所得：HTML 渲染 SVG，调样式即时可见、可多变体并排比；用户拍板后再导出实际文件。 必导出多格式：SVG（矢量·投稿）+ PNG（高清·粘贴）+ PDF，落交付目录；HTML 带下载+复制按钮。 不止屏幕展示：渲染完必落文件，"多导出"是默认，不是等用户问"你导出什么了"。
5 步流程
- 取数据（铁律 #20：先用现成）。从现成生成器/CSV/SSOT 拿数据 + 顺序 + 分组，dump 成 JSON。不重造数据管线。
- HTML 多样式预览。自包含 HTML（自带配色插值，无 CDN），同一份数据并排渲染 N 种样式变体（配色/版面/标注/分组序）。
open给用户。每变体配一句审美说明 + 推荐项。 - 用户批准（铁律 #8/#21）。用户选编号 / 提修改（"B 的配色 + E 的下三角"）。改样式 = 改 HTML 参数，即时重渲染再确认。未批准不落地。
- 导出多格式。Python 生成最终 SVG（移植预览 render 逻辑）→
rsvg-convert -z 3 x.svg -o x.png（高清 PNG）+rsvg-convert -f pdf x.svg -o x.pdf（矢量 PDF）。多尺度/多图全导。 - 可复制 HTML。出一页内嵌成品图 + 每图 下载 SVG / 下载 PNG / 复制图片 按钮（
XMLSerializer+ canvastoBlob+navigator.clipboard.write）。用户可直接粘进 Word/PPT。
复用库 lib/htmlfig.py
import sys; sys.path.insert(0, '<this skill>/lib')
from htmlfig import RAMPS, mako, ramp, textcolor, export_svg, download_page
# RAMPS: 预置 mako / rdylbu_r / rdbu_r / mako_r / sunset 等(自带插值,无 seaborn 依赖)
# export_svg(svg_str, '/path/out/fig_3m') -> 写 .svg + rsvg-convert .png/.pdf, 返回三路径
# download_page({'3m':svg3,'6m':svg6,...}, '/path/out/figs.html', title=...) -> 下载/复制 HTML
为什么不用 matplotlib（默认）
- 调样式慢：每次改要重跑脚本看 PNG；HTML 即时可见、可并排比变体。
- 某些版面 matplotlib 做不到：如
sns.heatmap无法在分组间留间隙（"色块盖掉"），SVG 一行搞定。 - 投稿要矢量：SVG 原生矢量，
rsvg-convert直转 PDF，字体可编辑（svg.fonttype=none）。 - 例外：已有现成 matplotlib 生成器且能产出目标样式 → 走铁律 #20 改它的 config，别为用 HTML 而推翻现成代码。
反模式
- HTML 渲染完只截图/只展示，不导文件（违 #21）。
- 只出单一格式 / 等用户追问才补导。
- 用户给旧图截图，照像素手搓复刻，而不先找产它的代码（违 #20）。
- 预览用了 CDN（断网即废）—— 配色/渲染必自包含。
- 未经批准直接落地最终样式（违 #8）。
实战参考
zdys 降雨论文相关热图 F1：~/Archives/scatter/zdys/deliverables/学术/期刊论文/data_process/fig_correlation_23-25.py
（Python 生 SVG → rsvg-convert 多格式 → correlation_heatmaps_F1.html 下载/复制）。