SVG 是什么，为什么设计师都在用

SVG（Scalable Vector Graphics）是用 XML 描述图形的矢量格式。它不记录「这一格是什么颜色」，而是记录「从这点到那点画一条线、填什么色」，所以放大十倍、投到大屏、印到展板上都不会出现像素格。对做界面的人来说，它更重要的价值是：一份文件既能当图片，也能当代码改。

本文目录

• 和 PNG / JPG 到底差在哪
• 看懂一个 SVG 文件
• 三种放进网页的方式，决定你能改多少
• 在 ATSvg 上怎么挑

和 PNG / JPG 到底差在哪

位图存的是像素矩阵，尺寸一变就要重新导出；SVG 存的是路径，尺寸由浏览器按 viewBox 实时计算。同一个简单的线性图标，PNG 要准备 1x/2x/3x 三份，SVG 只要一份，且文件常常只有几百字节。代价是：复杂照片、渐变纹理、真实光影并不适合用 SVG 表达，那类内容还是位图更合适。

• 无损缩放：同一文件用在 16px 图标和 300px 海报
• 可改色：把 fill / stroke 改成 currentColor 就跟随文字颜色
• 可被 CSS 与脚本控制：悬停变色、描边动画、主题切换
• 体积可控：路径精简后通常比同尺寸 PNG 更小
• 可访问：能写 title / desc，读屏能读到含义

看懂一个 SVG 文件

打开任意一份图标文件，通常只有几行：外层 svg 定义 viewBox（内部坐标系），里面是一条或几条 path / circle / rect。viewBox="0 0 24 24" 意思是图形画在 24×24 的网格里，显示尺寸由 width / height 或外部 CSS 决定。改颜色时找 fill（填充）和 stroke（描边）两个属性就够了。

<svg viewBox="0 0 24 24" width="24" height="24" fill="none"
     stroke="currentColor" stroke-width="2">
  <path d="M5 12h14M13 6l6 6-6 6"/>
</svg>

三种放进网页的方式，决定你能改多少

用 img 标签引用外部 .svg：最省事、浏览器会缓存，但页面 CSS 管不到文件内部，currentColor 也不会继承。把 SVG 代码直接内联进 HTML：可以完整用 CSS 变量、伪类和动画控制，代价是 HTML 变长、无法单独缓存。第三种是当作 CSS mask 使用：外部文件仍能缓存，颜色由 background-color 决定，但只保留形状、丢掉内部多色。

• img 引用：适合列表里重复出现、不需要变色的图标
• 内联 SVG：适合按钮、状态图标等需要跟随主题的少数图标
• CSS mask：适合需要单色化、又想保留外部缓存的一套图标

在 ATSvg 上怎么挑

站内每个素材详情页都标了尺寸、线型和许可。做产品界面优先看 24×24 的线性或填充图标，并且尽量一次从同一个素材库里挑齐；做大图配图再去看插画与剪贴画。挑好后可以直接下载 SVG，也可以用站内的 SVG 转 PNG 工具导出位图版本。

常见问题

← 返回全部使用指南　·　许可与使用常见问题 →