企业官网建设流程全解析

搞前端这么多年，有一个东西我逢人就劝：能用矢量图，就别用位图。尤其在做图标、Logo、插画、数据可视化、地图标注这类需求时，SVG 几乎是无脑首选。你要是只会把 PNG 扔进 img 标签，遇到高清屏、换肤、动效、压缩体积这些需求，分分钟被折腾得想摔键盘。SVG 的好处一句话就能说清：它是用数学公式描述出来的图，不是用像素点阵拼出来的图，所以不管你放大到多少倍，边缘永远是清晰的，体积还能做到极小。

这篇文章我打算把 SVG 从基础语法到实际项目里的常见玩法完整过一遍，包括 viewBox 坐标体系、path 路径系统、前端动效实现、图标封装、性能优化和资源获取这几个重点。不管你是刚接触前端的新人，还是写过几年业务代码但一直没认真研究过 SVG 的老油条，都会有用。

1. SVG 到底是什么，为什么它比 PNG 更适合做界面图形

1.1 SVG 和 PNG、JPEG 的本质区别

要理解 SVG，先记住一件事：PNG、JPEG、WebP 都是位图，它们记录的是“每个像素点的颜色值”。一张 100x100 的 PNG 图片，本质就是一个 100x100 的颜色矩阵。这种方式的缺点很明显——放大就糊，因为像素数量不会变，放大只是把每个像素强行拉大。

SVG 的英文全称是 Scalable Vector Graphics，可缩放矢量图形。它用 XML 文本描述图形：先定义一个坐标系，然后用 rect、circle、path 这些标签告诉渲染器“你给我画一个从坐标 (0,0) 到 (100,50) 的矩形，填充红色”。图片内容以代码形式存在，所以 SVG 实际上就是一个文本文件，天然具备几个碾压级优势——

• 无限缩放不糊，高清屏自适应；
• 文件体积小，通常只有 PNG 的十分之一甚至更少；
• 可以用 CSS 和 JavaScript 直接控制颜色、位置、动画；
• 可以内联到 HTML 中，减少 HTTP 请求；
• 支持透明背景，这是做图标的核心需求；
• 可以通过脚本动态生成和修改。

1.2 SVG 也不是万能的，先看清楚适用边界

但我也得说句公道话，SVG 在复杂场景下不如位图。比如说一张照片，色彩连续变化、有大量噪点和光影细节，这种东西你用 SVG 描述，生成的代码会爆炸般复杂，体积反而远大于 JPEG。SVG 的定位是设计感强、色彩区块清晰、几何结构明确的图形，比如 Logo、图标、图表、插画、字体、地图路径。做这类需求时它最舒服。

还有一个容易踩的坑是兼容性。以前老 IE 兼容是个大问题，现在基本上不用操心了，现代浏览器对 SVG 的支持非常完善。但如果你在写 Electron、小程序、或者某些 WebView 容器，还是要先查一下目标环境对 SVG 的支持情况，免得做了白工。

1.3 什么场景下我建议你优先用 SVG

我自己的习惯是这样：业务系统里的所有图标一律用 SVG；涉及图表项目优先看 ECharts 这类基于 Canvas 或 SVG 的库；需要做动画的图形优先 SVG；地图上的标注、路线图、示意图优先 SVG。这些年我经手的后台管理系统里，几乎没有哪种图形需求是 SVG 搞不定的，唯一让我犹豫的场景是大量粒子动效、3D 渲染这种重计算场景，那种确实 Canvas 更合适。

2. SVG 基础语法，从一份最简文件开始

先看一段最简 SVG：

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="100" height="50" fill="#4A90D9" /> </svg>

这就是一个完整的 SVG：在宽 200、高 100 的视区里画了一个 100x50 的蓝色矩形，左上角的坐标是 (10,10)。注意xmlns这个命名空间声明，浏览器靠它识别这是 SVG 文档。如果你忘了写，在某些场景下图形可能无法正常渲染，所以尽量保留。

2.1 理解 viewBox，SVG 里最容易绕晕的概念

很多人一上来就被 viewBox 劝退，其实它非常直白。看这行：

<svg viewBox="0 0 800 600" width="400" height="300">

viewBox 的四个数字分别是：min-x、min-y、width、height。意思是：我画布上有一个 800x600 的虚拟坐标系，这个坐标系会被缩放后塞进 400x300 的实际显示区域。说白了，viewBox 定义了图形的“世界坐标”，width 和 height 定义了“屏幕尺寸”。两者不一致时，SVG 会自动等比缩放（默认情况下如果只给 width，height 会跟着等比）。

