Potrace 是 Peter Selinger 2003 年发布的经典开源追踪器，被 Inkscape 和 FontForge 采用。本文指出其先二值化再拟合多边形最后转 Bézier 的流程更关注轮廓保真，而非字体所需的极值点、水平垂直手柄等结构特征，因此生成结果常需人工二次清理。

img2bez 将栅格图像转换为三次贝塞尔曲线轮廓，节点严格放置在极值点、拐点和转角处，并强制水平/垂直控制柄，以符合字体设计规范。它在结构节点间拟合曲线，必要时回退 kurbo 的最优拟合，同时通过 refine 阶段微调控制柄长度，使轮廓既贴合像素又满足插值与 hinting 要求。

Raph Levien 的 kurbo 库中的曲线拟合算法被 img2bez 用作后备方案。当无法按极值点与水平/垂直切线约束拟合时，img2bez 调用其 fit_to_bezpath_opt 返回最少立方贝塞尔段。

Kurbo 是 Raph Levien 的曲线处理库，本文用作 img2bez 的备用拟合后端。当结构化点位无法满足约束时，img2bez 调用其 fit_to_bezpath_opt 获得最少段数立方 Bézier；同时 img2bez 重写了切线计算逻辑，强制在极值点处生成水平或垂直手柄。

Spiro 是 Raph Levien 开发的曲线设计系统，本文归类为曲线拟合文献的一部分。它能在已有曲线基础上平滑处理，但假设设计师已手动描边，无法从栅格像素中自动定位极值点和拐点，因此不解决本文核心的 raster-to-structured-outline 问题。

本文核心工具 img2bez 实现了一种面向字体设计的自动描边流程。它先通过 marching squares 精确提取边缘，再按极值点、拐点和直线规则放置节点，最后拟合三次贝塞尔曲线并对齐水平/垂直控制柄，从而生成可直接用于 UFO 源文件的结构化矢量轮廓，避免了传统描边工具仅重现轮廓而忽略排版结构的问题。

vtracer 是 VisionCortex 用 Rust 编写的现代通用追踪器，速度快且支持彩色输入。本文将其与 img2bez 对比：vtracer 追求像素级保真，输出密集点集而忽略字形结构，导致无法直接用于可变字体插值；img2bez 则针对字体源文件优化点位放置规则。

PDF 是 SDocs 提供的核心导出格式之一，用户完成样式定制后可直接下载为 PDF 文档。该选项位于导出面板，与 Word 和 Markdown 并列，适合需要固定排版和高质量呈现的技术文档场景。文章将其作为主要交付物展示，体现从 Markdown 到专业输出的完整路径。

打磨后的贝塞尔路径以 SVG 格式从 Figma 导出并粘贴回编辑器，更新动画库。文章中的手写动画即基于这些 SVG 路径数据实现描边效果。

本文中 SVG 被用作 favicon 格式，支持矢量且无需担心分辨率问题。通过在 SVG 文件内嵌入样式表并使用媒体查询，它能根据用户系统主题自动切换颜色。文章给出完整代码示例，展示 rect 元素在亮色和暗色模式下的 fill 值变化。该方案在多数浏览器中生效，但 Safari 存在兼容问题。

本文利用 SVG Filters 实现 spectre 怪物的隐身效果，通过 CSS 引用包含 feColorMatrix、feTurbulence 和 feDisplacementMap 的滤镜，生成黑色剪影与噪声扭曲的半透明闪烁轮廓。

SVG的元素语法为VGS提供了路径命令的灵感来源，帮助drawvg通过类似方式描述复杂的2D矢量图形路径和填充操作。

文章指出 VGS 的许多命令名称直接来自 PostScript。drawvg 滤镜通过 VGS 脚本调用这些命令，再由 Cairo 库完成光栅化渲染。这种命名方式帮助用户快速理解如何在视频帧上绘制路径、填充和描边等操作。

drawvg是FFmpeg的专用滤镜，通过执行VGS脚本在视频帧上绘制矢量图形，支持FFmpeg表达式实现坐标、颜色和时间的动态计算。文章展示了它与cropdetect结合绘制裁剪区域、制作圆形过渡及波浪位移等多场景应用。

Magick Vector Graphics为VGS语言的语法设计提供了主要参考，其命令风格和参数分隔方式影响了drawvg脚本的编写方式，使图形描述更加紧凑易用。

文中将Inkscape列为模型在无标准化工具时可能采用的SVG渲染选项之一。作者通过固定使用Chrome DevTools进行转换，避免包括Inkscape在内的不同工具对迭代结果造成干扰，从而保持实验公平性。

