SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场svg-brand-tint-ops

svg-brand-tint-ops

设计与创作

查看项目

更新于 10-13 17:10

技能介绍

用途

svg-brand-tint-ops 是一个用于把任意 SVG 统一到品牌配色的工作室（Studio），同时也能把位图（PNG/JPG）矢量化成可编辑、可重新着色的 SVG。它的来源是一次真实工作：把 CloudCraft 的 AWS 架构图导出调成应用托管页面所需的品牌色调，该做法可推广到任何第三方 SVG 导出（draw.io、Figma、Mermaid、Excalidraw、图标集）以及任何需要转成矢量的位图。

适用时机包括：图表/图标/标志导出颜色不对且包含大量内联 fill/stroke 值，不想手工逐个修改；希望用一套调色板得到双色调/三色调品牌效果，并同时产出明暗两种变体；有 PNG/JPG 需要干净的矢量路径（阈值、色调分离或颜色量化）；需要精确的 CSS filter 行以及 React 片段，把主题感知的着色效果烘焙进真实页面。

主要能力

Studio 左侧为手风琴式面板，右侧为可缩放、可平移/缩放的视口，并实时显示精确的 filter 行与色阶十六进制值。面板功能包括：

  • Source：加载 SVG/PNG/JPG，拖放、粘贴、示例按钮。
  • Image Trace：位图转矢量，支持黑白/阶数/彩色模式，可调细节、平滑、去杂点。
  • Tone Map：N 阶品牌色阶加预设，以及“从图像取色”。
  • Photographic：饱和度/对比度/亮度/色相/深褐色/模糊/投影。
  • Strokes & Fills：仅描边、仅填充、描边宽度/颜色。
  • Typography：为 SVG 的 <text> 选择 Google Fonts、字重、字号比例、字距。
  • Geometry：旋转/翻转/缩放，剥离固定尺寸。
  • Canvas：棋盘格/纯色/明暗背景、内边距、网格。
  • Inspect：悬停高亮任意元素及其标签/id/class/颜色。
  • Export：复制 CSS / 烘焙后的 SVG / tokens / React 片段；下载 SVG 或 PNG（1–4×）。
  • Split（顶栏）：前后对比分割线。

重新着色的原理（三色调）：三个阶段叠加，前两个是一个 SVG <filter>，第三个是 CSS。第一步 feColorMatrix type="saturate" values="0" 把源图压成灰阶；第二步 feComponentTransfer 通过 tableValues 按通道把灰阶重映射到品牌色阶（线条→墨色，中间→强调色，面色→画布色）；第三步在 CSS 上叠加 filter: url(#tonemap) saturate(1.55) 等调整。两个色阶为双色调（常显平淡），加入第三个强调色中间阶则构成有设计感的三色调。自定义色阶位置通过把色阶重采样为固定表来处理。完整推导、N 阶数学以及 sRGB 与 linearRGB 的说明见 references/tri-tone-and-trace.md。

使用方式

启动工作室：

node skills/svg-brand-tint-ops/scripts/server.mjs # → http://localhost:4322

PORT=8080 node …/server.mjs choose a port

node …/server.mjs --root ./icons serve your own folder of SVGs/PNGs

node …/server.mjs --help usage + exit codes

它会提供同级 assets/（工作室加一个通用 sample.svg）。打开 URL，把 SVG 或 PNG 拖到画布上（或使用 Source 面板的示例按钮）。

命令行矢量化（需要 sharp 解码；浏览器工具不需要）：

node skills/svg-brand-tint-ops/scripts/trace.mjs logo.png logo.svg --colors 6 node skills/svg-brand-tint-ops/scripts/trace.mjs --help # flags + exit codes

矢量化引擎（PNG → SVG）：从零编写、调优精度的引擎（assets/trace-core.mjs，工具与无头 CLI 共用）：2× 超采样 → 按 alpha 感知分割图层（阈值/色调分离/中位切分 → k-means 精化 → 合并颜色）→ 插值亚像素等值轮廓（fill-rule="evenodd" 挖洞）→ 闭合环 Douglas–Peucker → 角点分割 + Schneider 最小二乘 Bézier 拟合（把阶梯噪声抹成平滑曲线，直线段与字母转角保持锐利）→ 去杂点。在 24 个真实标志上基准测试（RMSE ≈27→11.5，边缘 F1 0.66→0.86），可近乎完美复现粗体/几何/彩色标记，小号细体文字仍可读。流程是连续的：PNG → trace → SVG → brand-tint。算法与调参见 references/tri-tone-and-trace.md §2。

烘焙进应用：内联渲染 SVG（<img> 会隔离字体、var() tokens 和文档 filter）。由于 filter 原语无法读取 CSS 变量，需用 getComputedStyle(el).getPropertyValue('--ink') 读取主题 token，并在 JS 中写入 feFunc* 的 tableValues，主题变化时重建即可免费获得明暗双重着色。剥离根部 width/height（保留 viewBox）使其可缩放。应用 filter: url(#id) saturate(…)。工作室的 Export → React snippet 会预填这些内容；完整模式与注意事项见 references/tri-tone-and-trace.md §3–4。

适用场景与限制

适用于把第三方面板/图标/标志导出统一为品牌配色、制作双色调/三色调品牌视觉并输出明暗变体、把位图转为可编辑矢量、以及需要把主题感知着色烘焙进页面。所有随附调色板（petrol、mono、blueprint 等）均为示例，可替换 PRESETS 映射为自己的 token，不与任何品牌绑定。工具零依赖、本地处理、不上传像素。命令行矢量化需要 sharp 解码，浏览器工具无需任何依赖。