GPT Image 2.6 SVG 矢量图教程：AI 直接生成可编辑的图标、Logo 和扁平插画

GPT Image 2.6 新增了 SVG 矢量图输出。生成的不是像素图片，而是一份矢量文件：放大到多大都不会糊，可以直接拖进 Figma、Illustrator 改颜色、删元素，也可以当成代码直接放进网页里。

上图三个都是 SVG，最大的文件不到 3KB。

不过 SVG 输出的效果很挑题材：同样是「咖啡杯图标」，换一种写法，结果可能从一团乱变成可以直接用。下面 6 个案例都是我们实际生成的，好的坏的都有。

先弄懂：SVG 是怎么生成的

GPT Image 2.6 的 SVG 分两步完成：

1. 先按 1K 画出一张普通的参考图；
2. 再由一个文字模型「看着」这张图，用代码把它重新画成矢量图形。

所以 SVG 不是对图片的精确描边，而是照着图重新画一遍。形状越简单、颜色越少，重画得越准；细节越多、越写实，就越容易走样。理解了这一点，后面所有的技巧都是由此而来。

SVG 输出的规格

矢量化这一步按实际用量计费，所以界面显示的是起步价，账户余额需要至少是起步价的两倍才能提交。本文示例都用 Flare + 标准画质生成，多数在半分钟内完成，文字比较多的徽章花了将近 4 分钟。

第 1 步：打开 SVG 设置

1. 打开 GPT Image 2.6 页面，保持「文生图」模式；
2. 在设置里把「输出格式」选为「SVG 矢量图」；
3. 选画面比例，图标选 1:1，横幅插画选 16:9；
4. 画质先用「标准」。

示例 1：一组线性图标（效果最好）

线性图标几乎就是为 SVG 准备的：只有线条、一种颜色、没有填充。

一组 4 个线性图标，在白色背景上排成 2×2 网格：房子、放大镜、购物车、人像剪影。
统一的深海军蓝描边，圆头线帽，不填充颜色，大小和间距一致。
极简 UI 图标风格。不要文字。

👉 用这段提示词试一下（打开后把输出格式切换为 SVG 矢量图）

整个文件只有 1.5KB。打开代码可以看到，所有图标共用一组描边设置：

<g stroke="#082c72" stroke-width="28" stroke-linecap="round" stroke-linejoin="round" fill="none">
  <circle cx="760" cy="244" r="156"></circle>
  <line x1="868" y1="352" x2="950" y2="434"></line>
  ...
</g>

想换颜色或线条粗细，只要改 stroke 和 stroke-width 这两个值，4 个图标就一起变了。唯一的小瑕疵是房子的烟囱线条穿过了屋顶，在 Figma 里删掉多余的那一小段就行。

4 个图标在同一个文件里。拖进 Figma 后取消编组（Ungroup），就能把每个图标单独拿出来导出。

示例 2：扁平风景插画

扁平矢量风景插画：层叠的青绿色和深蓝色山峦，一轮淡黄色的太阳，前景两棵简单的松树和一条蜿蜒的小路。
只用五种颜色，大块干净的形状，不要渐变，不要纹理。
宽幅构图。不要文字。

2.7KB，山峦、太阳、小路的层次都在，适合做网页横幅、PPT 背景或者文章头图。前景那棵小松树画得有点奇怪，这是「重画」这一步常见的问题：越小的元素越容易走样。

提示词里「只用五种颜色」很重要。颜色少，重画时每一块颜色就是一个形状，结构清楚、文件也小。

示例 3：同一个图标，两种写法

这一组对比最能说明问题。第一次我们这样写：

一个扁平风格的 App 图标：一杯咖啡，上面飘着一缕心形的热气。
暖橙色圆角方形背景，杯子是奶白色、带深棕色描边。
形状简单、颜色少、描边粗而干净，不要渐变，不要纹理。不要文字。

然后改成更「几何」的写法，把每个部件用简单形状描述出来，并且明确「不要小细节」：