本文中 SVG 是模型生成的目标格式，内容为骑自行车的鹈鹕。模型通过 agentic 循环反复生成、转换查看并改进该文件，直到自行判定满意为止。所有测试模型均以此格式进行迭代实验。

文章在展望 AI 矢量生成功能时指出，当前开源模型效果一般，Adobe Illustrator 在矢量插画与图标领域仍有优势，强调产品侧需结合模型改进以减少人工处理。

SVG 是实现 Liquid Glass 的核心技术载体，文中重点使用其位移映射功能将预计算的折射向量转换为图像。文章详细说明了如何生成 feImage 与滤镜结合的 displacement map，并限制为 127 采样点以适配 8 位通道精度。

生成过程先创建对称矢量多边形作为身体，再用中线加宽法绘制触手与角。低分辨率网格会掩盖向量边缘的不完美，从而自然转为像素风格。作者选择此方法是发挥其几何与向量优势，避免过度复杂的像素算法。

最终像素以 SVG 元素形式渲染在网格上，调试模式下可看到粉色中线与各像素的 fill 颜色。作者通过 CSS 变量控制 SVG 像素的 OKLCH 颜色，支持动画时实时更新第二帧图形，也方便在不同尺寸网格下展示细节变化。

本文中 PathToPoints 是 Raphael Monnerat 开发的工具，用于将 SVG 路径坐标转换为图像地图 area 元素所需的绝对坐标点。Andy Clarke 使用它处理 Mike Worth 网站卡通地图的路径数据，解决了 image map 坐标无法直接适配 SVG 的问题。通过该工具生成的坐标可配合 JavaScript 实现响应式缩放，使点击区域更精准且易于维护。

作者提到曾用 SVG 制作更随机化的 burst 效果，并在文中提供可点击重置的演示示例，与 CSS 圆锥渐变方案形成对比。

本文中SVG主要用于实现两种视觉效果：通过和结合CSS动画制作流动的线条效果，以及用命令动态生成TOC高亮指示器的遮罩路径。所有示例均以JSX形式呈现，强调SVG的mask-image属性与动画div配合可实现精确的客户端高亮过渡。

文章详细说明了如何用 SVG 的 d 属性把 TOC 各条目的绝对坐标串联成一条折线，从而生成与服务端渲染结果完全一致的遮罩图形。作者强调 d 属性中的 M、L 命令并非随机生成，而是根据预先计算的位置精确构造。该路径随后被编码进 mask-image，实现高亮滑块的动画效果。

本文中SVG被作者作为例子提及：在使用专用设计工具处理插图和图标时效率更高，而直接用代码手写SVG虽然理论可行，但操作繁琐、耗时较多。这一点被用来支持作者的观点，即设计流程中仍需结合浏览器之外的工具来完成特定资产创建任务。

作者在文中说明会用 Illustrator 制作图标，再导出 SVG 粘贴回浏览器原型，作为前期资产创建的常用方式。它适合处理固定尺寸的插图与元素，与浏览器设计形成互补。这显示了专用设计工具在图标生产中的辅助角色。

PDF++ 是新插件类别亚军作品，由 RyotaUshio 开发。该插件为 PDF 文件增加了标注和高亮功能，作为独立插件参与本次年度宝石奖评选。

文章指出Midjourney生成的插画成果需后续处理，其中包括vector conversion，即将位图转为矢量格式以支持生产使用。该步骤与线条优化、细节增强和专业插画师润色共同构成最终输出流程。作者强调AI仅提供初期原型，vector conversion等人工环节仍是保证品牌精度的必要环节。

SVG 是从 Figma 导出的单一文件，包含所有表盘元素。作者在文本编辑器中为其添加内嵌 style 标签，通过关键帧动画实现秒针每分钟一圈、分针每小时一圈的真实运动，并控制多表盘淡入淡出过渡。

本文中，Microsoft PhotoDraw 是1995至2000年的创意软件，生命周期5年。它作为照片绘制与编辑程序，支持基础图像处理功能，出现在微软已停产创意产品系列中。该产品展示了微软在照片编辑工具上的阶段性尝试，最终随产品线调整而终止。

SVG 是 Loadership 支持的输出格式之一，适合生成矢量化的加载动画代码。用户可配置并复制 SVG 代码，在网页项目中实现可缩放且专业的加载效果。

本文选择 SVG 作为墙报输出格式，因其擅长绘制连续曲线、可任意分辨率缩放且文件体积小。生成的 SVG 支持浏览器点击放大，并被发布为可打印的海报。

