--- title: "去哪找好用的 SVG：资源实测，以及怎么给 AI 画图当参照" description: "本站的配图是让 AI 写 SVG 画的，画得好不好，取决于给它看什么参照。为了找好的参照，顺着这些问题往下追：SVG 资源分哪几类，“免费”背后有哪几种许可、哪些不让拿给 AI，各家插画站的风格和文件质量差在哪，23 套图标库为什么有的能跟着文字变色、有的不能，聚合站里的许可为什么要逐个看，SVG 放进页面之前要处理什么；最后是让 AI 画什么就搜什么、把搜到的 SVG 当 baseline 而不是素材，prompt 怎么写，画完怎么对照。" pubDate: 2026-10-28 updatedDate: 2026-10-28 tags: ["SVG", "设计资源", "图标", "开源许可", "前端"] hero: "./hero.svg" clc: "TP39" refs: - id: undraw title: unDraw License url: https://undraw.co/license site: unDraw note: "商用免费、不用署名；不能做竞品或打包再分发，不能用于 AI 训练，未经同意不能自动抓取下载。" - id: openpeeps title: Open Peeps url: https://www.openpeeps.com author: Pablo Stanley note: CC0 - id: humaaans title: Humaaans url: https://www.humaaans.com author: Pablo Stanley note: CC0 - id: opendoodles title: About Open Doodles url: https://opendoodles.com/about author: Pablo Stanley note: CC0 - id: storyset title: Storyset Terms of Use url: https://storyset.com/terms site: Storyset（Freepik） note: "免费使用须注明出处；不署名需要购买 Flaticon Premium。" - id: drawkit title: DrawKit License url: https://www.drawkit.com/license site: DrawKit note: "商用不用署名；不能再分发、不能放进模板、不能印成周边、不能用于 AI 训练。" - id: manypixels title: ManyPixels Free Illustrations url: https://www.manypixels.co/gallery site: ManyPixels note: "页面底部许可：商用不用署名，不能打包再分发或做竞品。" - id: iradesign title: IRA Design url: https://iradesign.io note: MIT - id: blush title: Blush License url: https://blush.design/license site: Blush - id: icons8 title: "Icons8 社区：Free license attribution requirements" url: https://community.icons8.com/t/free-license-attribution-requirements/1708 site: Icons8 Community note: "Icons8 许可页对本文的抓取返回 403，免费版要署名加链接、SVG 收费这两点来自官方论坛和定价页。" - id: openclipart title: Openclipart Share url: https://openclipart.org/share site: Openclipart note: "18 万余幅矢量图，全部放入公有领域。" - id: commons title: "File:Tux.svg" url: https://commons.wikimedia.org/wiki/File:Tux.svg site: Wikimedia Commons note: "Tux 由 Larry Ewing 用 GIMP 绘制，使用时要注明作者。" - id: heropatterns title: Hero Patterns url: https://heropatterns.com author: Steve Schoger note: "页面底部标注 CC BY 4.0；图案数据在 `/js/app.js`。" - id: fffuel title: License for images generated using fffuel tools url: https://fffuel.co/license/ site: fffuel - id: haikei title: Haikei url: https://haikei.app note: "首页写着免费、不用注册；没有找到单独的许可页。" - id: svgbackgrounds title: SVGBackgrounds.com License url: https://www.svgbackgrounds.com/license/ site: SVG Backgrounds - id: gameicons title: game-icons.net About url: https://game-icons.net/about.html note: CC BY 3.0 - id: remixlicense title: Remix Icon License v1.0 url: https://github.com/Remix-Design/remixicon/blob/master/License site: GitHub note: "2026 年 1 月生效。npm 包 remixicon 4.9.1 的 package.json 仍写 Apache-2.0。" - id: fontawesome title: Font Awesome Free License url: https://fontawesome.com/license/free site: Font Awesome note: "图标 CC BY 4.0，字体 OFL 1.1，代码 MIT；每个 SVG 文件里自带一行许可注释。" - id: simpleicons title: Simple Icons url: https://github.com/simple-icons/simple-icons site: GitHub note: "图标文件 CC0，但品牌标志本身受各自商标约束。" - id: lucide title: Lucide url: https://lucide.dev note: "ISC；本文实测 lucide-static 1.62.0。" - id: tabler title: Tabler Icons url: https://tabler.io/icons note: "MIT；本文实测 @tabler/icons 3.50.0。" - id: phosphor title: Phosphor Icons url: https://phosphoricons.com note: "MIT；thin、light、regular、bold、fill、duotone 六种字重。" - id: material title: Material Symbols url: https://fonts.google.com/icons site: Google Fonts note: Apache-2.0 - id: iconify title: Iconify API：/collections url: https://api.iconify.design/collections site: Iconify note: "2026-10-28 返回 244 套、417,719 个图标，每套带 license 字段。" - id: svgrepo title: SVG Repo Licensing url: https://www.svgrepo.com/page/licensing/ site: SVG Repo note: "本文的 curl 和抓取都收到 429；许可说明来自搜索摘要：默认不要求署名，但条款按作者不同。" - id: themehope title: "vuepress-theme-hope：图标支持" url: https://theme-hope.vuejs.press/zh/guide/interface/icon.html site: VuePress Theme Hope note: "提醒商用项目慎用 iconfont：图标由用户上传，商用须作者授权，上传者也可能上传了版权在第三方的图标。" - id: svgo title: "SVGO：prefixIds" url: https://svgo.dev/docs/plugins/prefixIds/ site: SVGO - id: currentcolor title: "currentcolor keyword" url: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword site: MDN - id: iconifysearch title: "Iconify API：/search" url: https://iconify.design/docs/api/search.html site: Iconify note: "按关键词搜图标，可用 `prefix` 限定在一套图标里；单个 SVG 从 `/<前缀>/<名字>.svg` 取。" - id: ccby title: Creative Commons Attribution 4.0 International url: https://creativecommons.org/licenses/by/4.0/ site: Creative Commons --- 本站每篇文章的头图和配图，都是让 AI 直接写 SVG 代码画出来的。画多了会发现，AI 画得好不好，很大程度上取决于它“照着什么画”。只说一句“画一个简洁的图标”，线宽、网格、圆角全凭它自己的印象，每次都不一样；给它看几张好的 SVG，画出来就稳得多。这里的“看”不是让 AI 把别人的 SVG 扒下来直接用，而是给它一条 baseline：风格向谁看齐，质量要到什么程度，画完以后拿什么来对照。 于是就要去找好的 SVG。搜 “free SVG illustrations”，能搜出一长串站点，每个都写着 free。真下载了几张，事情没那么顺。一张 unDraw 的插画放进页面，主色是一种很显眼的紫色 `#6c63ff`，和本站的暖色完全不搭；一张 Open Peeps 的手绘人物在浅色模式下很好看，切到深色模式，黑色线条就和背景融成一片；从图标库里拿来的房子图标，用 `` 引进来以后，怎么设 `color` 都还是黑的。再往页脚看，“free” 后面还跟着小字：有的要求署名，有的禁止拿去训练 AI，有的只免费给低清 PNG。 那么，哪里能找到质量好一点、适合当参照的 SVG？各家写的“免费”是同一个意思，允许拿给 AI 看吗？下载下来的文件，放进网页之前要做什么？真要让 AI 照着画，又该怎么跟它说？本文就从这几个疑问出发，把插画、图标、图案三类资源逐个下载下来试一遍，最后再让 AI 照着画一次。 ## 一、SVG 资源的几种来源 搜出来的站混在一起，其实是几种不同的东西。按“一个文件里装的是什么”，可以分成四类： - **插画**：一个场景或一个人物，几十个到几百个形状，用来做头图、空状态、落地页。代表是 unDraw、Open Peeps、Storyset。 - **图标**：一个符号，通常画在 24×24 这样的小网格上，几百字节，成套出现，一套几百到几千个。代表是 Lucide、Tabler、Material Symbols。 - **图案与背景**：可以平铺的纹样，或者由生成器现场算出来的波浪、斑点。代表是 Hero Patterns、Haikei。 - **聚合站和开放图库**：自己不画，把别人的作品汇到一起供搜索。代表是 Iconify、SVG Repo、iconfont.cn、Openclipart、Wikimedia Commons。 四类东西的“好”不是一个标准。插画看风格能不能统一、能不能改成自己的配色；图标看成套程度和能不能跟着文字变色；图案看能不能无缝平铺、体积多大；聚合站看能不能按许可筛选。拿来给 AI 当参照，还要多看一条：**规格能不能量化**。一套图标的网格、线宽、圆角都是固定的数字，可以原样写给 AI，也可以拿来检查它画出来的东西；一张孤零零的插画，只能让 AI 去“意会”。但有一件事四类都绕不开：每个站都写着 free，**这个 free 到底允许我们做什么？** ## 二、“免费”的几种含义 ### 现象 把各站的许可页一个个点开（2026 年 10 月 28 日访问），“free” 至少有六种意思。Open Peeps 说的是 “CC0，你可以复制、修改、分发，甚至商用，不用问任何人”[^openpeeps]；Storyset 说的是“免费使用，前提是注明出处，不想署名就买 Flaticon Premium”[^storyset]；unDraw 说的是“商用免费、不用署名”，后面紧跟着三条禁止：不能做竞品或打包再分发，不能用于训练 AI，不能未经同意自动抓取下载[^undraw]。 ### 分析 这些说法可以归成下面几类。前四类是通用许可，条款在任何地方都一样；后两类是站点自己写的，要逐条读。
“免费”的六种含义
类型商用署名要留意的地方 · 例子
公有领域 CC0可以不用没有附加条件。Open Peeps、Humaaans、Open Doodles、Openclipart、Simple Icons（品牌商标另算）
宽松开源 MIT / ISC / Apache-2.0可以页面上不用分发副本时要带上版权声明，通常在源码或致谢页留一行。Lucide、Tabler、Heroicons、Phosphor、Material Symbols、IRA Design
署名 CC BY可以要写明作者、来源和许可。Hero Patterns、Font Awesome Free、game-icons.net
相同方式共享 CC BY-SA、GPL可以要改过的作品要用同样的许可发布。OpenMoji、Typicons、WordPress Dashicons
站点自定义许可可以多数不用逐条读禁止项：不能打包再分发、不能做竞品、不能 AI 训练、不能当商标。unDraw、DrawKit、ManyPixels、fffuel、Remix Icon（2026 起）
免费增值免费版可以免费版要付费才去署名或给 SVG。Storyset、Icons8、SVG Backgrounds

