GlyPho 教程

如何从文本生成可编辑 SVG:提示词写法与实战步骤 | GlyPho

学习如何从文本生成可编辑 SVG:先确定 Logo、图标或插画类型,再补充产品场景、视觉风格、尺寸和颜色限制。教程以空状态插画为例,逐步扩写提示词,选择 GlyPho 预设并检查生成结果。最后将 SVG 放入真实组件,核对小尺寸可读性、透明背景、viewBox 和路径,再复制代码或下载文件;示例提示词不保证固定输出。

发布于 2026/06/15 · 作者 GlyPho 编辑团队

如何从文本生成可编辑 SVG:提示词写法与实战步骤 | GlyPho
如何从文本生成可编辑 SVG:提示词写法与实战步骤 | GlyPho

从文字生成 SVG,需要先说清什么?

从文字生成 SVG,先说明素材类型、使用位置、视觉主体和限制,再检查生成的文件是否适合目标尺寸。下面用「项目管理应用的空状态插画」演示怎样逐步补全提示词。示例提示词用于说明写法;实际生成结果会随模型和风格预设变化,不能保证与文字完全一致。

1. 先选择一个素材类型

从一个具体 SVG 素材开始:

  • 产品图标
  • Logo 方向
  • 空状态插画
  • 文档视觉
  • UI 卡片图形
  • 发布页图案

不要写 “make something cool for my app” 这类模糊提示词。越聚焦,GlyPho 越容易生成可用方向。

2. 描述产品语境

告诉 GlyPho 这个 SVG 会出现在哪里。Landing page hero、功能网格、dashboard 空状态和文档页面,需要的视觉密度都不一样。

示例:

Create a clean SVG illustration for a dashboard empty state in a project management app.

3. 加入视觉隐喻

视觉隐喻能让 SVG 有明确主体。常见例子:

  • Growth arrow
  • Connected nodes
  • Shield
  • Inbox tray
  • Document stack
  • Spark
  • Search lens

示例:

Create a clean SVG illustration for a dashboard empty state in a project management app, showing an organized document stack and a small search lens.

4. 指定风格

使用容易判断的风格词:

  • Minimal outline
  • Duotone
  • Line art
  • Soft product illustration
  • Geometric logo mark
  • Simple mascot

示例:

Create a clean SVG illustration for a dashboard empty state in a project management app, showing an organized document stack and a small search lens, in a minimal duotone SaaS style.

5. 加入约束

约束能让输出更容易使用:

  • Works at 24px
  • No background
  • Single color
  • Centered composition
  • High contrast
  • Suitable for a website header
  • Editable SVG

最终示例:

Create a clean SVG illustration for a dashboard empty state in a project management app, showing an organized document stack and a small search lens, in a minimal duotone SaaS style, centered composition, no background, editable SVG.

6. 生成、检查、继续调整

打开 GlyPho,粘贴提示词,生成第一版方向。检查图形是否清晰、风格是否匹配产品,以及 SVG 是否能复制或下载进入你的工作流。

如果结果接近但还不对,一次只改一个部分:主体、风格、布局或约束。

用同一张空状态插画做验收

先把生成的 SVG 放进真实空状态组件,不要只看工作台的大图。分别在预期宽度和窄屏下检查文档堆与放大镜能否辨认、背景是否透明、颜色是否符合界面、viewBox 是否包含完整图形。复制 SVG 代码后再在浏览器打开一次,确认没有丢失的形状或外部引用。

如果主体不清楚,优先删减装饰细节;如果它像普通插画而不像空状态素材,给提示词补上目标尺寸、留白和背景条件。每次只改一个要求,才能知道是哪一项改善了结果。最终仍需人工检查路径和品牌适配度,不能把“可下载”直接等同于“可上线”。

相关页面