这个特性太有用了。做响应式图标时，你只需要把图标按固定 viewBox 画好，然后通过 CSS 只改显示宽度，图标自动缩放，永远不会变形或糊掉。新手最常见的错误是理解反了，把 viewBox 的宽高写得和实际 display 区域不一致，结果图形被拉伸得奇形怪状。记住一句话：viewBox 控制内容的比例，width/height 控制显示的尺寸。

2.2 基础图形，把这些记熟能省一半事

SVG 内置了几类基础图形标签，日常写代码最常用的是这些：

每个图形都支持通用的样式属性：fill（填充色）、stroke（描边色）、stroke-width（描边宽度）、stroke-linecap（线帽样式）、stroke-linejoin（折线连接样式）、opacity（透明度）等。这些样式不光可以直接写在属性里，还能用 CSS 写在 class 里，这是后面做动效的基础。

2.3 基础图形的实操示例

拿一个代表“加载中”状态的简单元素举例：

<svg viewBox="0 0 100 100" width="50" height="50"> <circle cx="50" cy="50" r="40" fill="none" stroke="#E5E7EB" stroke-width="8" /> <path d="M 50 10 A 40 40 0 0 1 90 50" fill="none" stroke="#3B82F6" stroke-width="8" stroke-linecap="round" /> </svg>

这段代码先画了一个浅灰色的圆环作为背景，再画了一截蓝色圆弧作为进度显示。注意圆弧这里用的是path的A命令，不是现成的标签。一旦你开始做复杂图形，碰到的几乎全是d属性那串看着像天书的字符，所以 path 值得单独拿出来好好讲。

3. path 路径系统，看懂这串“天书”你就成功了一半

3.1 path 命令总览

path 的d属性就是一组绘图指令的集合。绘图器就像一个拿着笔的人，你告诉他从哪儿开始、往哪儿画直线、往哪儿画曲线。最常用的命令我整理成了一张表：

全部命令都区分大小写，大写表示绝对坐标，小写表示相对坐标。比如l 10 0的意思是相对当前点向右偏移 10。做复杂图形时，绝对坐标和相对坐标经常会混用，这跟在纸上画图是一个道理，怎么方便怎么来。

3.2 重点聊 C 命令，三次贝塞尔曲线是曲线图形的灵魂

网上搜 SVG 教程，搜得最多的就是svg path c。因为 C 命令是绝大多数复杂曲线的基石。C 命令的完整语法是：

C x1 y1, x2 y2, x y

三个坐标点：第一个控制点(x1, y1)决定了曲线在起点的切线方向，第二个控制点(x2, y2)决定了曲线在终点的切线方向，最后一个(x, y)是终点。起始点就是笔的当前点。

我在解释三次贝塞尔给新手听的时候，最爱用这个类比：曲线不是一笔画出来的，而是被你用两根看不见的“橡皮筋”拽出来的。起点处有一根橡皮筋连到控制点 1，终点处有一根橡皮筋连到控制点 2，真正的曲线就是在这两股拉力的共同作用下弯过去的。控制点离哪一端越远，曲线在那个方向就越“甩”得厉害。

举个例子，下面这段画了一条从 (20,80) 到 (180,20) 的三次贝塞尔曲线：

<svg viewBox="0 0 200 100" width="400" height="200"> <path d="M 20 80 C 40 10, 140 150, 180 20" fill="none" stroke="#3B82F6" stroke-width="3" /> </svg>

两个控制点分别在 (40,10) 和 (140,150)，前者把曲线的起始段往上拽，后者把结束段往下压，整体就形成一条 S 形波浪。想调形状？只动控制点的坐标就行。这就是设计工具导出 SVG 后里面塞满 C 命令的原因——几乎所有平滑的有机形状，都能拆成若干段三次贝塞尔拼接。

3.3 曲线练习：自己手写一个简单的波浪

光看不练还是学不会。我建议你动手画一个最经典的波浪线条，比如做图表里的平滑折线时很有用：

M 0 50 C 25 10 75 90 100 50

如果把这段路径分段拆开看，起点 (0,50)，第一段贝塞尔控制点是 (25,10) 和 (75,90)，终点 (100,50)，画出来是一个向上的波浪。再续下去：

S 175 90 200 50

S 命令会沿 C 命令最后一段的控制点自动镜像出对称的控制点，续出来的曲线自然是平滑连接的。做平滑连续曲线时，C 加 S 是标配组合，这也是手写折线图平滑效果的底层原理。