还有一类要绕开：CC BY-NC（非商业）。个人博客挂了广告，算不算商业用途，许可本身说不清。

图 1 · 同样写着 free，六类许可对商用和署名的要求各不相同
站点自定义许可最容易被忽略，因为它的第一句往往和 CC0 一样宽松。DrawKit 允许商用、不用署名，但不允许把插画放进要下载的博客模板里，也不允许印到 T 恤和杯子上[^drawkit]。 这类禁止项里，和本文目的关系最大的是 AI。unDraw 的许可专门列了一串：不能拿来做生成式模型的训练数据，不能放进机器学习数据集，不能“用来训练、验证或测试 AI 系统”，也不能为开发 AI 模型做任何自动化处理；还不能未经同意自动抓取下载[^undraw]。DrawKit 也写明不能用于训练、微调或改进任何 AI 模型[^drawkit]。把一张插画贴进 prompt 当参照算不算这些条款里的“使用”，条文没有说清。既然有 CC0、MIT 的同类可选，**给 AI 当参照的素材就从许可宽松的库里挑，避开写了 AI 禁令的站**。 ### 许可会变 还有一个容易踩的坑：许可不是一成不变的。Remix Icon 从 2026 年 1 月起改用自己写的 Remix Icon License v1.0，新加了三条禁止：不能单独售卖图标、不能拿它做竞品图标库、不能把图标当 logo 或商标用[^remixlicense]。我们用 npm 装下最新的 remixicon 4.9.1，`package.json` 里写的却还是 `"license": "Apache-2.0"`，只有包里的 `License` 文件是新条款。 按 `package.json` 自动统计许可的工具，会把它当成 Apache-2.0。**判断许可要看许可文件本身，不能只看包的元数据。** ### 聚合站里的许可分布 聚合站把这件事放大了。Iconify 的接口会返回每套图标的许可[^iconify]，我们把 244 套、417,719 个图标按许可加起来：
Iconify 收录图标的许可分布 244 套图标中，MIT 和 Apache-2.0 占大头；CC BY、CC BY-SA、CC BY-NC 和 GPL 四类合计 95,439 个图标，约占 23%，使用时要署名或遵守附加条款。 Iconify 收录的 244 套图标，按许可加总（图标个数） MIT · 113 套 213,714 Apache-2.0 · 31 套 84,280 CC BY · 53 套 68,918 CC BY-SA · 9 套 22,739 CC0 · 10 套 11,193 OFL-1.1 · 13 套 6,240 ISC · 4 套 5,925 CC BY-NC · 2 套 2,245 GPL · 6 套 1,537 Unlicense、MPL、BSD · 3 套 928 橙色四类合计 95,439 个，约占 23%：要署名，或改了以后要用同样的许可发布，或不能商用。
图 2 · 同一个聚合站里，大约每四个图标就有一个带附加条件
将近四分之三的图标是 MIT、Apache 这类宽松许可，但剩下四分之一要署名或带附加条款，其中 Custom Brand Icons 和 PrestaShop Icons 两套还是非商业许可。在聚合站里搜图标，搜到的是图标，许可却要回到它所属的那一套去看。 许可弄清楚了，接下来按类型看资源本身。先看插画，因为插画最显眼，问题也最多。 ## 三、插画资源 ### 各家的风格和许可 免费 SVG 插画站数下来有十来家，风格差别很大： - **unDraw**：扁平人物 + 一个主色，主题偏科技和办公。站上可以先选主色再下载[^undraw]。 - **Open Peeps / Humaaans**：同一位作者 Pablo Stanley 的两套“积木”。Open Peeps 是黑白手绘线稿，Humaaans 是彩色扁平人物，头、身体、腿可以自由拼装，都是 CC0[^openpeeps][^humaaans]。 - **Open Doodles**：同一位作者的涂鸦风，只有一个强调色加黑线，CC0[^opendoodles]。 - **Storyset**：Freepik 出品的场景插画，可以在线换主色、加简单动画；免费版要署名[^storyset]。 - **DrawKit、ManyPixels**：商业公司放出的免费插画，许可都是“商用不用署名、不能再分发”的自定义条款[^drawkit][^manypixels]。 - **IRA Design**：渐变色人物和物件组件，MIT[^iradesign]。 - **Blush**：汇集多位插画师的风格，可以在线拼装；许可页写明免费使用不用署名[^blush]。 - **Icons8 Ouch**：风格最多，但免费版只给低清 PNG，还要署名加链接，SVG 要付费[^icons8]。 - **Openclipart、Wikimedia Commons**：开放图库，数量最大，风格完全不统一[^openclipart][^commons]。 只看许可和风格还不够。我们从其中几家各下载了一两张，用同一个脚本统计文件里有什么：
插画样本实测（原始文件，svgo multipass 压缩后）
样本体积颜色数id 数svgo 后
unDraw · agentic-network23.1 KB8020.3 KB
unDraw · business-chart8.2 KB41（a）7.0 KB
Open Peeps · peep-139.0 KB21516.7 KB
Humaaans · wide-shot79.6 KB2620731.0 KB
Open Doodles · coffee42.7 KB25920.6 KB
Storyset · team-work45.6 KB62031.2 KB
Openclipart · iso-house359.5 KB40981181.7 KB
Wikimedia · Tux48.8 KB4716335.1 KB

