SVG矢量图模拟渲染效果绘制飞机开关图解

科技创新导报

2021 NO.09

Science and Technology Innovation Herald

航空航天科学技术

DOI：10.16660/.1674-098X.2101-5640-4828

SVG矢量图模拟渲染效果绘制飞机开关图解

张丛远

（上海飞机客户服务有限公司 上海 200241）

摘 要：本文分析了未来电子飞行手册中飞机面板插图的需求特点，以及在飞行类手册中插入开关图标来替代纯

文字描述对于航空安全的积极意义。介绍了如何用Adobe Illustrator软件制作SVG格式矢量图，结合滤镜功能的

技术来绘制飞机飞行类手册开关插图，获得接近渲染图的高美观度、接近矢量图的高清晰度和低数据量，提升客

户体验的同时提高飞行手册插图长期更改维护的效率。

关键词：飞行类手册 面板插图 SVG 飞机开关

中图分类号：V19 文献标识码：A 文章编号：1674-098X(2021)03(c)-0012-05

①

Drawing Aircraft Switch Diagram by SVG Vector Graph Simulation

Rendering Effect

ZHANG Congyuan

(Shanghai Aircraft Customer Service Co.,Ltd., Shanghai, 200241 China)

Abstract: This paper analyses the characters of control panel figure in future electronic flight manual, and

the positive significance for flight safety to insert switch symbols replacing pure text description. It introduces

how to use Adobe Illustrator software to make SVG vector diagram, combine with filter function to paint

switch figure of aircraft flight manual, which can obtain high beauty like rendering, achieve high legibility

and low data size like vector diagram. Those world enhance customer experience and efficiency of flight

manual figures long term maintenance.

Key Words: Flight manual; Control panel figure; SVG; Aircraft switch

飞行类手册是飞行员学习飞机系统、掌握特定机

型操作知识的教科书，也是飞行员在空中处置应急情

况时的重要参考，提升飞行类手册的查询、读取效果

对于航空安全有着重要意义。

目前已有部分航空公司开始使用电子飞行手册替

代传统的纸质手册，这是一种能够向飞行机组提供各

种手册、文件、航图、航行通告和气象资料等航行信

息的电子设备。航空界电子阅读的普及对插图等多

媒体素材提出了更高的要求，插图不能只是无数像素

点构成的静态图片，需要更加精致美观、传达更多信

息、适应更多电子化的应用需求。

飞机驾驶舱中，信息呈现形式直接影响到飞行员的

信息获取,研究表明优化信息呈现形式可有效降低飞行

员工作负荷,从而避免飞行员判断失误造成航空事故

[2]

。

[1]

行业中曾发生过案例：韩亚214航班事故报告称“波音

手册中相关的描述不清晰，加上飞行员训练不足，导致

了误操作”。部分飞行器主制造商已在新机型手册里采

用图标描述形式替代纯文字描述，可以为飞行学员留下

更强的感性认知。飞行员读取更加直观，减少读取和操

作的时间，也降低操作错误的可能。

1 制作思路

1.1 面板图标特点

未来电子化飞行时代，电子飞行手册换版将采用

XML代码形式交付。飞行员等用户需要查阅手册时，会

使用机载EFB设备在线下载或读取本地XML文件，系

统会将源代码发布成电子手册版面

[1]

（类似于浏览网

页的原理）。

因此插入开关图标跟普通插图有很大的区别：

①作者简介：张丛远（1989—），男，硕士，工程师，研究方向为飞行类手册分析与编写。

12

航空航天科学技术

2021 NO.09

Science and Technology Innovation Herald

科技创新导报

图1 CGM矢量图图2 位图（数模渲染）图3 SVG叠加滤镜

图4 矢量图叠加滤镜原理



数量大：一架飞机共有100多个开关，每个开关

还有两三种不同的状态，部分内容在一个页面里包含

数十个开关状态描述。



尺寸小：图标尺寸不宜过大，否则行距过大，幅

