第 5 次课 · 看得见的显式计算：矢量图形编辑与邮票创作（10.20/10.21）

上次课从编码的角度认识了 SVG：图形可以用「图元 + 参数」描述成一段文本，再由渲染器实时算坐标画出来。这次课把 SVG 当成可编辑的对象，先改文本里的图元、布尔运算和变换规则，再在 PowerPoint 里用形状、合并形状、编辑顶点完成一幅矢量作品，最后导出 SVG，看看可视化操作在底层变成了什么样的路径和贝塞尔曲线。

一句话概括：矢量图形编辑改的是图元、参数和几何规则，不碰像素。

📺 课程视频

课堂录像可在 Bilibili 观看。

📄 课件

课堂练习素材

课堂练习和作业要用的文件都放在这里。任务素材.pptx 里既有练习 2 的几段 SVG 代码，也有作业素材 邮票.wmf：Windows 下可以直接插入，Mac 下建议使用已经打散好的图形。

课件里的练习按顺序做，改的都是同一套 SVG 文本；改完再到 PPT 里完成矢量创作。下面的 SVG 图片都默认展开源码，可以收起，也可以直接复制。

练习 1 · 新增一个矩形图元

先看最基础的圆。circle.svg 里只有一条 <circle> 指令，cx、cy、r 决定圆的位置和大小，fill、stroke、stroke-width 决定填充和轮廓。

练习任务是在原有绘图描述里新增一个矩形图元。渲染器按照代码书写的先后顺序绘制：先画圆，再画矩形，后画的矩形会盖住圆的一部分。

这里没有单独的「图层」按钮，书写顺序就是绘制顺序，也就是图层顺序。把矩形写到圆前面，圆就会盖住矩形。

练习 2 · 布尔差集与旋转

矢量图形编辑不操作像素，只新增或修改图元规则与参数。练习 2 要对圆和矩形做布尔差集（圆减去矩形，挖掉一块），再把得到的新图形整体逆时针旋转 45°，做出缺口扇形。

mask 用一张「遮罩图」控制画面哪些区域可见：白色区域保留，黑色区域透明。把白色矩形铺满画布，再用黑色矩形盖住要挖掉的部分，就能实现「圆减去矩形」。

<g> 分组标签把内部多个图形打包成一个整体，再统一施加变换规则。rotate(-45,100,100) 表示绕 (100,100) 旋转 -45°，在屏幕坐标里就是逆时针旋转 45°。

补充 · 分组与多图元组合

draw-group.svg 在圆和矩形之外又加了一个蓝色三角形，并用 <g id="myGroup"> 把矩形和三角形包在一起。分组之后，可以对这个整体统一做移动、旋转、缩放，也可以先组合再取消组合，单独提取里面的图元。

练习 3 · 从 PPT 导出 SVG，看看底层文本

在 PPT 里画一个圆，另存为 圆.svg，再用记事本打开。记事本没有图形渲染引擎，不能执行绘图规则，只能显示 SVG 的编码文本。

会看到一个现象：PPT 导出的 SVG 里通常没有 <circle> 标签，圆的轮廓被统一转换成了 <path>，用四段三阶贝塞尔曲线拼出来。

M 是 Move 画笔指令，定位绘制起点；C 是三阶贝塞尔曲线的标识（Cubic）；Z 是轮廓闭合标记。四段曲线首尾依次衔接，最后闭合，就拟合出了一个圆。

矢量图形编辑的三层抽象层级：

认识贝塞尔曲线

贝塞尔曲线是一种用控制点定义平滑曲线的数学方法，由法国工程师皮埃尔·贝塞尔发明。它的核心特点：

• 用少量控制点就能精确描述复杂平滑的形状；
• 控制点像磁铁，把曲线「拉」在控制点围成的区域里；
• 可无限缩放而不失真。

一阶贝塞尔曲线没有独立控制点，画笔从起点直接画到终点，得到的是一条直线。

二阶贝塞尔曲线有 1 个起点 \(P_0\)、1 个终点 \(P_2\)、1 个控制点 \(P_1\)。设 \(t\) 表示画笔从起点到终点的绘制进度：