一个极简扁平风格的 App 图标：侧面视角的一只简单咖啡杯，杯身是一个圆角形状，带一个 C 形把手，放在一个扁平的碟子上，杯子上方有三道短短的直线表示热气。
奶白色杯子配粗的深棕色描边，背景是纯橙色圆角方形。
只用三种颜色，大块简单的形状，不要渐变，不要阴影，不要纹理，不要小细节。不要文字。

左：第一版；右：改进版。

第一版的「心形热气」是一个细节很多的曲线造型，重画时和杯子的轮廓缠在了一起，完全看不出是咖啡杯。改进版把杯子拆成「圆角杯身 + C 形把手 + 扁平碟子 + 三道直线」，结果干净得可以直接当 App 图标用，文件只有 0.9KB：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
  <rect width="1024" height="1024" rx="180" fill="#ff7a00"></rect>
  <g fill="none" stroke="#5a2d14" stroke-linecap="round" stroke-linejoin="round">
    <path d="M374 152v116" stroke-width="52"></path>
    ...
  </g>
</svg>

把 #ff7a00 改成品牌色，背景就换了；把 #5a2d14 改掉，所有描边一起换色。

翻车 1：带弯曲文字的徽章

我们试了一个咖啡店徽章：中间一颗咖啡豆，「BREW LAB」沿着上方圆环排列，「EST. 2026」沿着下方排列。

圆环画对了，但字母是被一笔一笔「画」出来的，沿弧线排列时全部变形，根本读不出来。这一次生成也特别慢，花了将近 4 分钟；我们再试一次时，上游直接返回了失败（积分会自动退回）。

**建议：SVG 里不要放文字。**先生成不带文字的图形，再到 Figma 或 Illustrator 里用真正的字体加字。字体可以随便换，也不会写错。如果需要带文字的成品图，用普通 PNG 输出更合适，可以参考品牌套件教程。

翻车 2：写实照片

最后我们故意试了一张写实人像：一位满脸皱纹、戴毛线帽的老渔夫。

结果是一堆叠在一起的色块，看不出人脸，文件也是其他示例的 4 倍多（12KB）。照片的光影、纹理、皱纹没法用几十个形状表达。写实的东西请用 PNG、JPEG 或 WebP 输出。

什么适合出 SVG

提示词模板

[扁平 / 线性 / 几何]风格的[图标 / Logo / 插画]：[主体，用简单的几何形状描述]。
颜色：只用[N]种颜色，[颜色 1]、[颜色 2]……（可以直接写色号，例如 #FF7A00）。
大块简单的形状，[粗描边 / 无描边]，不要渐变，不要阴影，不要纹理，不要小细节。
[背景：纯色 / 白色 / 无背景]。不要文字。

写 SVG 提示词时记住四条：

1. 把主体拆成简单形状：「圆角杯身 + C 形把手」比「一杯咖啡」准得多；
2. 限定颜色数量：三到五种最好，可以直接写色号。不知道品牌色的色号，可以用调色板提取工具从现有素材里提取；
3. 明确说「不要」：不要渐变、不要阴影、不要纹理、不要小细节；
4. 不要文字：文字留到设计软件里加。

下载之后怎么用

• Figma：直接把 SVG 文件拖进画布，取消编组后每个形状都可以单独改颜色、调整位置；
• Illustrator：用「打开」或「置入」，得到的是可编辑的路径；
• 网页：当作图片用 <img src="icon.svg"> 引用，或者把代码直接粘贴进 HTML，用 CSS 控制颜色；
• 去掉底色：我们的几个结果最底层都有一个铺满画面的 <rect> 背景，删掉它就得到透明背景的图形。也可以试着在提示词里写「无背景」（这一点我们没有专门测试）。

GIF 和 SVG 结果不能作为参考图继续编辑。想修改的话，有两个办法：调整提示词重新生成，或者在设计软件里直接改。

常见问题

总结

GPT Image 2.6 的 SVG 输出是「先画图、再照着重画成矢量」，所以：

1. 线性图标、扁平插画、几何图形效果最好，文件只有几 KB，改颜色只要改一个色号；
2. 提示词要把主体拆成简单形状、限定颜色、不要细节和文字；
3. 写实照片和带文字的徽章请换用普通图片输出。

想马上试试？打开 GPT Image 2.6 页面，输出格式选 SVG 矢量图，从上面的线性图标提示词开始。