SVG图标生成器

SVG 图标生成器可以快速做出一个最简单的几何图标:选一个形状(圆形、方形、三角形或六边形),设置背景色、图形颜色和背景圆角,就能得到一段 SVG 代码,既可以复制,也可以下载成 icon.svg 文件。它做的是「纯色背景 + 一个居中的纯色图形」这一种极简风格,适合当占位图标、网站 favicon 的草稿或简单的标记。它不能画自定义路径、不能加文字或图标字形,也不是通用的矢量绘图工具。

操作步骤

1. 页面最上方是实时预览。每次改动下面的任何设置,预览都会立刻更新。
2. 在「形状」里点击四个按钮之一:圆形、方形、三角形、六边形(英文界面显示为 Circle、Square、Triangle、Hexagon)。
3. 用「背景色」和「图形颜色」两个取色器选择颜色。颜色以十六进制保存,默认是深绿色背景(#2F5D50)和白色图形(#FFFFFF)。
4. 拖动「背景圆角」滑块调整背景的圆角,范围是 0 到 100 像素,旁边会显示当前数值。
5. 满意后点击「复制SVG代码」把代码复制到剪贴板(成功后显示「已复制」),或点击「下载SVG文件」保存为 icon.svg。按钮下方的只读文本框会实时显示同一份 SVG 代码,可以直接查看。

生成的代码长什么样

下面这些是用工具自己的生成函数实际跑出来的结果。默认设置(圆形、背景 #2F5D50、图形 #FFFFFF、圆角 24)生成的是:一个 200×200 的 SVG,viewBox 为 0 0 200 200,先画一个圆角 24 的整幅背景矩形,再在中心画一个半径为 60 的圆(也就是画布一半的 60%)。方形会画一个边长 120、从 (40, 40) 开始的方块;三角形的三个顶点是 (100,40)、(40,160) 和 (160,160);六边形的六个顶点依次是 (100.0,36.0)、(155.4,68.0)、(155.4,132.0)、(100.0,164.0)、(44.6,132.0)、(44.6,68.0)。所有尺寸都是写死的:图标总是 200×200,中间的图形总是占画布的大约 60%。因为带有 viewBox,在网页里用 CSS 控制宽高时可以平滑缩放。

支持范围与已知限制

• 只有四种形状,每次只能放一个居中的图形。不支持渐变、描边、阴影、文字、多个图形叠加或自定义路径。
• 图标大小固定为 200×200,没有尺寸设置。需要别的尺寸,可以改下载文件里的 width 和 height,保持 viewBox 不变即可等比缩放。
• 「背景圆角」会作用于整幅背景矩形;当形状是方形时,中心的方块也使用同样的圆角值,所以圆角调得很大时,里面的方块也会变得很圆。圆形、三角形和六边形本身不受圆角影响。圆角拉到最大的 100 时,背景就变成了一个圆。
• 颜色只能通过取色器选择,没有直接输入十六进制或支持透明度的输入框,所以不能做透明背景或半透明图形。
• 页面按钮下方有一个只读文本框显示当前的 SVG 源代码(点击会全选,可手动复制),也可以通过「复制SVG代码」或下载获得;文本框里的内容不能直接编辑,要改动请调整上面的选项。预览按 160 像素缩放显示,导出的文件仍是 200×200。
• 下载的文件名固定是 icon.svg。想要 PNG,需要自己用其他工具把 SVG 转成 PNG;本工具不做光栅化,也不会给你各种 App 图标尺寸。
• 背景色与图形颜色相同时,图形会与背景融在一起看不见,属于正常现象。
• 设置不会保存,刷新页面后恢复默认。

常见问题:SVG 和 PNG 有什么区别?

SVG 是用代码描述的矢量图形,放大缩小都不会模糊,体积也很小,可以直接用于网页、用 CSS 改尺寸。PNG 是由像素组成的位图,放大会模糊。网页图标、简单标志适合用 SVG;而 App 商店图标这类要求固定像素尺寸的场景需要 PNG。

常见问题:怎么把生成的代码放到网页里?

可以把复制的 SVG 代码直接粘贴到 HTML 文件里,它就是一段内联图形;也可以把下载的 icon.svg 保存起来,用 <img src="icon.svg"> 引用。用作网站 favicon 时,可以在 head 里用 link 标签指向这个文件(现代浏览器支持 SVG 格式的 favicon,但个别旧环境不支持)。

常见问题:我可以商用生成的图标吗?

工具生成的只是你自己选择的基本几何形状和颜色,它们没有任何第三方素材的版权问题。是否用作商标或品牌标识,请你自己判断是否有足够的独特性和注册价值,极简几何图形很容易与别人的图标雷同。

常见问题:三角形看起来不居中?

三角形的顶点和底边是按照画布的 20% 到 80% 范围放置的,外接框是居中的,但三角形的视觉重心比几何中心偏下,所以看起来略微下沉。如果你想要更精确的视觉居中,可以下载后手动调整 points 里的数值。

隐私与处理方式

SVG 代码完全在你的浏览器里根据你的选择拼接生成,不会发送到服务器。下载使用浏览器本地创建的临时文件,点击复制只是把代码写入剪贴板。工具没有网络请求,也不会保存你的设计。