1. 在 \(P_0P_1\) 线段上按比例 \(t\) 取点 \(Q_0\)；
2. 在 \(P_1P_2\) 线段上按同样比例 \(t\) 取点 \(Q_1\)；
3. 在 \(Q_0Q_1\) 连线上再按比例 \(t\) 取点 \(B\)。

所有 \(t\) 对应的 \(B\) 点连起来，就是二阶贝塞尔曲线。控制点 \(P_1\) 牵引整条曲线的走向，曲线永远不会穿过 \(P_1\)。

三阶贝塞尔曲线由 4 个坐标点定义：

• 起点 \(P_0\)：曲线的起始位置；
• 终点 \(P_3\)：曲线的结束位置；
• 两个控制点 \(P_1/P_2\)：不落在曲线上，只用来控制弯曲方向和弧度。

它的取点逻辑是二阶的延伸：先在 \(P_0P_1\)、\(P_1P_2\)、\(P_2P_3\) 三条线段上按比例 \(t\) 取点，得到 \(Q_0\)、\(Q_1\)、\(Q_2\)；再在 \(Q_0Q_1\)、\(Q_1Q_2\) 上取点，得到 \(R_0\)、\(R_1\)；最后在 \(R_0R_1\) 上取点，得到曲线上的 \(B\)。用公式写就是：

二阶贝塞尔曲线的公式是：

修改起点、终点或控制点的坐标，曲线形状随之改变。直线、多边形、平滑曲线轮廓，都可以通过多段贝塞尔曲线拼接实现。三阶贝塞尔在曲线形态丰富度和人工直观操控性之间取得了比较好的平衡，所以 PPT、SVG 里的曲线轮廓大量使用三阶形式。

📝 作业 3 · 由一张邮票引发的艺术创作

这次作业用 PowerPoint 的绘图工具完成一幅矢量图形作品，主题自定，但要求主要使用作业素材 邮票.wmf 中提供的图形元素。通过形状合成、布尔运算、编辑顶点（贝塞尔曲线）、缩放、旋转、填充纯色、轮廓设置、图层排版、图形组合等功能构建复杂图形，在可视化编辑中体会：修改图形，本质上就是修改图元的参数。

提交内容

提交一个压缩包，文件名为 学号-邮票艺术.zip，里面包含 2 个文件：

作品展示页由 5 部分组成：

1. 矢量素材文件；
2. 选定的主题；
3. 创作的成品；
4. 作品说明文字：选题、关键编辑、特点等；
5. 必要的素材应用指示连线。

成品通过「图片另存为」导出为 邮票艺术-主题.svg。导出的 SVG 打开后，图形仍然可以取消组合、提取图元，说明它保存的仍然是矢量逻辑编码。

评分标准（共 10 分）

作业规范与导出风险

• 明确禁止：用图片、纹理作为填充；图案填充导出也有风险。
• 作业要的是「用形状和曲线重新画出来」，不是把一张位图塞进 PPT 再导出。
• 导出前先检查：取消组合后还能不能看到独立的图元；缩放后轮廓是否仍然清晰；有没有意外的位图混进来。

创作参考

下图是课堂参考图，用来观察如何把卡通形象拆成基本形状，再用形状和贝塞尔曲线重新组合。它本身是位图，只用于观察和拆解，不能直接作为作业里的图片或纹理填充。

图源：小红书号 94146121993，勇敢小羊原图合集 - 叫我十一好啦。

🎬 课堂回放

完整课堂实录，可选择任意课堂观看。

2-1 课堂（周二 第一大节 · 自强楼 5312）：

若在线播放卡顿，可点此直接下载录像。

3-1 课堂（周三 第一大节 · 自强楼 5312）：

若在线播放卡顿，可点此直接下载录像。

3-3 课堂（周三 第三大节 · 自强楼 5310）：

若在线播放卡顿，可点此直接下载录像。

🗂️ 课程内容摘要

