位图 vs 矢量图
图片分两类：
- 位图（JPEG/PNG/WebP）：由像素点组成，放大到一定程度会模糊出马赛克
- 矢量图（SVG）：由数学路径描述，无论放大多少倍都清晰
理解这个本质区别，就知道 SVG 适合什么场景了。
SVG 的核心优势
无限缩放不失真
SVG 用路径、曲线、形状描述图形，不是像素。放大到任何尺寸都锐利清晰，不会出现马赛克。这是 SVG 最大的优势，特别适合需要多尺寸使用的图标、logo。
体积小（针对简单图形）
简单的图标、logo，SVG 文件比同等 PNG 小很多。一个简洁 logo PNG 可能几 KB 到几十 KB，SVG 可能只有 1~2 KB。但复杂的照片类图 SVG 不适用。
可被代码编辑
SVG 本质是 XML 文本，能用文本编辑器直接改颜色、形状、文字。前端可以用 CSS 控制颜色、用 JS 动态修改，这是位图做不到的。
支持动画
SVG 支持内置动画和 CSS/JS 动画。loading 动画、图标动效用 SVG 实现轻量又流畅。
可被搜索和索引
SVG 里的文字是真实文本，能被搜索引擎索引、被无障碍阅读器读取，比图片里的文字更友好。
SVG 适合什么
- 图标：导航图标、功能图标，UI 设计首选
- Logo：品牌 logo 需要多尺寸使用，矢量最合适
- 插画：扁平化插画、装饰图形
- 图表：数据可视化图表用矢量，缩放清晰
- 字体图标：图标字体本质是 SVG
SVG 不适合什么
- 照片：照片色彩丰富、细节多，用矢量描述体积爆炸且失真。照片用 JPEG/WebP
- 复杂渐变、纹理：过度复杂的渐变和纹理，SVG 体积大，不如位图
- 需要滤镜效果：复杂滤镜效果位图更高效
SVG 的局限
兼容性边角问题
现代浏览器全面支持 SVG，但部分老旧环境、部分邮件客户端对 SVG 支持不好。重要场景测试一下。
复杂图体积反而大
照片类转 SVG 会极其庞大且失真。SVG 不是万能的，只适合矢量图形。
学习成本
设计 SVG 需要矢量绘图技能，不像位图能拍照得到。但用现成 SVG 资源或位图转 SVG 工具能降低门槛。
位图转 SVG
位图（如 PNG）转 SVG 是"描摹"过程——工具识别图片里的形状边界，生成近似的矢量路径。
用 图片转 SVG 工具：
- 上传位图（建议简洁、高对比的图，如 logo）
- 工具描摹生成 SVG
- 下载 SVG
转换的注意
- 简单图形（logo、图标）转 SVG 效果好
- 照片、复杂图转 SVG 会失真且体积大，不建议
- 转换后检查边缘是否平滑、颜色是否准确
- 转完的 SVG 可用文本编辑器进一步优化
SVG 使用建议
内联进 HTML
小 SVG 直接内联进 HTML，省 HTTP 请求，还能用 CSS 控制。
用 currentColor 做图标
图标 SVG 用 currentColor 填充，CSS 改 color 就能改图标颜色，一套图标多色复用。
压缩 SVG
SVG 是文本，能用工具压缩（去掉注释、精简路径）。上线前压缩减小体积。
小结
SVG 的核心是"矢量、可缩放、可编辑"。图标、logo、插画、图表用 SVG 最佳，照片用位图。位图转 SVG 适合简单图形。DocsAll 转 SVG 工具浏览器端处理，一键把位图 logo 转矢量，方便后续多尺寸使用。