w3c svg

W3C SVG规范，说到底是浏览器画图的标准答案。1999年诞生，2011年出了2.0草案，到现在还在修修补补。可就是这份文档，决定了你在网页上看到的每一个矢量图标、每一条折线图、每一段流畅的动画曲线是怎么来的。

直接说结论：SVG的牛逼之处不在于它是个图像格式，而在于它把图像变成了文本。你打开一个.svg文件，看到的不是像素点阵，而是一串<path d="M10,10 L20,30">这样的坐标指令。这意味着图像可以被搜索引擎索引、可以被JavaScript实时修改、可以用CSS控制样式——位图做不到这些。

拿个具体例子。你在电商网站看到的商品缩放功能，鼠标悬停时那个平滑放大的产品图，背后就是SVG在做矢量运算。位图放大到200%就开始糊，SVG放大到5000%依然锋利。这玩意儿是数学曲线，不是像素网格。

W3C把SVG定义成一套XML方言，意味着它继承了XML的严谨性。每个标签必须闭合，属性必须带引号，命名空间不能错。写错一个标签，整个图形就渲染不出来。这种苛刻让初学者骂娘，但也保证了跨平台的一致性——你在Chrome里画的圆，跟Firefox里画的圆，坐标完全一致，不会出现半像素偏移。

有个细节很多人没注意：SVG的坐标系原点在左上角，Y轴向下增长。这跟数学课上的坐标系正好相反。初学的人总在这里栽跟头，画个柱状图，柱子全倒着长。W3C文档里其实写得很清楚，但大多数人懒得看规范，直接抄代码，抄完了也不知道为什么y属性要填负数。

SVG的动画模块更值得琢磨。它不靠JavaScript逐帧计算，而是通过<animate>标签声明起始值和结束值，浏览器自己插值。这意味着动画性能极高——GPU直接参与计算，不占用主线程。你看那些数据可视化大屏上跳动的数字、流动的线条，背后全是这套机制在跑。

但W3C也不是没犯过错。SVG 1.1时代的滤镜效果（feGaussianBlur、feTurbulence这些），在移动端上性能一塌糊涂。苹果手机上渲染一个带模糊阴影的SVG，掉帧掉得亲妈都不认识。后来浏览器厂商自己搞了CSS filter来弥补，W3C才在2.0草案里优化了相关实现。这教训说明：规范写得再好，跟不上硬件节奏也是白搭。

现在SVG的生态已经蔓延到字体图标、地图渲染、图表库（D3.js、ECharts底层全用SVG）。连Photoshop都支持导出SVG格式了，虽然导出质量时好时坏。你要是想深入，直接翻W3C官方文档，别信网上那些二手教程。规范文档虽然枯燥，但每个属性都给了示例和几何解释——那才是真正的教科书。

最后提一嘴：SVG不是万能的。复杂照片该用JPEG还得用JPEG，位图有它存在的道理。但凡是图形、图标、图表这类几何内容，SVG是当前唯一值得信赖的跨平台方案。W3C把这条路走通了，而且走了二十多年还没被淘汰，这本身就说明问题。

(责任编辑：综合)