这节课把 SVG 从「能读」推进到「能改」。课上先回顾逻辑型数字化，接着看 SVG 的两层编码和标记语言。后面大半时间都在动手：改图元、做布尔运算、分组旋转，再导出看底层的 path。贝塞尔曲线放在最后讲，作业是邮票创作。

第 0 部分 · 回顾：逻辑型数字化与编码

逻辑型数字化，是通过人为定义的编码规则，把人类创造的有限抽象符号唯一、无歧义地映射为 0/1 比特串。核心动作是编码。

不同类型的信息要用不同的编码方案，原因有两层：

• 内因：信息本身的结构特征不同。数值靠进位计数制生成等价的二进制表示；文本先确定字符集，再把字符的唯一标识映射成比特串；图形则采用「图元 + 参数」，通过几何方程绘制具体形状。
• 外因：编码具备工程性，要适配应用场景的需求，比如硬件复用、存储和传输效率、标准化、表示精度。同一种信息也可以有多种编码方案。

上次课讲的数值、文本和图形编码，正好能说明「外因」怎么起作用。补码能成为整数编码，是因为减法可以改写成加法，电路不用再做一套。Unicode 有 UTF-8、UTF-16 等多种实现，日常选 UTF-8 主要是看中存储和传输效率：英文占 1 字节，常用中文占 3 字节。浮点数另立一套规则，为的是表示极大极小的数，同时保住精度。同一种信息往往有好几种编码方案，最后留下来的，通常是最贴合使用场景的那个。

第 1 部分 · SVG 的两层编码

SVG（Scalable Vector Graphics，可缩放矢量图形）是一套用文本描述图形生成规则的标记语言，属于逻辑型编码。它记录的是图元 + 参数，渲染器（浏览器、PPT 等软件）读取这套描述，实时渲染绘制出图形。

SVG 存在两层编码：

图形规则编码（业务语义） → UTF-8 编码（存储层面的字符编码）
绘图描述文本（图元 + 参数） → UTF-8 文本编码 → 二进制 0/1

所以 SVG 既可以用记事本直接打开看文本代码，也可以被渲染器按绘图描述画成图形。

选 SVG 来做实践，理由很实际。SVG 用两层编码：记事本读到的是业务规则，浏览器和 PPT 的渲染器则把它画成图。Adobe Illustrator 的 .ai 文件经过压缩，说明书打不开，不适合拿到课堂上用。再加上 SVG 跨平台，学完在哪儿都能用。

SVG 这个词其实指两样东西。它是一套编码方案，用标记语言描述；也是一个文件格式，后缀就是 .svg。文件里装的是绘图说明书，同一份说明书只会画出一张图。

第 2 部分 · 标记语言：图元、基本参数与样式属性

标记语言使用标签来描述内容「是什么、有什么属性」，通常成对出现，用来描述指令的有效范围。标记语言本身不执行绘制操作，只用纯文本做结构化描述。常见的标记语言有 HTML、XML，SVG 基于 XML 规范，用来记录图形的描述信息。

以 circle 图元为例：

• 图元基本参数：cx="100"、cy="100"、r="80"，决定圆心位置和半径，是几何形状本身。
• 样式属性参数：fill="red"、stroke="black"、stroke-width="2"，决定填充色、轮廓色和轮廓宽度，是外观。

两个小问题：

• 删掉 r="80"，渲染器还能画出这个圆吗？不能。半径缺失，几何规则不完整，画布还在，圆却没了。
• 删掉 fill="red"，还能画吗？能。填充属性缺失时用默认值，圆会变成黑色。

基本参数决定「画什么形状」，样式属性决定「长什么样」。

标签的名字是大家商量出来的。W3C 这类标准组织把画圆的标签定成 circle，把矩形定成 rect，换个名字渲染器就不认。xmlns 是命名空间，作用也是让各家软件遵守同一套约定。<svg width="..." height="..."> 先开出一块画布，图元都画在上面，</svg> 表示结束。<circle .../> 这种自闭合标签，一句话就把指令的范围说完了。

