SVG 使用指南

从下载、嵌入到改色与商用，一步步了解如何使用本站的矢量素材。

一、下载与格式

每张素材的详情页都有「下载 SVG」和「下载 PNG」按钮。SVG 是矢量原文件，可无限放大而始终清晰，适合网页与设计稿；PNG 是位图预览，适合没法直接用 SVG 的场景。

全部素材免费下载，无需注册登录。下载前建议看一眼详情页的「作者 / 许可」，方便你记录归属与授权范围。

二、嵌入网页

有两种常用方式，二选一即可：

方式 A：内联 SVG（推荐）

在详情页点「复制 SVG」，把代码直接粘贴到 HTML 中。内联后可用 CSS 控制颜色与尺寸，也方便后续微调。

<!-- 把复制的 SVG 直接贴进来 -->\n

方式 B：引用文件

把 SVG 保存到项目目录，再用 img 引用；它同样保持清晰，也可作为 CSS 背景图。

<img src="assets/home.svg" alt="home" width="24" height="24">

提示：详情页的 SVG 地址也可直接用于 img / background 的 src。

三、改色与调整

本站多数图标用 currentColor 填充。内联后，只要给父元素设置 CSS color，整组图标就会随之变色，并跟随文字 / 暗色主题自动适配。

.ic { color: #2F7D46; }          /* 让容器内所有 currentColor 图标变绿 */\nbutton:hover .ic { color: #fff; }  /* 悬停时再变白 */

大小用 width / height 或 font-size 控制即可，矢量放大缩小永不模糊。要改局部颜色或结构时，把 SVG 存到本地，用 Figma / Illustrator / Inkscape 等矢量软件编辑 fill 与 stroke。

四、商业使用与许可

素材来自开源 / 开放许可集合。多数（如 MIT、Apache-2.0、CC0）允许免费商用与修改；个别（如 CC BY）需要署名或附带相同条件——每张素材详情页都标注了它确切适用的许可。

品牌 Logo 类素材请额外注意：即便文件许可宽松，商标权仍属于原权利人，请勿用于会误导来源的用途（仿冒、伪造官方等）。

查看许可说明页 →

常见操作示例

<!-- 单色图标随文字变色：把 svg 放进带 .ic 的元素 -->\n<span class="ic">\n  <svg viewBox="0 0 24 24" fill="currentColor">…</svg>\n</span>\n\n.ic { display:inline-flex; color:#2F7D46; }\n.ic svg { width:1em; height:1em; }

去图库挑选素材 →