3.4 遇到“鹈鹕骑车”这类复杂图形怎么拆

网上有个很火的示例需求叫“generate an svg of a pelican riding a bicycle”，翻译过来就是“生成一只骑自行车的鹈鹕”的 SVG。这类需求经常用来考验 AI 生成 SVG 的能力，但实际上不管图形多复杂，落到技术层面都是同一个思路：把它拆成几何部件。鹈鹕的头、嘴、身体、翅膀、车轮、车架，每个部件都是一个或几个 path/circle/rect，再拼到一个 viewBox 里。

你自己手画复杂图形时也用这个思路。先确定整体 viewBox，把每个部件想清楚各自用什么基础图形能画出来，需要曲线的用 C 命令一点点调控制点。熟练之后你会发现，所谓“画图”本质就是“在脑子里把对象拆成几何体，再翻译成 path 命令”。

4. 实战环节，SVG 在前端项目里的高频玩法

4.1 标题扫光效果，一个效果撬动全组同事来问

最近网上一搜 SVG 热词，就能看到“前端 SVG 实现标题扫光效果”这个话题。这个效果很唬人，某大厂官网的标题上经常有一道金属光泽缓缓扫过，你说不上怎么做的，就是觉得高级。它的本质只是一块渐变光带加位移动画。

实现思路是这样：先用 SVG 定义文字形状，再用一个线性渐变作为文字内部的填充色，这个渐变里放一小段白色高光，最后用 CSS 动画让渐变整体水平移动。如果没有 SVG，这个效果很难做，因为普通 CSS 文字没法直接用渐变做描边和高光扫过，而 SVG 的 text 标签天然支持 fill 填充渐变。

核心代码长这样：

<svg class="title-svg" viewBox="0 0 600 100" width="600" height="100"> <defs> <linearGradient id="shine" x1="0" y1="0" x2="1" y2="0"> <stop offset="0%" stop-color="#1E293B" /> <stop offset="40%" stop-color="#1E293B" /> <stop offset="50%" stop-color="#FFFFFF" /> <stop offset="60%" stop-color="#1E293B" /> <stop offset="100%" stop-color="#1E293B" /> </linearGradient> </defs> <text x="20" y="70" font-size="56" font-weight="bold" fill="url(#shine)">SVG 扫光标题</text> </svg>

.title-svg { width: 600px; display: block; }

等等，上面这种方式做的是“静态渐变光带”，要让高光从左往右扫，得让渐变本身动起来。最简单的方法是给 linearGradient 的 x1/x2 添加动画，但大部分浏览器对 gradient 属性的 CSS 动画支持并不统一。我踩过坑后学乖了，项目里常用更稳的方案：用一个绝对定位的半透明白色渐变矩形盖在文字上方，给矩形加水平位移动画，再用 clip-path 裁出文字形状。不过裁剪路径要动态读取文字的 SVG 路径，工程上稍微麻烦一点。

另一个实用做法是直接在 SVG 内部用 SMIL 动画驱动渐变偏移。虽然 SMIL 有点古早，但在 SVG 里做这类动效很可靠，浏览器支持非常好，代码也简洁：

<linearGradient id="shineMove" x1="0" y1="0" x2="1" y2="0"> <stop offset="0%" stop-color="#1E293B"> <animate attributeName="offset" values="0;1;1" dur="3s" repeatCount="indefinite" begin="0s" /> </stop> <stop offset="30%" stop-color="#FFFFFF"> <animate attributeName="offset" values="0.2;1.2;1.2" dur="3s" repeatCount="indefinite" begin="0s" /> </stop> <stop offset="60%" stop-color="#1E293B"> <animate attributeName="offset" values="0.6;1.6;1.6" dur="3s" repeatCount="indefinite" begin="0s" /> </stop> </linearGradient>

核心逻辑就是让渐变里白色 stop 的 offset 周期性地从左边移动到右边。在项目里有过真实体会：这个效果对页面的品质感提升极大，对比普通标题，用户明显觉得这个页面“用了心”。

4.2 SVG 动画，不是非得引入动画库

很多人一提到做动画就想 GSAP、Framer Motion。其实 SVG 自带不少动画手段，先摸清楚再决定要不要上库，很多简单场景根本不用那么重。