课堂上双击 .svg，默认会用浏览器打开，因为浏览器自带渲染器。要改文本就得请出记事本，打开时把文件类型从「文本文档（.txt）」改成「所有文件（.*）」，不然列表里根本看不到 .svg。记事本能读说明书，但不能执行它。

课上还当场试过把参数改错。有人把半径改得比画布大，圆心 100、半径 180，圆铺满整块画布，乍一看像个方形。形状是渲染器按参数算出来的，参数一改，结果可能就认不出来了。

保存后回到浏览器刷新，改动才会生效。PPT 里已经插入的图片不会自动更新，得删掉重插。把浏览器页面放大或缩小，图形边缘始终清楚，因为渲染器是按当前比例重新算坐标，不是把一张图拉大。

第 3 部分 · 练习 1：新增图元与绘制顺序

矢量图形记录图元的几何生成规则与参数，渲染器根据参数实时计算坐标生成画面。矢量图形编辑不操作像素，只新增或修改图元规则与参数，修改的是绘图描述文本。

练习 1 在圆的描述后面新增一个矩形图元。渲染器按代码书写顺序依次绘制圆、矩形，后绘制的图形覆盖前面的图形。SVG 没有单独的图层顺序，书写顺序就是图层顺序。

这张图在课堂上也用 PPT 重画了一遍。插入椭圆时按住 Shift 才是正圆，填充红色，轮廓加粗；矩形用取色器吸一个绿色，轮廓改成黄色。两个形状叠在一起才看得出前后，用「上移一层」「下移一层」就能换。想验证文本顺序的作用，可以把 <rect> 整段剪下来粘到 <circle> 前面，保存后重新插入，遮挡关系立刻反过来。图形界面是所见即所得，但每一步操作最后都会被翻译成 SVG 里的图元顺序。

第 4 部分 · 练习 2：布尔运算、分组与变换

练习 2 对圆和矩形做布尔差集，再整体逆时针旋转 45°，得到缺口扇形。它的代码不在课件里，要去 任务素材.pptx 里复制。粘进记事本后另存为 test.svg，保存类型记得选「所有文件」，文件名末尾用英文句点。存完双击，就能看到缺口扇形。

• mask 实现差集：白色区域保留画面，黑色区域透明。用白色矩形铺满画布，再用黑色矩形盖住要挖掉的部分，圆上对应的区域就被挖空。
• <g> 实现分组：把内部多个图形打包成一个整体，统一施加变换规则。
• transform="rotate(-45,100,100)" 实现旋转：绕 (100,100) 旋转 -45°，在屏幕坐标里就是逆时针 45°。

练习 2 的拓展用 clip-path 做相交：裁剪区域是一块矩形，只保留圆落在矩形内部的部分。它和 mask 的差集效果相反，一个保留重叠区，一个挖掉重叠区。

打开这个文件，结构有点像程序。<defs> 里预先定义规则，这段不会直接画出来，后面才是画图的指令。mask 的白色矩形和画布一样大，表示整块画布都可见；黑色矩形正好盖住要挖掉的区域，圆上那一块就透明了。Photoshop 的蒙版也是这个思路，白留黑遮，做海报时常用。

在 PPT 里做同一个差集，顺序有讲究。先选圆，按住 Shift 再选矩形，然后【合并形状 → 剪除】。先选的圆是被减的主体；要是先选矩形，结果就反过来。

两个结果看起来差不多，底层编码并不一样。mask 方案保留了基础图元 circle，只是遮住一块，缺口那段弧没有描边。PPT 剪除后重新生成了轮廓，导出时变成 path，缺口有完整描边。同一种视觉效果可以有不同的编码方案。作业里轮廓改动多，用真实路径更省事，不必为每个缺口单独设计裁剪规则。

第 5 部分 · 练习 3：PPT 导出 SVG 与 path

在 PPT 里画一个圆，另存为 SVG，再用记事本打开。记事本没有图形渲染引擎，无法执行绘图规则，只能展示 SVG 的编码文本。

PPT 导出 SVG 时，会统一转换成通用的三阶贝塞尔曲线 path 来描述圆形轮廓，不再使用 circle 这种高阶图元标签。path 里的关键指令：