面空白过多，影响阅读体验。



清晰度要求高：在图标尺寸小的同时，还要保证

开关上的字符和指示灯可以清晰阅览，要求图片有高

清晰度。

以上三点都会导致数据量极大增加。若数据量过

于庞大，则会导致浏览客户端卡滞、内容刷新缓慢、图

片显示不出来，不仅影响用户体验，还可能延误飞行

员空中应急处置。

1.2 图标绘制要求

某型号飞机驾驶舱面板上共有常用开关250多个，

按照制造采用的元件分类可分为：按压开关56个、带

保护盖的按压开关24个、旋转开关25个、拨动开关10

个、带保护盖的拨动开关3个、各类旋钮70多个、各类

按键100多个，另有推力杆、襟缝翼手柄等特殊外形的

操作对象。同一开关在手册中要展示两种以上的不同

档位和指示灯状态，同一型号不同架次的飞机面板布

局也会有区别。其中采用相同元件制造的开关互相间

只存在以下两点区别：开关周围的标识字符和开关上

的状态指示灯。所以素材库中的素材必须以“允许二次

编辑”的文件形式保存，开关主体元件的图像素材可以

方便地引用、拼接至不同的图片里，从而帮助制图人员

较为容易地形成不同架次、不同场景的插图，消除重

复工作量并保证统一性。

通过以上的分析得知，面板开关的图标绘制有以

下四大要求：

(1)幅面较小的图片放大后可保证关键信息的清晰

度。

(2)可通过光影元素传达空间立体感，以培养感性

认知和情景意识，提升飞行操作品质

[3]

。

(3)文件数据量尽量小，保证飞行员本地发布顺

畅。

(4)可方便地进行二次修改和引用拼接。

2 图像文件格式选择

矢量图格式有CGM、DWG等，如图1，只存储点、

线、面、文字的元素属性，样条曲线的节点数据，并且

每个图形元素不论尺寸只包含两套颜色数据——轮廓

色和填充色，因此矢量文件数据量小，可以无限放大

始终保持清晰，是工程文件插图格式的首选。但矢量

图色彩较单一，不论是线稿还是上色图，都无法包含

光影、材质等细节信息，图像没有立体感，与实物相联

系需要在脑中进行一定程度的转化。用在飞行手册汇

中不仅客户阅读体验较差，而且无法形成直接有效的

感性认知，对于飞行员在紧急情况下参考飞行手册会

产生不利影响。

位图是由无数有颜色的像素点集合形成的彩色图

像，格式有JPG、PNG等，如图2。对三维数模进行渲染

得到的位图能够传达优质的立体感和表面材质等细

节信息，包含复杂的光影，视觉效果最好。但位图文件

数据中存储了所有像素点的位置和颜色信息，分辨率

越高则图像越清晰，数据量越庞大。渲染后的位图无

13

科技创新导报

2021 NO.09

Science and Technology Innovation Herald

航空航天科学技术

图5 金属质感的模拟图6 玻璃质感的模拟

图7 模块化的灯光效果

图8 带保护盖的按压开关图9 圆头拨动开关

图10 平头拨动开关

法解决文件数据量和清晰度之间的矛盾关系。

为解决上述问题，本文原创作图方法，在矢量图上

手动绘制光影滤镜的形式，如图3，保证视觉效果的同

时控制文件数据量大小。选用SVG格式，可以在图片文

件中同时保有矢量图和位图元素，并且SVG作为一种

较为通用的图像格式，能够被多种图像处理软件和阅

读软件支持，普通的IE浏览器通过安装相关插件也能

够在保留矢量特征的前提下发布SVG格式图片。

用上述3种作图工艺分别做了试做样品，并编写方

案评价表（见表1）对三套方案做对比分析：

14

综合考虑清晰度、美观度、长期修改便捷等元素，

选择第三套工艺方案。

3 绘图技术

