SVG 矢量图
SVG
初级通用SVG（可缩放矢量图形）是用代码描述图形的格式：一条路线、一个圆、一段文字，都写成「从哪画到哪、什么颜色」。它放多大都清晰，每个形状都是页面上的真实元素，可以点击、改颜色、做动画。图标、Logo、示意图和图表最常用它。
你可能会说：「网站的图标放大就糊，切到深色模式还看不清，有没有放多大都清楚、还能跟着主题变色的格式？」
读之前建议先了解
动手看看一张能点的路线图
要点SVG 是怎样起作用的？
- 1
存的是形状，不是像素
PNG、JPG 存的是一格一格的像素，放大就是把格子拉大。SVG 存的是 <path>、<circle>、<text> 这样的形状描述，浏览器按当前显示大小现场画出来，所以在高分屏上、放大几倍都清晰。viewBox 定义了图形自己的坐标系，图形放到多大的区域里都会按比例缩放。
- 2
每个形状都是页面元素
直接写在 HTML 里的 SVG，里面的每个形状和 div 一样是真实的元素：可以绑定点击、加悬停样式、用 CSS 改颜色，读屏软件也能读到里面的文字和标题。图标的颜色写成 currentColor，就会自动跟随外面的文字颜色，切换深浅主题时不用准备两套图标。把颜色写死，深色模式下深色图标就看不见了。
- 3
描边动画
把路径的虚线（stroke-dasharray）设成一整段和路径一样长，再让偏移量（stroke-dashoffset）从全长变到 0，路径就像被一笔一笔画出来。给路径加上 pathLength="1"，可以把长度统一成 1，不用再去量路径到底多长。签名、路线图、Logo 出场常用这个效果。
容易混淆的地方
SVG 和 Canvas 都能画图：SVG 的形状是页面元素，适合数量不多、需要交互和清晰度的图形；Canvas 是一块像素画布，适合成千上万个元素的动画。SVG 也不适合照片：照片是连续的颜色变化，用矢量描述反而又大又难看，照片用 JPG、WebP。用 <img> 引入的 SVG 文件能保持清晰，但里面的元素不能再用页面的 CSS 改色或绑定点击。
什么时候用
适合用
- 网站的图标和 Logo，需要在各种屏幕上清晰，并跟随深浅主题变色。
- 流程图、路线图、架构示意图，需要点击某个节点查看详情。
- 官网的签名或 Logo 出场动画，用描边动画一笔画出来。
不适合用
- 产品照片、用户头像这类真实图片，别转成 SVG；用 JPG 或 WebP。
- 上千个元素每帧都在动的粒子效果，别用 SVG；元素太多会卡，用 Canvas。
- 用户上传的 SVG 文件，别直接插进页面里显示；它可能带脚本，要先清理或用 <img> 引入。
练一练选一个答案，看看解释
你的网站有浅色和深色两套主题，导航栏的图标在深色主题下几乎看不见。最合适的改法是？
让 AI 帮你做复制给 AI Agent 直接用
请检查【项目里的图标和示意图，如：导航栏和功能介绍区的图标】是否正确使用 SVG。先列出这些图标现在是 PNG、字体图标还是 SVG，以及颜色是怎么设置的，确认项目里已有的图标库。要求：图标改用内联 SVG 或现有图标库，保留 viewBox，填充和描边用 currentColor 跟随文字颜色；纯装饰的图标加 aria-hidden，有含义的图标提供可读名称；不要直接把用户上传的 SVG 插进页面。沿用现有组件写法，不改无关代码。最后说明怎样验证：放大到 300% 时图标清晰，切换深色主题时颜色正确。