颜色数是文件里出现的不同十六进制色值个数。Humaaans、Open Peeps、Open Doodles 的 id 都是设计软件里的图层名，Openclipart 和 Tux 的 id 大多被渐变、滤镜引用。

图 3 · 同样是免费插画，文件里的颜色数、id 数和冗余程度差好几倍
### 改成自己的配色 开头那张紫色的 unDraw 插画，问题出在配色上。表里的“颜色数”恰好说明了改色的难度：unDraw 那张 agentic-network 一共 8 种颜色，其中主色 `#6c63ff` 出现了 30 次，其余是灰和深蓝。**把这一个色值全局替换成站点的强调色，整张图就换了主题**，这也是 unDraw 能在网站上先选主色再下载的原因。Open Doodles 是 `#ff5678` 加黑线，Storyset 是一个主色加几种灰，改法一样。 Humaaans 就难得多：一张图 26 种颜色，肤色、衣服、阴影各是各的，要改只能进设计软件逐个调。Openclipart 和 Wikimedia 上的图更是各画各的，40 多种颜色、几十个渐变很常见。 颜色数也决定了一张插画适不适合给 AI 当参照。Open Doodles 是“黑线加一个强调色”，Open Peeps 只有黑白两色，风格一句话就能写清，AI 也容易照着做；Humaaans 的 26 种颜色和 207 个图层 id，AI 读进去只是一堆噪声。 ### 深色模式 颜色能换，还有一个问题没解决：深色模式。Open Peeps 的线条是写死的 `#000000`，本站深色模式的页面底色是 `#111`，两者的对比度只有 1.1:1，线条几乎看不见。unDraw 的深色部分 `#3f3d56` 在同样的底色上也只有 1.8:1。 写死颜色的插画在深色模式下只有三种处理办法：给插画垫一块浅色底，让它像一张贴纸；把关键颜色改成 CSS 类，深色模式下另给一组颜色（本站自己的配图就是这么做的）；或者只在浅色模式下显示。第一种最省事，第二种效果最好，但要先把文件里的颜色整理成少数几个，前面那张表里颜色越少的，越容易做。 插画在一个页面里通常只放一两张，而图标一放就是几十个，遇到的问题又不一样了。 ## 四、图标库 ### 同类图标库列全 开源 SVG 图标库数量多，但主流的就二十来套。我们用 npm 和 Iconify 的数据包装下了其中 23 套，每套取“房子”这个图标放在一起看：
12 套图标库里的房子图标 上排 6 套是描边图标：Lucide、Heroicons、Tabler、Feather、Iconoir、IconPark；下排 6 套是填充图标：Phosphor、Material Symbols、Remix、Bootstrap、MDI、Carbon。每个图标下面标出它的设计网格。 描边（stroke）：画的是线，线宽写在属性里 填充（fill）：画的是轮廓，线宽已经“画死”在形状里 Lucide 24×24 Heroicons 24×24 Tabler 24×24 Feather 24×24 Iconoir 24×24 IconPark 48×48 Phosphor 256×256 Material 960×960 Remix 24×24 Bootstrap 16×16 MDI 24×24 Carbon 32×32
图 4 · 同一个“房子”，网格从 16 到 960、线宽从 1.5 到 2，混用两套图标一眼就能看出来
图里的文件都是各库发布的原样，只去掉了尺寸和注释。12 套用了六种网格（16、24、32、48、256、960），同是 24 网格，Heroicons 和 Iconoir 的线宽是 1.5，Lucide、Tabler、Feather 是 2。**同一个界面里最好只用一套**，否则粗细和圆角会对不上。 完整的 23 套实测数据见下表。“只设 color 变色”和“CSS 改线宽”两列是在 Chromium 里实际渲染、数像素得出来的，具体做法在下一小节讲。
23 套图标库实测（2026-10-28 npm 最新版）
图标库许可数量（主样式）网格 · 画法只设 color 变色CSS 改线宽
描边
LucideISC2,17624 · 线宽 2能能（墨量 −49%）
TablerMIT5,20324 · 线宽 2能能（−45%）
FeatherMIT28724 · 线宽 2能能（−49%）
HeroiconsMIT32424 · 线宽 1.5能能（−33%）
IconoirMIT1,38324 · 线宽 1.5能能（−33%）
IconParkApache-2.02,65848 · 线宽 4能不能
IoniconsMIT1,357512 · 混合能不能
填充
PhosphorMIT1,512 × 6 字重256能—
Remix Icon自定义（2026 起）3,22924能—
Bootstrap IconsMIT2,07816能—
Font Awesome FreeCC BY 4.02,883512能—
Ant DesignMIT8481024能—
game-iconsCC BY 3.04,134512能—
Material SymbolsApache-2.07,874960不能—
MDIApache-2.07,44724不能—
CarbonApache-2.02,63832不能—
Fluent UIMIT20,78616–48 多尺寸不能—
OcticonsMIT78416 / 24不能—
Simple Icons（品牌）CC0 · 商标另算3,46724不能—
彩色 emoji
Fluent Emoji FlatMIT3,17432颜色写死，不参与改色
Noto EmojiApache-2.03,819128颜色写死
TwemojiCC BY 4.04,16936颜色写死
OpenMojiCC BY-SA 4.04,57972颜色写死