根据第三套工作方案“矢量图叠加滤镜”的工作

原理，如图4，制订面板开关插图的绘制原则：

采用矢量元素绘制大面积色块，可有效降低图像

数据量；

采用滤镜和位图元素手动描绘光影效果，能得到

高美观度；

采用矢量元素绘制字符等关键信息，可保证关键

航空航天科学技术

表1 方案评价表

技术

路线

CGM

矢量图

制图工具

ISOdraw

软件

小

数据量清晰度

所有元素

可无限放大

保持清晰

受限于开关

图标尺寸，

清晰度较低

2021 NO.09

Science and Technology Innovation Herald

科技创新导报

美观度

低

作图时间

初绘30min

修改5min

(仅修改关键信息)

初绘1h

修改1h

(每次修改都要重

复渲染)

绘图人员技术

要求

较低

基础线条和

上色

较低

赋材质、打

光等渲染方法

相对固定

位图(数模

渲染图)

3ds Max

ProE

等渲染软件

大

随清晰度提

高增大

高

SVG矢量图

叠加滤镜

Adobe

Illustrator

软件

较小

控制滤镜的

使用，数据量

趋于矢量图

关键元素

用矢量形式

可无限放大

保持清晰

高

初绘2h

修改5min

(仅修改关键字符)

高

光影元素形

状不固定、上

色复杂，多滤

镜叠加灵活运

用

信息放大后的清晰度，又能保证未来可二次编辑。

基于上述原则，制订以下飞机面板绘制技术方

法：

（1）选用Adobe Illustrator软件作为制图的主要工

具，部分光影元素的处理采用Photoshop软件做加工

[4]

，

再叠加到Illustrator的SVG文件中。

（2）Illustrator软件色彩模式有两种，RGB和CMYK。

RGB一般描述显示器、扫描仪、照相机等设备的颜色，

CMYK适用于彩色打印或印刷设备

[5]

，针对驾驶舱显示

设备的应用需求须采用RGB模式进行绘制

[6]

。利用软件

内的矢量图工具绘制图像中占比最大的色块，例如面

板开关的底板和基本造型

[7]

。

（3）强调立体感，可针对阴影、高光、指示灯扩散

光等少量局部元素，利用Adobe Illustrator软件中的渐

变上色工具、模糊工具、透明度设置等功能绘制

[8]

。

（4）考虑到要将数据量降到最低，应减少数据量

大的滤镜运用。规则形状的模糊用渐变功能实现，由

中心白色渐变至透明，单个元素数据量比模糊工具减

小了6倍。

（5）不规则轮廓形状的模糊采用边缘模糊，内部

镂空并填充矢量元素，减少模糊元素的使用面积。单

个元素数据量比模糊工具减小了1倍。

（6）反射材质的反射率、反射模糊率同样取决于材

质的光滑程度，即材质越光滑，反射就越强烈，反射模

糊率就越低，高光就越明显。通过调整高光的渐变色

[8]

变化率控制反光质感，可以表现出不同的材质，例如明

暗渐变色的剧烈变化可以体现金属质感，如图5。柔和

的渐变加上透明度调节，可以模拟玻璃质感，如图6。

（7）对于光影条件复杂的图像，可在Adobe

Illustrator软件中做多层光影叠加，或通过Photoshop软

件绘制，然后以较低的分辨率输出无背景的PNG格式

图片元素，再插入到SVG格式文件中。

（8）开关周围的标识字符和开关上的字符型指示

灯，采用矢量元素书写，并在SVG文件中保持文字字符

的形式，宋体或Arial等常用的字体可保证图片中的文

字在不同软件中发布的通用性，并且后期二次修改时

只需要更改文字内容，尺寸、字体、颜色默认与先前一

致。若将文字转化为图形，虽然能保证该元素可被不

同软件识别，但不便于后期引用修改，每次改写文字都

需要重新书写并调整文字的尺寸、字体、颜色。