• M：Move，定位绘制起点；
• C：Cubic，三阶贝塞尔曲线；
• Z：闭合轮廓。

一条三阶贝塞尔曲线由 4 个坐标点定义：起点、终点和两个控制点。控制点不在曲线上，只控制弯曲方向和弧度。四段三阶贝塞尔曲线首尾衔接，最后用 Z 闭合，就能拟合出一个圆。

记事本打开的 SVG 会按窗口宽度自动换行，看起来挤成一团。可以在 <defs>、<path> 前面手动回车，预定义区和画图区分开，读起来就顺了。读不懂某段路径，丢给 AI 让它解释也行。

从 PPT 导出时，保存类型里写的是「可缩放向量图形」，不是「SVG」。文件名已经带 .svg 就不要再选一次，否则会得到 test1.svg.svg。中文输入法下补扩展名，还容易把英文句点打成中文句号，文件就打不开了。

第 6 部分 · 贝塞尔曲线：用控制点描述平滑曲线

贝塞尔曲线用控制点定义平滑曲线。它的特点是：少量控制点就能精确描述复杂形状；控制点像磁铁，把曲线拉在包围区域里；可无限缩放而不失真。

• 一阶：没有独立控制点，从起点到终点画一条直线。
• 二阶：1 个起点、1 个终点、1 个控制点。按比例 \(t\) 在两条线段上取点，再在连线上取点，所有 \(t\) 对应的点连成曲线。曲线不穿过控制点。
• 三阶：4 个点，起点和终点在曲线上，两个控制点不在曲线上。取点逻辑是二阶的延伸：三层按比例取点，最后得到曲线上的点。

三阶贝塞尔在曲线形态丰富度和人工直观操控性之间取得了比较好的平衡。修改起点、终点或控制点的坐标，曲线形状就会改变；直线、多边形、平滑曲线轮廓都可以由多段贝塞尔曲线拼接实现。

贝塞尔曲线是法国工程师皮埃尔·贝塞尔提出来的。他在汽车公司做设计，车身线条太复杂，就想找一种用少量控制点画出平滑曲线的办法。微积分里还有个「贝塞尔函数」，那是德国数学家贝塞尔的成果，和这条曲线不是一回事。

课上还用 Photoshop 的钢笔工具演示了一遍。画布开到 1000×1000，点一下定起点，拖拽拉出控制柄，再点下一个锚点。两个锚点加两个控制点，就是一段三阶贝塞尔曲线。拖动控制点，弯多弯少立刻跟着变，一段段接下去，再复杂的轮廓也能勾出来。

阶数再高，控制点就多了。四阶有 3 个控制点，五阶有 4 个，人很难预判拖一下会变成什么样，也就没法控制它了。所以工程软件基本停在三阶，形态够用，手也管得住。

第 7 部分 · 复杂图形的组织：组合、图层与命名

图形一多，管理就成了麻烦事。把 draw-group.svg 插进 PPT，它是一整张图片。要拆开，先【图片格式 → 组合 → 取消组合】。第一次取消成功后，工具栏会从「图片格式」变成「图形格式」，再取消一次，<g> 里的矩形和三角形才分开。三角形的 path 里能读到 M 和 L，L 是 line，一阶贝塞尔曲线画出来就是直线。

组合主要是为了方便批量操作。把几个图元拼成一座房子，组合起来就能整体移动、旋转、缩放；要细调再取消组合。层次按部件分，别把所有东西塞进一个大组。

图层和名字用【选择窗格】管。列表顺序就是上下层关系，拖动条目能调层，眼睛图标控制显示和隐藏，双击可以改名字。把「任意形状 18」改成「红圆」「绿方」「蓝三角」，回头看时才知道谁是谁。

第 8 部分 · 作业：由一张邮票引发的艺术创作

作业用 PPT 绘图工具完成一幅矢量作品，主题自定，主要使用 邮票.wmf 里的图形元素。动手前先新建「空白」版式。默认的「标题幻灯片」版式带着大标题、副标题占位符。不填内容，放映时它们会自动消失，可编辑时一直占着版面，容易把画布挤乱。作业要把整张幻灯片当画布，用空白版式才干净。

