1. 为什么前端开发者绕不开 SVG 这道坎做前端这些年我发现一个挺有意思的现象很多人对 SVG 的态度是知道但不用。问起来就说图标用字体图标库不就行了复杂图形直接切图导出 PNG。直到某天产品经理甩过来一个需求——图标要能跟随主题色变化、hover 时局部高亮、还要做路径描边动画——这时候才发现PNG 和字体图标全都歇菜了。SVG 全称是 Scalable Vector Graphics可缩放矢量图形。它跟 JPEG、PNG 这类位图最大的区别在于位图是用一个个像素点拼出来的放大到一定程度就会看到马赛克而 SVG 是用数学公式描述的图形记录的是从 A 点画一条线到 B 点以 C 为圆心画一个半径 R 的圆这样的指令。浏览器拿到这些指令后实时渲染所以无论放大多少倍都清晰锐利。这个特性带来的直接好处有三个。第一是分辨率无关同一份 SVG 在手机小屏和 4K 显示器上表现一致不用准备多套切图。第二是体积极小一个复杂图标的 SVG 源码可能只有几百字节而对应的 PNG 动辄几 KB 到几十 KB。第三是可编程SVG 本质上是 DOM 的一部分可以用 CSS 改样式、用 JavaScript 操作节点、用动画库驱动变化。那为什么还有那么多前端不愿意用我观察下来主要是两个原因一是觉得 SVG 的路径数据那一长串MLC指令像天书看不懂就不敢改二是不知道什么时候该用 SVG、什么时候该用位图选错了反而添麻烦。这篇内容就是想把这两个问题讲透从 SVG 的本质原理讲到实际项目中的选型判断再到手写和优化 SVG 的具体方法。不管你是刚接触前端的新人还是做了几年但一直没系统用过 SVG 的开发者应该都能从中找到能直接用的东西。2. SVG 的坐标系与路径指令看懂那串天书2.1 视口、视图框与坐标系的三角关系很多人第一次打开一个 SVG 文件看到svg width24 height24 viewBox0 0 24 24这行代码就懵了width 和 height 我懂viewBox 是什么为什么有时候两个值一样有时候不一样这里需要理清三个概念。width和height是 SVG 在页面上实际占据的尺寸单位可以是 px、em、百分比等。viewBox定义的是 SVG 内部的坐标系范围格式是min-x min-y width height意思是我这个画布的逻辑坐标从 (min-x, min-y) 开始宽多少个单位、高多少个单位。举个具体例子。viewBox0 0 24 24表示内部坐标系是 24×24 个单位。如果外层width48 height48浏览器就会把这 24×24 的逻辑坐标映射到 48×48 的实际像素上相当于整体放大 2 倍。如果width12 height12就是缩小到一半。这就是 SVG 缩放的本质——改变映射比例而不是重新绘制像素。提示viewBox 的宽高比和外层 width/height 的宽高比如果不一致默认会做等比缩放并居中preserveAspectRatio 的默认值xMidYMid meet。如果你希望图形被拉伸填满需要显式设置preserveAspectRationone。理解了这个映射关系就能明白为什么设计稿给的 SVG 有时候尺寸对不上。设计师导出的 SVG 可能 viewBox 是0 0 1024 1024但你实际只需要 24×24 的显示尺寸。这时候不用去改 viewBox只要把 width/height 设成 24 就行浏览器会自动缩放。反过来如果你想让图标在不同场景下用不同尺寸但保持清晰也只需要改 width/heightviewBox 保持不动。2.2 路径指令 M、L、C、Z 的实战解读SVG 里最核心也最让人头疼的就是path元素的d属性。那一长串字母加数字的组合其实是一套很规整的绘图指令。常用的指令就那么几个理解了就能读懂大部分图标。M是 Move to移动画笔到某个点不画线。比如M 10 10就是把画笔移到坐标 (10, 10)。L是 Line to从当前点画直线到目标点L 20 10就是从当前位置画一条线到 (20, 10)。H和V是水平和垂直线的简写H 30表示水平画到 x30V 20表示垂直画到 y20。C是三次贝塞尔曲线需要三个坐标点两个控制点加一个终点是画曲线的主力。Z是闭合路径把当前点和起点连起来。拿一个简单的例子来说。画一个正方形路径是M 0 0 L 10 0 L 10 10 L 0 10 Z。翻译成人话就是移到 (0,0)画线到 (10,0)画线到 (10,10)画线到 (0,10)闭合回起点。就这么直白。曲线部分稍微绕一点。C x1 y1, x2 y2, x y里的 (x1,y1) 和 (x2,y2) 是两个控制点(x,y) 是终点。控制点不落在曲线上而是像磁铁一样吸引曲线往那个方向弯曲。我刚开始学的时候理解方式是把控制点想象成橡皮筋两端的固定点曲线就是橡皮筋被拉出来的形状。两个控制点离得越远曲线弯得越厉害。实际项目中手写这些路径数据的情况很少大部分是从设计工具导出或者用图标库。但能读懂的好处是当需要微调某个图标的形状时你知道该改哪个数字当需要做路径动画时你知道该操作哪个属性。2.3 填充、描边与它们容易踩的坑fill控制填充色stroke控制描边色stroke-width控制描边粗细。看起来简单但有几个坑几乎每个新手都会踩。第一个坑是描边被裁切。假设你有一个viewBox0 0 24 24的图标路径刚好画在边缘上然后设置了stroke-width2。这时候描边会有一半超出 viewBox 范围被裁掉。解决办法是把路径往里收一点或者扩大 viewBox 范围。我一般习惯在画图标时留出至少 1 个单位的边距。第二个坑是fill 和 stroke 的继承。SVG 元素会从父级继承 fill 和 stroke 的值。如果你在svg上设置了fillnone所有子元素默认都不填充。这个特性在做图标系统时特别有用——统一在根节点控制颜色子路径不用重复写。但如果不了解就会出现我明明没设置 fill为什么图形是黑色的这种困惑因为 fill 默认值是黑色。第三个坑是currentColor 的妙用。把 fill 或 stroke 设成currentColor图形颜色就会跟随父元素的color属性变化。这是做主题色图标最常用的技巧。比如.icon { color: #333; } .icon:hover { color: #1890ff; }配合 SVG 里的fillcurrentColor鼠标悬停时图标颜色自动跟着变不需要写任何额外的 SVG 代码。3. 在项目里怎么用 SVG四种主流姿势的取舍3.1 直接内联灵活但要注意复用问题把 SVG 代码直接写在 HTML 或 JSX 里是最灵活的方式。因为 SVG 变成了 DOM 的一部分你可以用 CSS 选择器精确控制每一个路径用 JavaScript 绑定事件用动画库操作节点。svg viewBox0 0 24 24 width24 height24 path dM12 2 L2 22 L22 22 Z fillcurrentColor/ /svg这种方式适合需要动态交互的场景比如点击图标切换状态、hover 时局部变色、路径描边动画等。缺点是代码会显得比较臃肿如果一个页面有几十个图标HTML 会变得很长。而且同一个图标在多个地方使用时代码会重复。我的经验是需要交互的图标用内联纯展示的图标用其他方式。一个页面里真正需要动态控制的图标通常不超过十个内联带来的灵活性远大于代码体积的代价。3.2 img 标签引入简单但有硬伤用img srcicon.svg引入是最省事的方式跟引入普通图片没区别。浏览器会把它当作一个独立的文档加载不会污染主文档的 DOM。但这种方式有个硬伤无法用外部 CSS 控制 SVG 内部的样式。因为 img 引入的 SVG 是一个封闭的文档外面的样式进不去。你没法改它的颜色、没法做 hover 效果、没法用 JavaScript 操作内部节点。如果图标需要跟随主题色变化这种方式直接出局。它适合的场景是图标颜色固定、不需要交互、只是单纯展示。比如文章配图里的示意图、logo 等。3.3 CSS background-image适合装饰性图形把 SVG 作为背景图使用跟用 PNG 做背景图是一个套路。好处是可以配合background-size、background-position做各种布局效果而且可以用 CSS 精灵图sprite技术把多个图标合并。.icon-arrow { background-image: url(data:image/svgxml,...); background-size: contain; background-repeat: no-repeat; }这里有个技巧把 SVG 转成 data URI 直接写在 CSS 里可以减少一次 HTTP 请求。但要注意 URL 编码问题SVG 里的#、、等字符需要转义否则会解析出错。我一般用工具自动转换手写容易漏。这种方式同样无法用 CSS 控制 SVG 内部样式颜色是写死在 SVG 源码里的。适合纯装饰性的图形比如分割线、背景纹理等。3.4 SVG Sprite图标系统的经典方案SVG Sprite 是把多个 SVG 图标合并到一个文件里通过symbol和use来引用。这是做图标系统最成熟的方案兼顾了复用性和可控制性。!-- sprite.svg -- svg xmlnshttp://www.w3.org/2000/svg styledisplay:none symbol idicon-home viewBox0 0 24 24 path d... fillcurrentColor/ /symbol symbol idicon-user viewBox0 0 24 24 path d... fillcurrentColor/ /symbol /svg !-- 使用 -- svg classiconuse href#icon-home//svg用use引用的图标可以用外部 CSS 控制颜色因为 fill 设了 currentColor可以用 font-size 或 width/height 控制大小。缺点是use的样式穿透有一些限制比如不能单独控制 symbol 内部某个路径的样式除非用 CSS 变量。注意use的href属性在旧版本浏览器里需要写成xlink:href。虽然现代浏览器都支持href但如果项目需要兼容较老的环境建议两个都写上。这四种方式没有绝对的好坏关键看场景。我的选型逻辑是需要交互就内联需要复用就 Sprite纯展示就 img装饰性就 background。一个项目里混用多种方式是很正常的。4. 手写与优化 SVG 的实操细节4.1 从设计稿到可用 SVG 的清理流程设计师给的 SVG 往往带着一堆冗余信息编辑器生成的注释、无用的命名空间、多余的 group 嵌套、隐藏的图层。直接扔进项目里体积可能比实际需要的大好几倍。我通常的清理流程是这样的。第一步用设计工具如常见的矢量编辑软件打开删掉不需要的图层和编组把路径合并到最少。第二步导出时选择优化选项去掉注释和元数据。第三步如果还有冗余用 SVGO 这类工具做自动化压缩。SVGO 的常用配置项里removeViewBox这个插件要特别小心。它默认会删掉 viewBox这会导致 SVG 无法缩放。如果你需要图标能自适应大小一定要在配置里关掉这个插件{ plugins: [ { name: preset-default, params: { overrides: { removeViewBox: false } } } ] }还有一个经验不要过度优化。有些工具会把路径数据压缩到极致可读性变得极差后续想手动微调根本没法下手。我一般会保留一定的可读性比如不合并相邻的路径、不把数字精度降得太低。毕竟 SVG 经过 gzip 压缩后体积已经很小了没必要为了省几百字节牺牲可维护性。4.2 路径动画stroke-dasharray 与 stroke-dashoffset 的配合路径描边动画是 SVG 最出彩的应用之一原理其实很简单就是利用stroke-dasharray和stroke-dashoffset两个属性。stroke-dasharray定义虚线的模式比如stroke-dasharray10 5表示画 10 个单位实线、空 5 个单位循环往复。如果把这个值设成路径的总长度比如stroke-dasharray100那么整条路径就变成了一段 100 单位的实线和 100 单位的空白交替。因为路径本身只有 100 单位长所以看起来就是完整的实线。stroke-dashoffset控制虚线的偏移量。当它等于路径总长度时实线部分刚好被偏移到看不见的位置路径呈现为空白。当它从总长度逐渐变到 0 时实线部分就一点点画出来了。.path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 1s ease forwards; } keyframes draw { to { stroke-dashoffset: 0; } }关键是要知道路径的总长度。可以用 JavaScript 的getTotalLength()方法获取const path document.querySelector(.path); const length path.getTotalLength(); path.style.strokeDasharray length; path.style.strokeDashoffset length;这个技巧在做加载动画、图标入场效果时特别好用。我做过一个 checkmark 图标的描边动画用户提交表单成功后对勾从无到有画出来比直接显示一个静态图标有质感得多。4.3 响应式 SVG 的尺寸控制策略SVG 的响应式处理比普通图片灵活但也更容易出问题。核心原则是让 viewBox 决定比例让外层容器决定尺寸。最常见的做法是给 SVG 设置width100%和heightauto配合 viewBox 实现等比缩放。但要注意heightauto在某些浏览器里对 SVG 不生效需要额外处理。更稳妥的方式是用 CSS 的aspect-ratio或者 padding-top 技巧。.svg-container { width: 100%; aspect-ratio: 16 / 9; } .svg-container svg { width: 100%; height: 100%; display: block; }另一个常见需求是图标跟随文字大小。把 SVG 的 width/height 设成1em它就会跟随父元素的 font-size 缩放。配合vertical-align: middle可以让图标和文字对齐。提示SVG 默认是 inline 元素底部会有几像素的空白间隙跟 img 一样。设置display: block或vertical-align: middle可以消除这个间隙。这个坑我在早期项目里踩过好几次图标总是跟文字对不齐排查半天才发现是 inline 元素的基线对齐问题。5. 那些年我在 SVG 上踩过的坑5.1 图标模糊不一定是 SVG 的问题有段时间我发现项目里的 SVG 图标在高分屏上看起来有点糊第一反应是SVG 不是矢量的吗怎么会糊。排查后发现问题出在 viewBox 的坐标精度上。如果 viewBox 的宽高是奇数或者非整数而实际显示尺寸是偶数浏览器在映射时会产生半像素的偏移导致边缘模糊。比如viewBox0 0 23 23显示成 24×24每个单位映射后不是整数像素抗锯齿就会让线条看起来发虚。解决办法是让 viewBox 的宽高和显示尺寸保持整数倍关系或者干脆用常见的 24×24、32×32 这种标准尺寸。另外路径的坐标点也尽量落在整数或半整数上避免出现10.333这种值。还有一种情况是图标本身设计时就没有对齐像素网格。设计师在矢量软件里画的时候可能没注意导出的路径坐标带了很多小数。这种需要在设计阶段就规范前端很难补救。5.2 颜色改不动fill 和 stroke 的优先级问题为什么我用 CSS 改了 fill图标颜色还是不变这个问题我被问过无数次。原因通常是 SVG 源码里已经写死了 fill 值而且内联样式的优先级高于外部 CSS。比如path fill#333 d.../你在 CSS 里写.icon path { fill: red; }是不生效的因为内联的 fill 属性优先级更高。解决办法是把源码里的 fill 删掉或者改成fillcurrentColor让 CSS 来控制。如果是用use引用的 Sprite情况更复杂一些。use内部的元素是影子 DOM外部 CSS 选择器选不中。这时候只能通过 CSS 变量或者继承来传递样式。我一般会在 symbol 里用fillcurrentColor然后在use的父级设置 color。5.3 性能陷阱什么时候 SVG 反而比 PNG 慢SVG 虽好但不是所有场景都适合。如果一个 SVG 包含成千上万个路径节点浏览器的渲染开销会非常大反而不如一张 PNG 来得快。我遇到过一个案例一个地图可视化页面用 SVG 绘制了上万个数据点。初始加载时页面直接卡死滚动也掉帧严重。后来改成 Canvas 绘制性能立刻上来了。SVG 适合的是节点数量可控、需要交互和样式的场景如果是大规模数据渲染Canvas 或 WebGL 才是正解。另一个性能点是滤镜和遮罩。SVG 的filter和mask功能很强大但计算成本高。如果一个页面里有大量带滤镜的 SVG 元素滚动时会有明显的卡顿。这种效果建议用在少量关键元素上不要滥用。还有一个容易被忽略的点SVG 的动画如果触发了重排reflow性能会很差。用 CSS transform 做动画比如旋转、缩放走的是合成层性能好但如果动画改的是路径的d属性或者元素的几何属性就会触发重排。做复杂动画时优先考虑 transform 和 opacity。6. 把 SVG 用好的几个进阶思路6.1 用 CSS 变量做可配置的图标系统前面提到用 currentColor 控制单色图标但如果图标有多个颜色区域就需要更细粒度的控制。CSS 变量是个好方案。svg viewBox0 0 24 24 path fillvar(--icon-primary, #333) d.../ path fillvar(--icon-secondary, #999) d.../ /svg.icon { --icon-primary: #1890ff; --icon-secondary: #e6f7ff; }这样同一个图标在不同场景下可以有不同的配色方案而且不需要修改 SVG 源码。做设计系统时这个技巧特别有用可以把图标的颜色纳入主题变量体系。6.2 无障碍访问别让 SVG 成为信息孤岛装饰性的 SVG 应该加aria-hiddentrue让屏幕阅读器忽略它。有语义的 SVG 则需要加roleimg和title元素。svg roleimg aria-labelledbyicon-title title idicon-title用户头像/title path d.../ /svg这个细节很多项目都会忽略。如果图标是按钮的唯一内容比如一个只有关闭图标的按钮没有无障碍标注的话屏幕阅读器用户根本不知道这个按钮是干什么的。加个aria-label在按钮上也能解决问题成本很低但收益很大。6.3 从图标延伸到插画和图表SVG 的能力远不止画图标。数据可视化里的折线图、柱状图、饼图用 SVG 绘制都很合适因为每个数据点都是可交互的 DOM 节点。插画类的复杂图形也可以用 SVG配合 CSS 动画做出很丰富的效果。我做过一个项目用 SVG 绘制了一套流程示意图每个节点都可以点击展开详情连线用路径动画表示数据流动。这种交互性是 PNG 完全做不到的。当然前提是图形复杂度可控节点数量不要太多。选型时的判断标准很简单需要交互、需要动态样式、需要缩放清晰就用 SVG纯展示、复杂度极高、节点数量巨大就用位图或 Canvas。没有银弹只有适合场景的方案。实际用下来SVG 的学习曲线主要在前期的概念理解上。一旦搞懂了坐标系、路径指令和样式控制这几块后面就是熟能生巧的事。我建议新手从改造现成的图标开始试着改改颜色、调调尺寸、加个简单的动画慢慢就能体会到 SVG 相比位图的优势在哪里。
