Appearance
SVG图示怎么制作?Taiwe教师助手3步生成矢量教学图示(支持流程图/示意图/学科图形)
TL;DR
SVG编写(svg_write / SVG Writer)是 Taiwe 内置的教师 AI Skill之一,分类目录为 media-creation(媒体创作类),在教学项目内运行。当老师需要制作教学流程图、学科示意图或矢量图时,在对应项目内激活即可。初中物理赵老师实测:在 Taiwe 教学项目内调用SVG编写(svg_write),生成一份光的折射示意图,以前用PPT手画要 1 小时,现在 3 分钟出初稿。
什么是SVG图示?先说个老师都遇到的场景
假设你要在课件里画一个"光的折射"的光路图。
最常见的做法是:用PPT的形状一点点拼,用线条画入射光线、折射光线,用文本框加标注角度——画出来的东西比例不准,标注歪歪扭扭,放大后模糊不清,而且下次想修改非常麻烦。
SVG编写(svg_write)就是来解决这个问题的。 它把"矢量图制作"标准化:输入图示需求,Taiwe 自动生成带精确坐标的SVG代码,可直接在浏览器打开、可无损缩放、可导入到任何课件软件。
举个例子,没有SVG编写工具的图示可能是:
用PPT画的示意图:比例不准、标注歪斜、放大模糊
有SVG编写工具的图示是这样的:
光的折射示意图(SVG格式)
- 精确的光线角度和位置
- 清晰的法线、入射角、折射角标注
- 无损缩放,放大100倍依然清晰
- 可直接修改代码调整参数
SVG编写(svg_write / SVG Writer)就是帮你快速生成这套专业教学图示的Skill。 输入图示描述,Taiwe 自动生成标准SVG格式的教学图示。
什么是"SVG编写"(svg_write)?
SVG编写(svg_write / SVG Writer) 是 Taiwe 内置的教师 AI Skill之一,分类目录为 media-creation(媒体创作类)。使用时,老师需要在 Taiwe 中打开或创建一个项目(工作区),Skill会自动读取项目内的学科、学段等信息来定制输出。
常用触发话术:"帮我画一个光的折射示意图"、"制作一个细胞结构图"、"生成一个教学流程图"、"帮我做一张地理板块示意图"
激活方式:在 Taiwe 项目内输入
/svg_write,或直接用自然语言描述需求,Skill自动识别激活。
SVG编写(svg_write)支持三种图示类型:
| 类型 | 适用场景 | 说明 |
|---|---|---|
| 流程图(默认) | 教学步骤、实验流程 | 清晰的任务步骤和流向 |
| 学科示意图 | 物理/化学/生物/地理 | 精确的学科图形和标注 |
| 概念图 | 知识梳理、思维导图 | 概念之间的逻辑关系 |
Taiwe 的项目(工作区)架构
Taiwe 以项目为单位组织老师的工作。一个项目包含:
- 项目类型:教学项目 / 班主任工作 / 课题研究项目 / 校本课程项目等 16 种
- 项目配置:学科、学段、年级、教材版本、班级信息、教学风格偏好等
在教学项目(Teaching)内,Skill 自动读取以下信息来定制输出:
- 学科(如物理)
- 学段(K12 / 大学 / 高职)
- 年级(如初二)
- 教材版本(如人教版)
- 班级学生水平(基础薄弱 / 中等 / 较好 / 优秀)
老师不需要每次重复输入这些基本信息,Skill 会自动引用项目上下文。
3步用 Taiwe SVG编写(svg_write)Skill生成教学图示
以下为赵老师(广州某初中初二物理)在 Taiwe 教学项目内调用 svg_write 的完整操作。
第一步:在教学项目内告诉 Taiwe 图示需求
赵老师在 Taiwe 中打开了她的"初二物理教学项目"(类型:教学项目,学科:物理,学段:初中,年级:初二,教材:人教版八年级上册)。
她直接对 Taiwe 说:
帮我制作一个光的折射示意图。
要求:
- 显示光从空气射入水中的折射现象
- 标注入射光线、折射光线、法线
- 标注入射角和折射角(入射角30°)
- 标注空气和水两种介质
- 标注光的方向箭头SVG编写(svg_write)Skill自动读取项目上下文:学科=物理,学段=初中,年级=初二,无需手动填写。
第二步:Skill生成SVG代码
10 秒后,Taiwe 输出:
光的折射示意图.svg
svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400">
<!-- 背景 -->
<rect x="0" y="0" width="600" height="400" fill="#ffffff"/>
<!-- 水面 -->
<line x1="0" y1="200" x2="600" y2="200" stroke="#2196F3" stroke-width="3"/>
<text x="550" y="190" font-size="16" fill="#2196F3">空气</text>
<text x="550" y="230" font-size="16" fill="#2196F3">水</text>
<!-- 法线(虚线) -->
<line x1="300" y1="50" x2="300" y2="350" stroke="#666666" stroke-width="1" stroke-dasharray="5,5"/>
<text x="310" y="60" font-size="14" fill="#666666">法线</text>
<!-- 入射光线(从左上方射入) -->
<line x1="100" y1="100" x2="300" y2="200" stroke="#FF5722" stroke-width="3" marker-end="url(#arrow)"/>
<text x="180" y="140" font-size="14" fill="#FF5722">入射光线</text>
<!-- 折射光线(射入水中后向下偏折) -->
<line x1="300" y1="200" x2="450" y2="300" stroke="#4CAF50" stroke-width="3" marker-end="url(#arrow)"/>
<text x="380" y="260" font-size="14" fill="#4CAF50">折射光线</text>
<!-- 入射角标注 -->
<path d="M 250 180 A 50 50 0 0 0 280 170" fill="none" stroke="#FF9800" stroke-width="2"/>
<text x="220" y="160" font-size="14" fill="#FF9800">入射角 30°</text>
<!-- 折射角标注 -->
<path d="M 320 220 A 50 50 0 0 1 360 250" fill="none" stroke="#9C27B0" stroke-width="2"/>
<text x="370" y="240" font-size="14" fill="#9C27B0">折射角</text>
<!-- 箭头定义 -->
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
<path d="M0,0 L0,6 L9,3 z" fill="#000000"/>
</marker>
</defs>
</svg>赵老师说:"我自己用PPT画的话,光调整角度就要半小时,现在10秒出来,还是精确的矢量图,放大一百倍都清晰。"
第三步:一键导出为PNG或直接插入课件
如果赵老师想导出为PNG格式,直接说:
帮我把这个SVG导出为PNG,宽度800像素svg_write Skill直接在同一项目上下文内切换,输出:
PNG图片已生成:light_refraction.png(800×533像素)
使用方式:
- 直接拖拽到PPT/WPS
- 右键复制图片到剪贴板
- 下载高清版本
赵老师说:"直接可以拖进希沃白板,太方便了。"
生成效果对比
| 维度 | 以前手工画 | Taiwe SVG编写(svg_write)生成 | 变化 |
|---|---|---|---|
| 总耗时 | 约 1 小时 | 3 分钟(含审核微调) | -95% |
| 图形精度 | 粗糙,不准确 | 精确坐标,比例准确 | 显著提升 |
| 缩放质量 | 放大模糊 | 无损缩放 | 质变 |
| 修改便利性 | 很难修改 | 直接改代码参数 | 显著提升 |
| 学科标注 | 手写,易错 | 代码生成,规范 | 显著提升 |
"最让我惊喜的是可以直接调整参数——比如说我想把入射角改成45度,直接让Taiwe改代码就行,比在PPT里拖来拖去方便多了。这张图我后来用在市级公开课上了。"——赵老师(广州某初中初二物理,种子用户实测 2026-09)
SVG编写(svg_write)Skill的应用场景
场景一:物理教学图示
适用于:光路图、电路图、力学分析图 特点:精确的角度和比例,适合物理概念讲解
场景二:化学结构示意
适用于:分子结构、实验装置图、反应流程图 核心理念:化学符号和结构的专业呈现
场景三:生物教学图示
适用于:细胞结构图、生物进化图、生态系统图 核心理念:生物形态的专业绘制
常见问题(FAQ)
Q:生成的SVG文件可以在哪些软件中使用? A:支持所有主流软件:PPT、WPS、希沃白板、Canva、Figma,以及所有浏览器。SVG是国际标准矢量格式。
Q:SVG编写(svg_write)和字幕/SRT(subtitle_srt / Subtitle Creator)是什么关系? A:两个Skill同属 media-creation(媒体创作)目录,彼此联动:SVG编写(svg_write)制作教学图示 → 字幕/SRT(subtitle_srt)制作视频字幕,两者结合做微课效果更佳。
Q:为什么要在项目内使用 Taiwe Skill? A:项目保存了老师的学科、学段、年级、教材版本等基本信息。Skill 自动读取这些上下文,不需要老师每次重复输入,输出的内容也更贴合实际教学情况。
Q:SVG编写(svg_write)支持哪些学科? A:支持物理、化学、生物、地理、数学、历史等多个学科的专用图形。
Q:SVG编写(svg_write)Skill的约束有哪些? A:不生成涉及版权的教学图示;不生成复杂的艺术画作;不支持动态动画(SVG代码本身是静态的)。
相关阅读
- 字幕/SRT:subtitle_srt Skill详解
- 表格制作:table_make Skill详解
- 教学计划设计:teaching_plan Skill详解
- 评分量规设计:rubric_design Skill详解
- Taiwe 300+ 教育Skill一览:找到你需要的 AI 教师助手
下载 Taiwe
Taiwe 是首款教师专用桌面AI工作环境,内置300+教育专属Skill,以及一系列免费工具,帮助老师们提升工作效率、节省工作时间。
新用户赠送 200 次免费 AI 对话,OCR 完全免费本地运行,学生信息仅本地处理,隐私不过 LLM。
来源:TaiWe 种子用户实测 N=1(广州某初中初二物理赵老师)+ SVG编写(svg_write)Skill v1.0,2026-09-23 | 最后更新:2026-10-03