（9）运用“模块化”思想，模板中所有非关键元素

全部实施“编组”，并且“锁定”，仅留“指示灯”和“字

符”供后期修改编辑。通过“模块化”，各类灯光效果

元素也可独立修改为“灯亮”和“灯灭”状态(见图1)。

4 批量生产

模板绘制完成后，从模板库里按需选取各类型的

开关模板，并修改成适用于各专业的独特开关。

图标绘制各种完成后，为了更好地服务于飞行员

的阅读，还应从实际应用场景评估使用效果，将绘制

完成的图标导入手册中，订立可视化评估标准，包括外

15

科技创新导报

2021 NO.09

Science and Technology Innovation Herald

观符合度（造型、材质、颜色）、状态辨识度（指示灯、

字符、指向、档位）等，通过纸质打印及电子浏览等不

同形式，评估视觉效果，并提出改进意见。

（1）带保护盖的按压开关（见图8）。

提出意见：指示灯被遮挡，不易看清。

解决措施：

保护盖不透明度调整为40%；

调整图层，指示灯在保护盖上方；

字符不严格按照真实位置描绘，而是向上移动避

开干扰；

指示灯字符加粗。

（2）圆头拨动开关（见图9）。

提出意见：缩小后，指向不易看清。

解决措施：

拨动开关凸头拉长，超出外圈；

拨动开关色系调为乳白色；

删除部分阴影元素；

调节高光元素形状，提高亮度。

（3）平头拨动开关（见图10）。

提出意见：档位指向不易看清，且造型有偏差。

解决措施：

用新的视线角度重画；

改变颜色形成反差；

增加开关厚度和底杆细节；

增强细节处的光影表现。

5 工作成果

目前研究成果已应用到实际生产中，采用这项技

术在飞行手册中插入250幅开关图标，数据增量仅6.5

兆，每个开关平均30kb。

提升控制板类插图长期修改维护的效率，单幅修

改时间1h降至5min。

6 结语

科技进步提升了生活和工作质量，也对服务类产

航空航天科学技术

品提出了更高的用户体验要求。未来电子飞行手册普

及后，势必要在其中融入丰富的多媒体展示形式，许

多新的多媒体技术都急需手册编制人员去掌握和开

发。同时也应看到，飞机构型多变、插图数量繁多、不

同手册间联动困难……这些因素都使得编制人员任务

繁重，素材管理千头万绪。探寻新技术用于提升产品

质量和客户体验的同时，也有必要应用新技术、新方

法来提升工作效率和管理质量。

本文介绍的矢量图加滤镜的绘制方法，可以模拟

渲染图的高美观度，同时获得接近矢量图的高清晰度

和低数据量，为飞行员提供感性认知，加深学习印象。

同时此项技术成果也可应用于更多领域，比如，飞机

的电子飞行模拟软件，提升软件的画面质量、运行流

畅度。

参考文献

[1] 邓月莲,施华刚.东航开启全机队“无纸化驾驶舱”时

代[J].空运商务,2016(8):7.

[2] 李渊恒.采用系统工程方法的飞行机组操作手册编

写与控制浅谈[J].科技创新导报,2017,14(17):176-

178.

[3] 赵麟.基于人的因素的驾驶舱资源管理[J].管理工程

师,2020,25(3):61-66.

[4] 胡勇.风电场无功补偿容量配置及优化运行研究[J].

中国设备工程,2020(23):129-130.

[5] 昝贵府.数字印刷高精度色彩管理[J].印刷杂

志,2016(9):9-12.

[6] 褚江萍.民机驾驶舱显示色彩人为因素初步评估算

法[J].航空计算技术,2017,47(6):93-96.

[7] 廖志强.基于MAPublisher的地图快速更新机制

研究[J].测绘与空间地理信息,2020,43(7):88-

92,96,100.

[8] 陈少英.SVG中数据挖掘与应用[J].电子技术与软件

工程,2020(21):131-133.

16