本文中三次贝塞尔曲线用于表示纽结图中连续的弧边。渲染交点时并未简单截断曲线，而是叠加白色遮盖线来实现上下穿插的视觉效果。曲线粗细根据所在圆的半径变化，无法直接使用SVG描边，因此需转为填充路径。

本文指出 Illustrator 支持调整画布控点大小，用户曾将其调至较大尺寸以便录屏和操作；其角落缩放控点区域密集且形状奇特，鼠标移动易频繁切换功能区，难以精准命中；同时不支持鼠标点击位置偏移补偿，拖拽时会出现对象先跳动的现象。

viewBox被比作设计工具中的画板，定义SVG内部坐标系（如"0 0 300 400"）。它与width/height属性共同决定图形缩放行为，默认保持比例且完整显示内容。文中通过省略或设置viewBox来控制SVG是否随外部尺寸拉伸或保持固定比例。

作者在优化 Figma 导出的 swirl SVG 时使用 SVGOMG 工具清理冗余代码，但该工具无法移除 clipPath，因此需手动删除多余标签，最终仅保留 path 元素。SVGOMG 由 Jake Archibald 开发，用于精简 SVG 文件。

文章提到 Affinity Designer 提供控点大小设置选项；它会让小对象控点相互堆叠，且支持鼠标在缩放控点内点击位置的偏移补偿，避免拖拽首帧跳动；其交互热区与 Illustrator 类似，存在较多狭小区域。

该属性类似object-position，用于控制viewBox在SVG容器中的对齐方式，默认值为xMidYMid。作者将其设为xMidYMax，使symbol中的swirl始终贴合底部；仅在contain模式下生效，可模拟不同object-fit定位效果。

标注绘制的 SVG 描边在缩放时粗细不变，作者指出可通过 vector-effect: non-scaling-stroke 解决该问题，使描边宽度在画布缩放时保持视觉一致。

作者在转向字体生成前重点探索的矢量格式，指出其形状表示方式多样且复杂度高于栅格图像，最终通过类似方法迁移到字体任务。

Adobe Illustrator在空文档、2048圆形、老虎SVG测试中内存表现处于中间位置，增长线性；处理Moby Dick文本时表现正常，15份文档占用与Affinity Designer、Photoshop接近。

Affinity Designer在2048点路径测试中内存排名上升，在空文档、圆形、老虎SVG测试中处于中游；可用于将SVG转为PSD供Photoshop使用，处理大文本时表现稳定。

文章用SVG文件进行多组内存测试，包括含2048个圆形的网格、2048点单路径、约1000路径的老虎插图；这些SVG用于评估图层开销、路径数据存储效率及多文档场景下的内存增长。

在2048点测试中，文章使用包含2048个贝塞尔路径段的单一路径SVG，目的是检查各设计工具对路径数据的存储效率。

Threads 的线程连接线（swirl line）采用 SVG path 绘制，连接头像与回复内容。该路径分为三部分，首段长度通过 JavaScript 动态计算。文章指出此实现与此前评论组件的类似技术思路一致。

本文中SVG是新Obsidian图标的可保存格式之一，与PNG、ICO、ICNS并列。文章提到用户可通过自定义矢量文件调整图标颜色，因此SVG作为矢量格式适合个性化修改，体现品牌支持用户塑造工具的理念。

新图标提供可定制的矢量文件，用户可根据个人配色方案调整外观。文章鼓励下载这些文件来个性化 Obsidian 图标，体现软件高度可定制的特点。

本文说明三次贝塞尔曲线通过两个控制点提供比二次曲线更大的形状控制能力，可生成更平滑的 pill 形状。文中给出 C 命令语法 C x1 y1 x2 y2 x y，并展示其可表示任意二次曲线，同时支持 S 命令连续拼接多段曲线。

本文中SVG S命令用于连续绘制多段三次贝塞尔曲线，实现类似T命令的平滑衔接效果。其语法为S x2 y2 x y，比T命令多一对坐标来指定第二个控制点。文章用S命令绘制热气球形状，演示了如何在已有C曲线后自动反射前一控制点以保持连续性。

本文中的 SVG Path 使用 M、h、q、c、s 等命令绘制 pill 形状和热气球等图形。路径支持通过 C 命令添加额外控制点，从而克服二次曲线的限制，实现更复杂的平滑曲线。

