除了点亮武汉，你还可以点亮文档

前几天，人民日报一组点亮武汉的美图在朋友圈刷屏了。

image

轻点手指，黑白调的风景就慢慢染上了色，很美；顷刻间完成了与读者的互动，建立了情感链接，这波刷屏操作很666。那么，你知道是什么配合你的手指点亮了武汉吗？

是什么点亮了武汉？

答案是——

Scalable Vector Graphics（SVG）！

image

用Chrome可以看到HTML代码，动效=

黑白图片+<svg>彩色图片+动画代码</svg>，彩色图片和动画代码放在一个SVG容器里。那么什么是SVG呢？SVG全称是Scalable Vector Graphics，即可伸缩矢量图形，它是W3C中基于XML的图形标准，它使Web文档变得更小、更快和更具交互性。

SVG可以用于Web应用和社交媒体，它也是技术文档中的点睛之笔哦！让我们来看看——

SVG在技术文档中的应用

技术文档中绘制的图片，都可以使用SVG格式。SVG图片可以广泛应用于用户助手、在线帮助，甚至汽车飞机的用户手册！举几个栗子：

概念图、原理图、流程图

为了便于用户理解概念、工作原理、工作流程，常常需要图文结合进行解释。

image image image

数据可视化

通过可视化的方式让用户理解数据特征，例如信息图、伪代码等。

需要动画效果的场景

由于SVG支持动画效果，它还可以用来展现时间和空间逻辑，如时间顺序、结构关系等。例如工业产品常用的爆炸图（请戳视频）：

LEGO爆炸图

需要用户交互的场景

技术文档中的典型应用是交互式电子手册Interactive Electronic Technical Manual (IETM)。

image

需要多尺寸显示或印刷

SVG支持矢量图，放大后无失真，所以可以广泛用在需要多种尺寸显示或印刷的场景。如印刷品、图标、标识等。

image

使用SVG有什么好处？

SVG支持矢量图，无失真。

SVG的本质是一个支持XML格式的文本文件，所以它具有文本文件的特点：

• 文本编辑器即可创建并修改

• 图像文件小，下载速度快

同时有XML文件的特点：

• 可以通过脚本语言（例如JavaScript）来操控XML对象

• 与结构化写作标准兼容，例如在DITA标准中有一个<svg-container>元素，用于包含SVG文件。SVG文件也支持主控文件和条件过滤。

• 支持多种语言和翻译

image

除此之外，SVG还支持多种滤镜效果（如渐变、图案、变形、模糊等）、动画和交互效果，简直就是文本版本的PHOTOSHOP！

下例是用SVG滤镜制作的文字：

image

滤镜效果强大得可怕：

image

SVG如此优秀，那么如何生成SVG图片？

对于绘图师，当然是用专业绘图软件了！Inkscape、Coreldraw、SOLIDWORKS等软件都支持绘制或导出SVG文件。

对于技术写作人员，可以用一些排版软件生成简单的SVG图片，例如FrameMaker。

image

程序猿可以直接用文本编辑器编写SVG文件，或者用UML或Python等程序编写。

写到最后，你是不是对SVG有了一些新的认识？如果觉得有收获，欢迎转发文章哦！

参考链接：

https://www.w3.org/Graphics/SVG/

http://iconfont.cn/

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