第一类是 CSS 动画配合 SVG 属性。比如 stroke-dasharray 和 stroke-dashoffset 搭配可以做出“描边浮现”的效果。原理不复杂：先让虚线段的空档大到盖住所有笔迹，然后用动画逐渐把偏移量归零，看起来就像是一个线条在慢慢地自己画自己。我写过一个制作签名动效的组件，核心代码就是这个：

.draw-path { stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 2s ease forwards; } @keyframes draw { to { stroke-dashoffset: 0; } }

需要注意 stroke-dasharray 的值要大于路径的实际长度，不然动画会出现停顿或者画不完。路径多长怎么知道？可以用path.getTotalLength()在控制台打印出来，一劳永逸。

第二类是 SMIL 动画。它能直接操作形变、位移、颜色、路径收敛等，大部分浏览器稳定支持。比如图形的弹性回弹、位置缓动，这些 CSS 不太好搞或者搞起来经常有兼容问题的场合，SMIL 是个省心方案。

第三类是配合 JavaScript 手写动画循环。在 requestAnimationFrame 里改某个 SVG 元素的 attribute，适合做拖拽交互、跟随鼠标这类实时性要求很高的场景。这种情况下把 SVG 当作一个可编程的画布用，自由度最高。

4.3 本地 SVG 图标封装，从散装文件到统一组件库

项目里最常见的 SVG 需求不是画插画，而是管理一堆图标。我见过太多项目里的图标代码是今天一个 svg 文件，明天一段内联代码，后天又有人直接引入一个 SVG Sprite，最后风格尺寸完全不统一，换个颜色要全站排查。正规做法是把图标封装成统一组件。

以 Vue 项目为例，我的习惯是建一个Icon.vue组件：

<template> <svg class="icon" :width="size" :height="size" aria-hidden="true"> <use :href="`#icon-${name}`"></use> </svg> </template> <script setup> defineProps({ name: { type: String, required: true }, size: { type: [Number, String], default: 16 } }); </script> <style scoped> .icon { fill: currentColor; } </style>

配合一个统一入口文件，把所有图标 SVG 注册成 symbol，需要哪个组件就引用哪个 symbol。还可以利用 CSS 的currentColor关键字，让图标颜色自动继承父级文字颜色，这样你的图标想变什么颜色就变什么颜色，不需要给每个图标单独维护一套颜色属性。

注册符号的方式大致是这样：

// 批量注册 svg symbol const req = import.meta.glob('./icons/*.svg', { eager: true, query: '?raw', import: 'default' }); Object.entries(req).forEach(([path, content]) => { const symbolId = path.split('/').pop().replace('.svg', ''); // 将 svg 内容解析后插入 body 中的 hidden svg 容器 });

不过这里有个细节，不同构建工具对 raw 导入的支持有差异，Vite 用?raw，Webpack 要用raw-loader或者svg-sprite-loader，而且批量解析 SVG 时最好用DOMParser去提取原文件里的<svg>内容，再造<symbol>，而不是简单拼接字符串。否则会有一些命名空间或者 style 标签丢失的问题。

4.4 框架里的 SVG 解析和动态渲染，这事没你想的那么简单

热门关键词里有一句“vue ofd 文件解析的插件，支持比较全面的，支持 svg 解析”——这说明很多人实际工作中遇到的是在业务系统里解析含有 SVG 片段的各种文档格式。典型的场景有两个：一个是 OFD 版式文件前端预览，文件里的矢量图形本质是一堆 SVG 描述；另一个是后端下发的 SVG 模板需要在页面里动态渲染成图片或者可直接编辑图形。

如果你需要把一段 SVG 字符串渲染到页面上，Vue 里直接用v-html是最快的方案，但风险也不少。最大的坑是 SVG 内容里如果携带了<script>或者事件属性，直接注入 HTML 会有 XSS 隐患。如果业务系统允许用户上传 SVG，一定要对内容做严格的过滤，把<script>、on*事件、<foreignObject>这些危险标签全部剥掉，或者干脆只允许白名单标签。

另一个常见场景是 Canvas 和 SVG 之间的互转。比如用 LeaferJS 这类 Canvas 绘图库画了复杂互动图形，客户要求导出 SVG 用于后续打印或编辑，LeaferJS 本身提供leafer.export('svg')这类导出能力。这种场景下要特别注意字体问题，Canvas 里用的字体如果没有在浏览器环境加载过，导出 SVG 时有可能把文字路径转成图形，也可能直接丢字体，导出的文件在别处打开就会走样。导出前记得把用到的字体统一加在项目中并确保已经加载完成。