Windows 版 PowerPoint 可以直接插入 邮票.wmf，选中后【组合 → 取消组合】。第一次取消成功后，工具栏从「图片格式」变成「图形格式」，再取消一次才把图元拆开。Mac 版不认 WMF，插进去也拆不开，所以素材包里另放了一份已经打散的版本。

拆出来的图元都能改。选中形状，【编辑形状 → 编辑顶点】。右键把顶点改成平滑顶点，再拖控制柄调弧度。按住 Alt 可以只动一侧，做出不对称的弯。多余的顶点选中后按 Delete 删掉；想加点，按住 Ctrl 在线上单击就行。素材里很多边本来是一阶直线，改成平滑顶点后就变成了三阶贝塞尔曲线。

做的时候按部件分组。羊角、眼睛、铃铛各成一组，分别起名字。背景里的树和山坡可以简化成三角形，花朵用几个基本图形拼。展示页要放素材、主题、成品、说明文字和指示连线五部分。

连线用【插入 → 形状 → 连接符】，两端拖到图形顶点上会自动吸附。挡住文字时，拖它的小黄手柄调拐弯位置。文字框加淡色填充，宽度对齐，再用两端对齐，看起来才像一块整齐的豆腐块。要让一排图形对齐，选中它们，【对齐 → 顶端对齐】，再【横向分布】。渐变可以用「其他渐变」，自己加色标、删色标，拖位置调比例。

成品整体组合后，右键【另存为图片 → 可缩放向量图形】，存成 邮票艺术-主题.svg；再另存 邮票艺术.pptx 和一张 PNG（仅当前幻灯片）用于挂榜。最后提交 学号-邮票艺术.zip，里面放 邮票艺术.pptx 和 邮票艺术-主题.svg。

挂榜占 2 分。到网络学堂的课程讨论区，找到老师发的作业帖，不要在里面回复，自己发表一个新话题。标题写「姓名 + 作品名」，正文写选题、用了哪些素材、关键做了什么编辑，插一张挂榜 PNG 并居中，然后提交。交错了可以删掉重发。

导出前要自己验一遍。老师的批阅方式就是新建一张空白幻灯片，把导出的 SVG 插进去，再取消组合。能拆出独立图元就合格。如果效果和原稿不一样，或者拆出来是一张位图，说明渐变、阴影已经被光栅化或丢失，得改掉重导。课上放过一份往届作品，三维效果和高光做得很漂亮，导出后却出了问题。SVG 原生支持常规的线性、径向渐变，有时能正常导出，但别抱侥幸，插回去看一眼最稳。图片和纹理不能用作填充，图案填充也有风险，导出后同样要检查。

往届作品里能看到不少做法。有人做米老鼠，把邮票元素铺成背景。有学生把邮票背景当海水，重新配色；另一位学生没有水面可借，就画规矩的锯齿边框，不刻意用渐变，效果一样好。也有学生做「番茄炒鸡蛋」，没有具体主题，靠配色和造型。还有人用高光表现向日葵的立体感，或者用贝塞尔曲线勾人像轮廓，做矢量插画。这些作品都在创作，而不是照着原图复刻；用的也多是逻辑型编码擅长的东西。主题图可以从网上找，但只用来定主题和配色，作品本身还得用形状和曲线重新画。

第 9 部分 · 矢量文件格式：SVG、EMF 与 WMF

矢量文件保存的是图形生成规则与参数，不同格式只是这套规则的不同存储方式。

Mac 版 PowerPoint 不认 WMF，插进去也无法取消组合，所以素材包才另给了一份打散的版本。

下课前老师留了一句话：作业存成 SVG 之后，用记事本打开不应该感到陌生，里面全是绘图规则，是标准的逻辑型编码。下周讲感知型编码，正好拿它来做对比。

核心概念

✅ 课堂思考与判断

下面几道题可以自测，点开看答案。