数量只算一种样式：Tabler 只算 outline，Material Symbols 只算 outlined（含 -fill 变体），Fluent UI 是全部尺寸的文件数。“不能”变色的那几套，补一行 CSS 就能变，见下文。

图 5 · 23 套图标库里，有 6 套“只设 color 不变色”，只有 5 套能用 CSS 改线宽
### 现象：图标不跟着文字变色 开头那个房子图标怎么设 `color` 都不变色，是因为用的是 ``。我们在 Chromium 里做了一个实验：外层容器写 `color: #ad4f36`，把每套的房子图标分别用 `` 和直接内联两种方式放进去，截图后数红色像素的比例。 结果分成三种： 1. **`` 引用**：23 套全部是黑色，0% 变色。 2. **内联，文件里写了 `currentColor`**：Lucide、Tabler、Phosphor、Remix、Font Awesome 等 13 套 100% 变色。 3. **内联，文件里没写颜色**：Material Symbols、MDI、Carbon、Fluent UI、Octicons、Simple Icons 6 套，依然是黑色。 ### 原因
图标能不能跟着文字变色 用 img 引用的 SVG 是独立文档，页面 CSS 进不去，图标保持黑色；内联且写了 stroke 等于 currentColor 的图标取外层 color，变成红色；内联但没写 fill 的图标默认黑色，补一行 svg 的 fill 等于 currentColor 才变色。 ① 用 <img> 引用 ② 内联，写了 currentColor ③ 内联，没写 fill <img src="house.svg"> .nav { color: #ad4f36; } <svg fill="none" stroke="currentColor"> .nav { color: #ad4f36; } <svg viewBox="0 0 24 24"> <path d="M12 3L2 12…"/> svg { fill: currentColor } 23 套全部不变色 Lucide、Tabler、Remix 等 13 套 补 CSS 前 补 CSS 后 图片是独立文档， 页面的 CSS 进不去 currentColor 取的就是 外层元素的 color 没写 fill 时默认黑色， Material、MDI 等 6 套如此
图 6 · 图标能不能跟着文字变色，取决于引用方式和文件里有没有写 currentColor
`` 引用的 SVG 是一个独立的文档，页面上的 CSS 进不到它里面去，所以第一种情况无论怎么写都不会变色，想换颜色只能换文件，或者改用 CSS 的 `mask-image`。内联以后，SVG 成了页面 DOM 的一部分，`currentColor` 这个关键字取的就是外层元素的 `color` 值[^currentcolor]。至于第三种，文件里压根没有 `fill` 属性，按 SVG 的默认值就是黑色；它并不是“改不了”，只是要在页面里补一行 `svg { fill: currentColor }`，补上以后同样 100% 变色。 ### 线宽和体积 描边图标还有一个好处：**线宽可以用 CSS 改**。我们给内联的 svg 根元素加了一行 `stroke-width: 1`，再数一次墨量：Lucide、Feather 少了 49%，Tabler 少了 45%，Heroicons 和 Iconoir 少了 33%，图标都变细了。IconPark 和 Ionicons 却没有变化，因为它们把 `stroke-width` 写在了内部的 `` 或 `` 上，内部元素自己的属性优先于从根元素继承来的值。 单个图标的体积都很小。Feather 平均 379 字节，Lucide 485 字节，Tabler 559 字节，用 svgo 再压一次能少 10% 到 40%。Font Awesome 每个文件多出一行许可注释，平均 920 字节；这行注释正好满足了 CC BY 的署名要求，压缩时别把它删掉。 ### 怎么选 如果界面需要跟着主题变色、还想统一调线宽，描边的 Lucide[^lucide] 和 Tabler[^tabler] 最省心：许可宽松，数量够多，文件就是纯 SVG，不依赖任何前端框架，Go 的模板里直接内联也行。需要多种粗细的，Phosphor 一套六种字重[^phosphor]；需要和 Android、Google 系产品风格一致的，选 Material Symbols[^material]，记得补那行 `fill: currentColor`。品牌 logo 用 Simple Icons，文件是 CC0，但 logo 本身是各家的商标，只能用来指代那个品牌[^simpleicons]。Font Awesome Free[^fontawesome] 和 game-icons[^gameicons] 是 CC BY，用了就要署名。 给 AI 当参照，也是描边图标库最合适：它的规格就是几个数字（24 网格、线宽 2、圆角线端），量得出来，也查得出来。第八节就用 Lucide 做这件事。 图标和插画之外，网页上还有一类 SVG 用得很多：背景。 ## 五、图案与背景 背景图案有两种来源。一种是现成的平铺图案，代表是 Hero Patterns：87 个图案，每个都是一个只有一种填充色 `#000` 的 path，中位数 485 字节[^heropatterns]。网站上选好前景色和背景色以后，它做的事情就是把 `#000` 换成你选的颜色，再整段塞进 CSS 的 `background-image: url("data:image/svg+xml,…")`。最大的 Topography 图案也只有 91,567 字节。它的许可是 CC BY 4.0，使用时要署名[^ccby]。 另一种是生成器。Haikei 能现场生成波浪、斑点、分层山峰等背景，免费且不用注册，但我们没找到它单独的许可页[^haikei]；fffuel 的一系列生成器明确写了生成的图片可以商用、不用署名，只是不能把图片本身拿去转售或再分发[^fffuel]；SVG Backgrounds 的免费素材要署名，订阅后才能去掉[^svgbackgrounds]。 生成器和现成素材相比，有个不显眼的好处：每次输出的都不一样，不会出现“三个网站用着同一张背景”的撞图。 ## 六、聚合站与开放图库 前面几节的资源都来自“一个作者或一个团队画的一套”。当这些套里都找不到想要的图时，就会用到聚合站，而聚合站的问题前面已经看到了：许可要逐个看。 - **Iconify**：244 套、41 万多个图标，每套都有明确的许可字段，搜索时可以按许可筛选，也可以通过 API 直接取 SVG[^iconify]。它的周边工具 Icônes 是一个很好用的检索界面。 - **SVG Repo**：图标和插画混在一起，每个文件页标着自己的许可，默认不要求署名，但不同作者的条款不同[^svgrepo]。我们用脚本访问它的许可页和首页，都收到了 429（请求过多），它显然不欢迎批量下载。 - **iconfont.cn**：国内用得最多的图标平台，图标由用户上传。vuepress-theme-hope 的文档专门提醒：商用项目要获得作者授权，上传者也可能上传了版权属于第三方的图标[^themehope]。它的授权说明页需要登录才能看到，我们没能核对原文。 - **Openclipart**：18 万多幅矢量图，全部放入公有领域[^openclipart]。风格不统一，而且大多是 Inkscape 导出的文件，带着大量编辑器元数据：前面表里那张 iso-house 有 359.5 KB、981 个 id，svgo 一压就去掉了一半。 - **Wikimedia Commons**：每个文件的许可不同。Linux 的企鹅 Tux 要求注明作者 Larry Ewing[^commons]。 像 Openclipart 这样的文件不止体积大。它和 Tux 里那上百个 id，被几十个渐变和滤镜引用着，把它们直接内联进页面时，还会碰到一个看不见的坑。 ## 七、放进页面之前的处理 ### 现象 我们做了这样一个实验：在同一个页面里先内联那张 unDraw 的 business-chart，再内联一个用 svgo 压缩过的 Tux，然后和单独渲染的 Tux 逐像素比较。结果有 1,674 个像素不一样，企鹅脚掌的阴影没了。 ### 原因
两张内联 SVG 的 id 冲突 页面里先出现 unDraw 插画的 linearGradient id a，再出现 Tux 的 linearGradient id a。Tux 的另一个渐变 ac 通过 xlink:href 指向 #a，浏览器按文档顺序取到了 unDraw 的灰色渐变，Tux 脚掌的阴影因此丢失。加上 prefixIds 后 id 改名，差异为 0。 同一个页面的 DOM：先内联 unDraw，再内联 svgo 压过的 Tux 第 1 张 · unDraw business-chart <linearGradient id="a"> stop-color="gray" stop-opacity="0.251" 第 2 张 · Tux svgo 后 <linearGradient id="a"> 后出现，没人用到 <linearGradient id="ac" xlink:href="#a"> 继承 a 的色标 fill="url(#ac)" 脚掌 一个页面只有一个 id 命名空间，#a 按文档顺序找到的是第一张图里的那个 a。 svgo 会把 id 缩短成 a、b、c，压过的两张图几乎一定撞名。 与单独渲染相比：1,674 个像素不同　→　加 prefixIds 后（id 变成 tux__…）：0 个
图 7 · 两张内联 SVG 里都有 id="a"，后一张的引用会指到前一张去
SVG 内联以后，它的 id 和页面上其他元素共用一个命名空间。Tux 里有个渐变 `ac`，自己不写色标，而是用 `xlink:href="#a"` 继承渐变 `a` 的色标；浏览器按文档顺序找 `#a`，先找到的是 unDraw 那张图里的灰色半透明渐变，于是脚掌的金黄色阴影变成了几乎透明的灰。 更麻烦的是，这个冲突往往是“压缩”造成的。unDraw 的文件本身就只有一个 `id="a"`；svgo 默认会把 id 缩短成 a、b、c 这样的短名，两张都压过的图放在一起，几乎一定撞名。 ### 解决 svgo 有一个 `prefixIds` 插件，给每个文件的 id 和引用统一加上前缀[^svgo]。给 Tux 加上前缀 `tux` 再做同样的实验，差异是 0 个像素。另一种办法是退回 `` 引用：图片是独立文档，id 互不干扰，代价是上一节说的不能跟着文字变色。 所以一张下载来的 SVG 放进页面之前，大致要过三关：用 svgo 去掉编辑器元数据（Sketch、Inkscape 导出的文件通常能少一半，unDraw 这种已经很干净的只少 12%–19%）；内联时加 id 前缀；有深色模式的站，再把关键颜色换成 CSS 类。 交给 AI 之前，第一关同样要过。Humaaans 那张 79.6 KB 的原文件，按每 3–4 个字符一个 token 粗估要两万多 token，其中大半是图层名和编辑器元数据，对“学风格”毫无帮助；压过以后是 31.0 KB。图标就没有这个问题，一个 Lucide 图标不到 500 字节。 文件处理干净了，最后回到开头的目的：怎么把这些 SVG 交给 AI，让它画得更好。 ## 八、给 AI 画图找参照 ### 参照不是素材 先做一个最直接的尝试：让 Claude “按 Lucide 的风格画一个云上传图标”。它给出的三条路径里，箭头的两条 `M12 13v8`、`m8 17 4-4 4 4` 和 Lucide 自带的 cloud-upload 一字不差，云朵轮廓也只差在小数位（`4.2 15.1` 对 `4 14.899`）。 为什么会这样？Lucide 这类热门开源图标库在网上被转载过无数次，模型早就“记住”了它们。要画的东西参照库里已经有，AI 交出来的就是复刻，不是新画的。 这说明了两件事。第一，**搜到现成的就直接用**：许可允许，现成的图标总比重画的好，不必让 AI 再画一遍。第二，只有参照库里没有的东西才需要 AI 画，而这时参照的作用是给出 baseline，不是提供素材：网格、线宽、圆角和留白向它看齐，画完以后拿它来对照，形状要是新的。 ### 边搜边用 参照最好不是事先备好的一个文件夹，而是**画什么就搜什么**。以“一张图片挂着许可吊牌”这个图标为例，Lucide 里没有现成的，于是让 AI 先把它拆成单个名词：图片、吊牌、许可，再到同一套图标里一个个搜。 搜索用的是 Iconify 的接口[^iconifysearch]，它能把搜索限定在一套图标里，还能返回这套图标的许可。我们把它包成一个十几行的脚本 `svg-refs.mjs`，AI 在终端里跑一行命令就能拿到参照： ```text $ node svg-refs.mjs lucide image tag license # Lucide，许可 ISC，网格 24 ## image → image（共 11 个结果） ## tag → tag（共 4 个结果） … ## license：没有搜到 ``` 有两个细节是实际搜了才知道的。一是要按单个词搜：直接搜 “image tag” 一个结果都没有，拆开以后两个词都能搜到。二是 license 在 Lucide 里没有，在 Tabler 里有。这时不要跨库去补，两套图标的线宽和圆角不同，混在一起当参照，AI 学到的风格反而是乱的。 搜到的参照要怎么用，整个流程如下：
边搜参照边画图的流程 把要画的东西拆成图片、吊牌、许可三个词，在 Lucide 里各搜一次，搜到 image 和 tag 两个图标，从中量出一份 baseline 规格，写进 prompt 交给 Claude 生成；输出先用按同一份 baseline 写的脚本检查，再和参照并排渲染对照，差距写成具体的话回到 prompt。 ① 按元素搜参照 ② 量出 baseline ③ 生成 ④ 对照 image 图片 → 1 个 tag 吊牌 → 1 个 license 许可 → 没有 风格规格 viewBox 0 0 24 24 stroke-width 2 linecap round 几何落在 2–22 元素 2–5 个 交叠处留 2 prompt 规格+参照 Claude 写 SVG 第 3 轮的输出 并排渲染 肉眼对照 check-icon.cjs ✓ 根元素 6 项 ✓ 无 id、defs ✓ 5 个元素 ✓ x 3–21 y 3–21 虚线：这套里没有 同一份规格写进 prompt，也是第四步检查的标准
图 8 · 画什么就搜什么：搜到的参照给出 baseline，写进 prompt，也拿来验收输出
### prompt 的写法 拿到参照以后，prompt 要回答四个问题：参照是什么、从参照里学什么、画什么、画完怎么验收。下面是这个例子实际用的 prompt： ```text 你要用 SVG 代码画一个 24×24 的界面图标：一张图片（方框里有太阳和山）， 右上角挂着一枚许可吊牌，表示“这张图带授权信息”。Lucide 里没有这个图标。 【一、搜参照】 1. 把要画的东西拆成单个名词：image、tag、license。 2. 在同一套图标里搜：node svg-refs.mjs lucide image tag license 3. 只用搜到的结果。某个词没搜到，不要去别的图标库补。 4. 参照只用来对齐风格和质量：网格、线宽、圆角、留白、元素数量。 不要复用参照的形状，交付的必须是新的组合。 【二、先量规格，写出来再画】 从参照里量出并写下：viewBox、线宽、线端和拐角、图形占用的范围、 元素个数、两个图形交叠时怎么处理、小圆点怎么画。 【三、画】 - 根元素只写 xmlns、viewBox 和描边属性，不写 width/height - 不写 id、class、style；不用 defs、渐变、滤镜、image、text - 颜色只用 currentColor - 只输出一段 … 【四、对照】 运行 node check-icon.cjs out.svg；再把输出和参照并排渲染成 PNG， 线与线的间距、图形的轻重要和参照一致。不一致就写出具体差距，再改一版。 ``` 第二步要求 AI 先把规格写出来，是因为“学风格”太含糊。这一次 Claude 写下的规格是：viewBox 0 0 24 24；`fill="none"`、`stroke-width="2"`、线端和拐角都是圆的；几何落在 2–22 之间；转角半径 2；2–5 个元素；两个图形交叠时，下层的线断开、留出约 2 的空隙；小圆点用 `r=".5"` 加实心填充（照 tag 的孔）。写出来的规格就是 baseline，既约束这一次的绘制，也是第四步检查的标准。 ### 渲染对照 第一轮的输出能通过规格检查，但和参照放在一起渲染，问题就出来了：
参照图标和两轮生成结果 左边是搜到的两个参照：Lucide 的 image 和 tag；中间是第 1 轮生成的“带许可吊牌的图片”，吊牌下角和山的斜线挤在一起；右边是第 3 轮，吊牌缩小、边框断开，线与线之间都留出了空隙。两轮都通过了脚本检查。 搜到的参照 · Lucide（ISC，原样） 第 1 轮 第 3 轮 image tag 吊牌下角和山的斜线 挤在一起 吊牌缩小，边框断开， 线与线之间都留出空隙 学网格、线宽、圆角和留白，不复用形状 脚本检查 12 / 12 通过 脚本检查 12 / 12 通过
图 9 · 两轮都通过了规格检查，拥挤只有和参照并排渲染才看得出来
吊牌下角和山的斜线之间的距离不到 1，挤成一团，这在只看代码时是发现不了的。于是把差距写成具体的话交回去：“吊牌缩小到右上角约 9×9 的范围，图片边框在吊牌处断开，山的斜线终点左移，任何两条线之间至少留 2。”第二轮间距正常了，但吊牌上的孔贴着边；第三轮只挪了孔的位置。 检查脚本 `check-icon.cjs` 只有几十行，逐项对照规格：根元素的 6 个描边属性、有没有 id 和 defs、元素个数，以及在浏览器里用 `getBBox` 量出的图形范围。三轮输出都是 12 项全过。拿同一个脚本去查 MDI 的 home-outline，12 项里有 7 项不通过，因为它是另一套“填充”风格的图标。**脚本挡住的是风格跑偏，并排渲染挡住的是质量问题**，两者缺一不可。 ### 插画的参照 插画的参照没法这样量得一清二楚，做法要变一变。插画没有 Iconify 这样统一的搜索接口；Openclipart 和 Wikimedia Commons 虽然能搜，许可也写在每个文件上，但我们从云端调 Wikimedia 的接口，第一次请求就收到了 429。更实际的办法是事先备一小批许可宽松、颜色少的插画（比如 Open Doodles、Open Peeps），压缩后存在本地，AI 画图时按文件名搜。 交给 AI 时，参照只给一两张压缩过的小文件，再把风格写成规格：几种颜色、各自管什么（线条、主色、灰阶），线宽多少，构图怎么留白。本站的配图规则 `.claude/skills/blog-diagram/SKILL.md` 就是这样一份规格：配色变量表、样式类名、4px 网格、卡片和行的高度、出图前的检查清单，每次让 AI 画图都会先读它。 ## 九、按场景选资源 把前面几节的结论按用途收拢一下：
按场景选资源
要做什么先看理由和注意
文章头图、空状态、落地页unDraw、Open Doodles、Open Peeps颜色少，改一个色值就能配上站点主题；后两者 CC0。unDraw 不能批量抓取、不能用于 AI 训练
需要拼装多样的人物Humaaans、Blush可拼装，但颜色多，深色模式下要垫底
界面图标Lucide、Tabler描边、currentColor、能改线宽，ISC / MIT
需要多种字重或 Google 风格Phosphor、Material SymbolsMaterial 要补 fill: currentColor
品牌 logoSimple Icons文件 CC0，logo 是商标，只用来指代品牌
背景纹样Hero Patterns、fffuel、HaikeiHero Patterns 要署名；生成器不撞图
找冷门图标Iconify（Icônes）先按许可筛选，避开 NC 和 SA
给 AI 画图当参照Lucide、Tabler（按词搜）；Open Doodles、Open Peeps规格能量化，许可宽松；避开写了 AI 禁令的 unDraw、DrawKit
要正规商用、不想看条款付费：Storyset / Icons8 订阅付费后免署名、给 SVG
图 10 · 按用途选，先定许可，再看文件能不能改成自己的配色
回到开头那三个问题。紫色的 unDraw 插画，替换一个色值 `#6c63ff` 就能配上本站的暖色；深色模式下看不见的 Open Peeps 线条，要么垫一块浅色底，要么把 `#000` 换成 CSS 类；`` 引用的房子图标不变色，是因为图片是独立文档，换成内联、再确认文件里有 `currentColor` 就好。 至于本站的配图，还是会继续让 AI 来画。现成素材解决的是“快速有一张好看的图”，而本站的头图要按文章内容定风格、要跟着深色模式切换、要配上文中的真实数字，这三件事现成素材都做不到。找来的 SVG 在这里的角色是参照：画什么就搜什么，搜到现成的、许可允许就直接用；搜不到，就把搜到的近邻当 baseline，让 AI 对齐它的规格画出新的，画完再和它并排对照。 ## 小结 1. **SVG 资源分几类？** 插画、图标、图案与背景、聚合站和开放图库四类，评判标准各不相同。 2. **“免费”是什么意思？** 至少六种：CC0、宽松开源、CC BY、相同方式共享、站点自定义许可、免费增值。自定义许可的禁止项（不能再分发、不能 AI 训练、不能当商标）最容易被忽略，许可还会变，要看许可文件本身。给 AI 当参照的素材，避开 unDraw、DrawKit 这类写了 AI 禁令的站。 3. **插画差在哪？** 风格之外，主要差在颜色数和文件冗余。unDraw 一个主色出现 30 次，换一个色值就能改主题；Humaaans 26 种颜色只能进设计软件；写死的黑线在深色模式下对比度只有 1.1:1。 4. **图标为什么有的不变色？** `` 引用的一律不变；内联时写了 `currentColor` 的跟着 `color` 走，没写 fill 的要补 `svg { fill: currentColor }`。描边图标里只有线宽写在根元素上的 5 套能用 CSS 改线宽。 5. **聚合站要注意什么？** 许可按套或按文件看。Iconify 里约 23% 的图标要署名或带附加条款；iconfont.cn 的图标由用户上传，商用要作者授权。 6. **放进页面前做什么？** svgo 压缩；内联时用 `prefixIds` 加 id 前缀，否则两张图里的 `id="a"` 会互相串，实验里 Tux 有 1,674 个像素被改；有深色模式的话把关键颜色换成 CSS 类。 7. **怎么给 AI 当参照？** 参照是 baseline，不是素材。画什么就按单个名词在同一套图标里搜，搜到现成的就直接用；搜不到的才让 AI 画，prompt 里写清参照、先量出规格、再画、再对照。热门图标库 AI 早就记住了，让它画库里已有的东西，交出来的就是复刻。规格检查挡住风格跑偏，并排渲染挡住质量问题。 ## 参考资料