另外 WebGIS 场景里也常看到 “Cesium 加载 SVG” 的需求。Cesium 本身主要面向 3D 和影像数据，SVG 在 Cesium 里通常有两种用法：一是作为贴图贴在实体或广告牌上，这时候要把 SVG 字符串先转成 data URL 或 Blob URL，再传给贴图属性；二是作为信息叠加层，用 HTML 覆层方案放到 Canvas 外层。无论哪种，都要记得关闭 SVG 的默认交互事件（比如 pointer-events），否则场景拖动时会卡顿。

4.5 从网页里扒 SVG，比你想的简单但也没那么简单

“怎么把网页中的 svg 图弄下来”这个问题隔三差五就有人问。如果你在一个网页上看到一张很喜欢的 SVG 图，最简单的方式是打开浏览器开发者工具，在 Elements 面板里选中那个<svg>元素，右键 Copy 然后 Copy OuterHTML。但这样复制下来的内容经常带着一堆外部引用的 class 或 filter，脱离页面环境就失效了。

更稳的方案是用老牌的 svg-crowbar 这一类书签工具，它能把当前页面里所有 SVG 提取出来，并尽可能把 CSS 中影响 SVG 渲染的样式内联到 SVG 属性里，这样导出的 SVG 文件拿出去单独打开也能正常显示。原理上它实际上是在运行时“收集”页面的 SVG，并递归处理样式计算，再把处理后的结果序列化下载。遇到复杂的动画或渐变元素，导出效果不一定完美，但作为临时提取工具已经非常够用。

如果你有批量抓取 SVG 的需求，比如从一个图标网站批量下载几百个图标，我个人经验是别用通用的爬虫框架，先看看目标网站有没有提供接口或者 npm 包。图标站通常有对应的包，比如从 iconfont 下载有官方工具。如果目标网站没有接口，非要走抓取，那就得注意：CSS 选择器隔几天就可能失效，网站改版后你的脚本就废了。所以一定要写一套健全的解析逻辑，不要硬编码路径。

再强调一句合规问题：抓取 SVG 之前务必阅读目标网站的 robots.txt 和服务条款，个人学习和研究的提取是一回事，拿去商用是另一回事。代码里也务必控制请求频率，不要把别人服务器打挂了，这个最基本。

5. SVG 素材从哪儿找，以及如何让文件保持干净

5.1 免费的 SVG 素材网站，我帮你筛过一轮

网上免费 SVG 素材网站不少，但质量参差不齐，很多站点的图标其实是几年前的风格，或者代码质量稀烂。我平时常用的是这几个方向：

• 开源图标库的官方仓库或 CDN，比如 Tabler Icons、Lucide、Phosphor Icons，这类图标风格统一、代码干净，直接下载或按需引入都很方便。
• 大型素材聚合站的 SVG 分类，例如 Freepik、Flaticon，这类网站数量大，但是很多免费素材需要注册和署名，商用前要确认授权类型。
• 插画类素材，可以考虑 unDraw、Storyset 这类风格化插画库，SVG 代码拆得很干净，适合改造成前端组件。
• UI 组件库自带的图标集，比如 Element Plus 的 Icon、Ant Design 的 Icon，这些虽然主要是字体或组件形式，但不少同时提供了 SVG 源文件。

找素材的时候，第一优先级看许可证，第二优先级看代码结构。如果是给公司商业项目用，宁可少而精，也不要从不明来路的网站顺手抓一堆。搞设计久了你会发现，一个项目用统一风格的图标，视觉上会比五颜六色的素材拼凑舒服得多。

5.2 学会用 SVG 优化工具，清掉冗余代码

用设计工具导出的 SVG，比如从 Figma、Illustrator、Sketch 里导出的，里面通常塞满了不必要的元数据、空分组、重复样式、甚至编辑历史残留。这种文件不是不能用，而是体积大、不美观、与代码库风格不统一。你需要先跑一遍优化。

目前最常用的优化工具是 SVGO。它基于 Node.js，可以在命令行或者构建流程里使用。一条典型的命令行长这样：

