跳到内容
SVG Nexus / EXPLAINER 无需注册登录 | 100% 浏览器本地处理

什么是 SVG?

SVG(可缩放矢量图形)是图标、徽标和插画的浏览器原生格式:XML 代码在任何尺寸下都保持清晰,改色只需一个属性。

一分钟看懂 SVG

SVG 文件是纯文本。可以在浏览器、文本编辑器或设计工具里打开,像 HTML 一样阅读,改色、改尺寸、改形状都不损失画质。这就是界面、徽标和按钮以矢量交付的原因。

SVG Nexus 收录开源 SVG 图标库与插画,可直接搜索、改色,并把可用代码复制进 React、Vue、HTML、CSS 或设计工具。无需账号,无需上传。

无限缩放

路径是数学而非像素:同一个文件作为 16px 图标、视网膜徽标或 4K 图形都保持清晰。

一个属性改色

改一次 fill 或 stroke,整个图形跟着变。CSS 关键帧与悬停态在内联 SVG 上无需 JavaScript。

文本保持轻量

图标可压缩到几 KB,经 gzip 从任何服务器高效分发,并且对搜索引擎和屏幕阅读器保持可读。

为任意技术栈复制 SVG 代码

查看所有工具

目录中的每个页面和上传的每个 SVG 都会在浏览器工具里打开,并把矢量代码改写成你的框架所需:JSX、Vue、Svelte、CSS、data URI、PNG 导出和 sprite。

按主题查找 SVG 图标

查看所有分类

目录将图标按主题分组:交通、金融、医疗、天气、节日等。打开任一主题,数秒内就能浏览并复制匹配的矢量。

SVG 还是 PNG?

需要缩放和改色的图标与界面图形用 SVG;照片级细节、社交预览或会栅格化的平台导出 PNG 或 WebP。本站工具可从同一源文件输出两种格式。

可免费商用

每行图标都标注来源库与许可证。MIT、ISC、Apache-2.0 系列适合商用产品;品牌徽标按其自有规则处理,详情见许可证表。

开源许可 →

SVG 常见问题

SVG 比 PNG 更好吗?

对于图标、徽标和界面美术,是的:SVG 保存绘制指令而非像素,因此能缩放、改色且更轻。PNG 在详细位图导出时仍很实用。

如何打开并编辑 SVG 文件?

把它拖进浏览器、任何文本编辑器或设计工具。SVG Nexus Studio 直接在浏览器中打开,编辑颜色、图层和路径无需安装任何东西。

图标可以商用吗?

这里的开源库以 MIT、ISC、Apache-2.0 等允许商用的许可证发布。每个图标页都会注明确切许可证;品牌徽标另有附加规则。

为什么我的 SVG 看起来模糊?

SVG 模糊通常是过早转成位图,或按错误的视口尺寸导出。保持矢量到最后渲染一步,或从原文件重新导出。

从 SVG 素材开始

在目录中搜索,在浏览器 Studio 中打开素材,并输出干净的矢量代码:图标、徽标、插画以及重塑它们的工具。

输入内容以搜索 76,166 个矢量图标...

方向键移动 | Enter 打开 浏览全部图标

对比

图标来源与许可

许可 商业使用 署名 修改与改色
MIT允许包内附通知允许
ISC允许包内附通知允许
Apache-2.0允许需附通知文件允许
CC BY 4.0允许必须署名允许
CC-BY-SA-4.0允许相同方式共享相同方式共享
Trademark / Brand仅限指代性使用持有者规范受限

图标预览