本文讨论 SVG 路径命令用于绘制矢量图形，重点对比二次与三次贝塞尔曲线在 pill 形状等案例中的表现差异。SVG 通过路径命令实现平滑曲线，文中示例展示了从二次曲线切换到三次曲线后图形更平滑的效果。

本文指出二次贝塞尔曲线仅有一个控制点，限制了可绘制的形状，例如无法完美绘制 pill 形状。文中将其作为对比基准，说明三次曲线可通过调整控制点位置完全重现二次曲线效果。

PDF 是作者最重视的最终交付格式，通过 xelatex 与自定义 LaTeX 模板渲染，支持代码高亮与目录。封面使用 GIMP 按标准信纸尺寸设计后以 PDF 形式嵌入。作者指出 PDF 渲染较慢，但排版质量最高，适合打印与正式发布。

本文正式介绍 C 命令语法 C x1 y1 x2 y2 x y，用于绘制三次贝塞尔曲线，比二次曲线的 Q 命令多一对坐标。示例 M5 13 C0 5 20 5 15 13 展示了其用法，并指出可通过 S 命令连续使用以绘制热气球等图形。

文章指出二次贝塞尔曲线可通过T命令连续绘制多段，实现控制点自动反射的平滑连接。T命令的用法被作为对比引入，用来说明三次贝塞尔曲线对应的S命令在语法上多一对控制点坐标。文中强调S与T的相似机制，但未提供T的具体示例代码。

本文强调三次贝塞尔曲线比二次曲线多一个控制点，因此能更精细调整曲线弧度。文中特别说明两个控制点重合时不一定与二次曲线重合，需在沙盒中实际移动控制点进行对齐验证。

微软目前仍重度依赖Adobe Illustrator，与XD、Photoshop共同构成其设计工具组合。Xamarin团队早期成员熟悉Illustrator，接触Figma后才转向浏览器协作模式。文章强调Figma尚未完全取代Adobe的传统设计软件。

文章提及Adobe通过PDF开创电子文档类别，将其作为公司长期以来的重要创新里程碑之一。PDF与Photoshop、Experience Cloud共同构成Adobe改变数字体验的历史背景，与收购Figma推动网页协作的举措相互呼应。

文章列出菜单栏额外资源的三种文件格式，其中 SVG 可作为单一文件提交，无需额外提供多倍率版本。它适合静态图标；若需显示时间或日期等动态内容，则建议改用代码绘制而非静态 SVG。

本文指出组织应确保在Adobe Illustrator中创建的图表与Datawrapper等工具生成的图表颜色保持一致，以实现跨工具的视觉统一。文章强调这有助于非设计师也能快速制作符合品牌风格的可视化，减少颜色决策时间。

本文指出 macOS 菜单栏额外项的图像资源可采用单个 PDF 文件格式。该格式能直接提供矢量支持，适用于菜单栏图标的显示需求。

本文指出 COLRv1 的图形表现力大致相当于 SVG Native，并在此基础上增加了混合与合成能力，支持实色、线性渐变、径向渐变和 sweep/conic 渐变四种填充方式，以及完整的变换操作。

Affinity Designer 与 Sketch 类似，在旋转测试中大量使用多核 CPU，几乎不占用 GPU。文章显示其在 M1 Pro 上能有效调用所有性能核心，适合依赖 CPU 的设计工作流程。

Illustrator 的 CPU 与 GPU 使用情况与 XD 接近，测试中未占满硬件资源，画布帧率仍很低。文章特别提到其处理数千个投影对象时会出现进度条，性能明显弱于其他工具，而无投影时处理大量对象则相对流畅。

Graphite是一款结合图形设计工具的建站平台，支持响应式网格、绝对与自动布局切换，以及自定义预设和动画。用户可从模板或空白开始设计，一键发布，目前早期阶段免费。文章将其归入Site Builders，强调熟悉设计界面的像素级精准控制。

文章将 Figma 与包括 Adobe Illustrator 在内的传统矢量工具进行对比。Illustrator 的 Pathfinder 面板同样支持布尔运算，但 Figma 的操作是非破坏性的，布尔组合仍可随时编辑并导出为单一形状层。

团队在 Figma 中完成图标设计后，可直接导出简单可用的 SVG 文件。布尔运算生成的复合形状和描边路径组合均能以单一形状层形式导出，避免了手动描边轮廓的繁琐步骤。

Figma 的布尔运算支持合并、减去、交集等操作，且结果为非破坏性布尔组，保持各原始形状完全可编辑。用户可将形状与描边路径混合使用，导出时仍为单一矢量层，这成为团队迁移的重要原因之一。