npx svgo --config svgo.config.mjs src/icons/*.svg -o dist/icons/

我实际项目里的 SVGO 配置一般长这样：

export default { plugins: [ 'preset-default', { name: 'removeViewBox', active: false }, { name: 'removeAttrs', params: { attrs: '(fill|stroke)' } } ] };

注意要保留 viewBox，因为删掉 viewBox 会破坏缩放逻辑。至于 fill 和 stroke，如果图标库里统一通过 CSS 控制颜色，就可以在优化时把颜色属性去掉，这样可以彻底做到“图标即组件”。

SVGO 能做的事情非常多：删除无用属性、合并路径、精简小数、压缩数字精度、移除注释和 metadata。一个 Figma 导出的 SVG，处理完体积能降一半以上，真的值得在构建流程里加一步。

5.3 SVG 编辑器怎么选，DrawIO 也能编辑 SVG

关键词里有人问 “drawio 怎么编辑 svg”。DrawIO 是画流程图、架构图的利器，它本身支持把画布导出为 SVG 格式，也支持导出的 SVG 再次导入编辑。但需要注意：DrawIO 里的 SVG 编辑并不是像 Figma 那样直接拖动贝塞尔控制点，而是把 SVG 当作图形对象放进画布里，再通过“编辑 > 编辑图形”这样的方式调整路径数据。如果你拿到一个外部 SVG 素材想放进 DrawIO 改形状，可以把 SVG 文件直接拖入画布，然后右键选择编辑图形，DrawIO 会用 XML 编辑器打开该图形的路径定义，你可以在里面修改 path 的 d 属性。

我自己更习惯的编辑器是 Inkscape，它是免费开源且功能接近 Illustrator 的桌面工具，对于纯 SVG 的图形编辑体验好很多。网页里做简单调整直接用 Figma 就行，把 SVG 文件导入，双击进入组件，就能拖拽路径节点。

5.4 写代码时要注意的 SVG 细节

补充几个容易踩的细节坑。第一，SVG 标签在 HTML 里如果没有显式指定 width 和 height，有的场景下会被视为 300x150 的默认尺寸，导致布局错乱。第二，重复定义的<defs>里的渐变 id 在不同 SVG 内联到同一页面时可能冲突，命名尽量带组件唯一前缀。第三，调整 SVG 大小时用 CSS 的 width/height，但如果同时设置了 viewBox 和 width/height 且比例不一致，图形会被拉伸而不是裁剪，这个默认行为经常让人困惑。第四，隐藏 SVG 时用display: none会让部分浏览器不再渲染内部的动画，如果要做隐藏后依然触发动画，改用visibility: hidden更靠谱。

6. SVG 常见问题速查，实战里最频繁踩的坑

关于“SVG 优化”我还想多提一句：很多项目上线前会做图片压缩，但往往只压缩 PNG 和 JPG，SVG 因为本身已经是文本格式，经常被忽略。SVGO 这类工具能做的事远超你想象，除了压缩体积，还能统一颜色、删除隐藏层、合并相似路径，这些对代码维护好处巨大。建议把 SVG 压缩作为构建流水线里固定的一环，和 CSS、JS 压缩同等看待。

另外一个我提过不止一次的坑是命名为“use”带来的陷阱。使用<use href="#icon-xxx"></use>引用 symbol 时，如果你想要引用的 SVG 里包含渐变或者滤镜，而这些渐变定义在原始 symbol 内部，在某些浏览器中渲染会失效，原因是<use>克隆出来的节点不会把内部 defs 提升到主文档命名空间。解决办法是把渐变或滤镜定义放在页面的公共<defs>中，而不是放在 symbol 内部。这个问题我当年排查了整整一个下午才定位到，后来干脆固定一个规范：公共图形样式不进 symbol，只进全局 defs。

7. 一些真实项目里的小技巧，能帮你少走很多弯路

统一结尾不能是空话。按我的实际经验说几个值得记住的小事儿。

SVG 做图标统一管理后，切图成本几乎归零。以前一个按钮要配 2x、3x 的 PNG，现在一个标签搞定，颜色通过 CSS 控制，状态变化再也不用来回切图。团队里配合设计同学也比较顺，因为 Figma 导出 SVG 再优化一遍就能直接用，流程非常成熟。

给新项目的建议是：从第一天就把图标统一收口成组件，不管业务多赶，千万别今天一个内联明天一个文件。等图标数量过百后你会感谢这个决定。另一个建议是尽量在现代浏览器的标准能力上做动效，别一上来就引入 GSAP，很多效果纯 CSS 加原生 SVG 就能实现，引入动画库反而会把 bundle 搞大。

最后分享一个调试技巧：浏览器开发者工具对 SVG 也有专门的检查面板，在 Elements 里选中 SVG 后，右下角 Styles 面板可以直接改 fill、stroke 这些属性，实时看到效果。遇到动画问题，还可以在 Animations 面板里放慢动画速度逐帧查看。这些基本功用熟了，玩 SVG 比想象中顺手得多。