前几天，人民日报一组点亮武汉的美图在朋友圈刷屏了。
轻点手指，黑白调的风景就慢慢染上了色，很美；顷刻间完成了与读者的互动，建立了情感链接，这波刷屏操作很666。那么，你知道是什么配合你的手指点亮了武汉吗？
是什么点亮了武汉？
答案是——
Scalable Vector Graphics（SVG）！
用Chrome可以看到HTML代码，动效=
黑白图片+<svg>彩色图片+动画代码</svg>，彩色图片和动画代码放在一个SVG容器里。那么什么是SVG呢？SVG全称是Scalable Vector Graphics，即可伸缩矢量图形，它是W3C中基于XML的图形标准，它使Web文档变得更小、更快和更具交互性。
SVG可以用于Web应用和社交媒体，它也是技术文档中的点睛之笔哦！让我们来看看——
SVG在技术文档中的应用
技术文档中绘制的图片，都可以使用SVG格式。SVG图片可以广泛应用于用户助手、在线帮助，甚至汽车飞机的用户手册！举几个栗子：
概念图、原理图、流程图
为了便于用户理解概念、工作原理、工作流程，常常需要图文结合进行解释。
数据可视化
通过可视化的方式让用户理解数据特征，例如信息图、伪代码等。
需要动画效果的场景
由于SVG支持动画效果，它还可以用来展现时间和空间逻辑，如时间顺序、结构关系等。例如工业产品常用的爆炸图（请戳视频）：
需要用户交互的场景
技术文档中的典型应用是交互式电子手册Interactive Electronic Technical Manual (IETM)。
需要多尺寸显示或印刷
SVG支持矢量图，放大后无失真，所以可以广泛用在需要多种尺寸显示或印刷的场景。如印刷品、图标、标识等。
使用SVG有什么好处？
SVG支持矢量图，无失真。
SVG的本质是一个支持XML格式的文本文件，所以它具有文本文件的特点：
文本编辑器即可创建并修改
图像文件小，下载速度快
同时有XML文件的特点：
可以通过脚本语言（例如JavaScript）来操控XML对象
与结构化写作标准兼容，例如在DITA标准中有一个<svg-container>元素，用于包含SVG文件。SVG文件也支持主控文件和条件过滤。
支持多种语言和翻译
除此之外，SVG还支持多种滤镜效果（如渐变、图案、变形、模糊等）、动画和交互效果，简直就是文本版本的PHOTOSHOP！
下例是用SVG滤镜制作的文字：
滤镜效果强大得可怕：
SVG如此优秀，那么如何生成SVG图片？
对于绘图师，当然是用专业绘图软件了！Inkscape、Coreldraw、SOLIDWORKS等软件都支持绘制或导出SVG文件。
对于技术写作人员，可以用一些排版软件生成简单的SVG图片，例如FrameMaker。
程序猿可以直接用文本编辑器编写SVG文件，或者用UML或Python等程序编写。
写到最后，你是不是对SVG有了一些新的认识？如果觉得有收获，欢迎转发文章哦！
参考链接：
https://www.w3.org/Graphics/SVG/
http://knutsynstad.com/fauxcode/
https://www.smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/
http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2010/Filters2.htm
