mcpField
S
svg-precision

svg-precision

github.com/dkyazzentwatwa设计与 UI124188 次安装29 周前更新
代码仓库

关于 svg-precision

svg-precision 是一项根据 JSON 场景规范生成 SVG 的技能，并可验证文件及选择性渲染 PNG 预览。它适用于需要明确构建 SVG 并检查输出的工作流。

主要功能

  1. 01根据 JSON 场景规范构建 SVG
  2. 02验证生成的 SVG 文件
  3. 03渲染 PNG 预览
  4. 04比较渲染后的图像
  5. 05提供模板和布局配方

适用场景

  1. 01创建图标、图表或 UI 模型
  2. 02检查 SVG 输出的结构问题
  3. 03将 SVG 渲染为 PNG 预览

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/dkyazzentwatwa/chatgpt-skills --skill svg-precision

安装后在 Claude Code 中输入/svg-precision确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
recipes.md
spec.md
scripts/
requirements.txt
self_test.py
svg_cli.py
scripts/examples/
bar_chart.json
diagram.json
icon_check.json
technical_dim.json
ui_card.json
scripts/svg_skill/
__init__.py
core.py
render.py
validate.py

详细介绍

svg-precision

根据严格的 JSON 规范（场景图）生成结构正确的 SVG，然后进行验证，并可选择渲染 PNG 预览。

快速开始

  1. 将用户请求转换为 Spec JSON（使用 references/spec.md 中的模板）。
  2. 构建 SVG：
    • python scripts/svg_cli.py build spec.json out.svg
  3. 验证：
    • python scripts/svg_cli.py validate out.svg
  4. （可选）渲染 PNG 预览（需要 CairoSVG）：
    • python scripts/svg_cli.py render out.svg out.png --scale 2

规范设计规则（确保准确性）

  • 始终设置 canvas.viewBox 和明确的 canvas.width/canvas.height。
  • 优先使用绝对坐标；仅在能降低复杂度时使用变换。
  • 使用合理的数值：不得包含 NaN/inf；四舍五入到 3-4 位小数。
  • 将可复用项放入 defs（标记、渐变、clipPaths），并通过 id 引用。
  • 为确保在不同查看器中呈现结果一致，除非必需，否则避免使用复杂滤镜。
  • 文本在不同字体和查看器中的呈现可能不同。如果需要像素级一致的结果，应将文本视为风险因素，并优先使用形状。

使用捆绑的脚本

CLI
  • python scripts/svg_cli.py build <spec.json> <out.svg>
  • python scripts/svg_cli.py validate <svg>
  • python scripts/svg_cli.py render <svg> <out.png> [--scale N]
  • python scripts/svg_cli.py diff <a.svg> <b.svg> <diff.png> [--scale N]（渲染并进行图像差异比较）
作为库使用（Python 中）
from svg_skill import build_svg, validate_svg
svg_text = build_svg(spec_dict)
report = validate_svg(svg_text)

请求含糊不清时

  1. 确定 SVG 的类型：图标 / 图表 / 示意图 / UI / 技术图。
  2. 从 references/spec.md 中选择一个模板，并填入具体数值。
  3. 如果尺寸未知，请选择符合用途的默认值：
    • 图标：24x24 或 32x32
    • UI 模拟图：1440x900 或 390x844（移动端）
    • 图表：800x450
    • 示意图：1200x800
    • 技术图纸：指定单位（mm/in）和比例

参考资料

  • references/spec.md - SVG 类型对应的架构和可直接复制的模板
  • references/recipes.md - 可稳定呈现的布局和样式模式

评论

支持 Markdown