第 29 卷 第 3 期 Vol． 29 No． 3

2016 年 9 月 Journal of Zhangjiakou Vocational and Technical College September，2016

基于 Illustrator 的 SVG 交互研究初探

吴笑眉
（ 江苏联合职业技术学院 扬州商务分院 ，江苏扬州 225000）

摘要： Adobe Illustrator 作为一种重要的矢量图形设计软件，是 SVG 图形的主要创建和编辑软件之一。SVG 格

式在网页显示时能适应各种分辨率，且其在网页交互方面也具有优势，交互功能可以通过多种途径实现。主要针
对 Illustrator 软件利用“SVG 交互”面板如何实现交互进行初步探讨，实现简单的脚本交互和外部链接交互。
关键词： Illustrator； SVG； 交互
中图分类号： TP312． 1 文献标识码： A 文章编号： 1008 － 8156（ 2016） 03 － 0055 － 03

DOI:10.16220/j.cnki.cn13-1248/g4.2016.03.018
1 Illustrator 与 SVG 简介
1． 1 Illustrator 简介
Illustrator 是出版、多媒体和在线图像的工业标准矢量绘图软件。广泛应用于出版印刷、书籍排版、专业插画、多媒体
图像处理和互联网页面的制作等方面，无论是生产印刷出版线稿的设计者、从事包装设计的职业插画家、生产多媒体图像
的艺术家，还是互联网网页设计师，都能通过 Adobe Illustrator 中提供的具有突破性、富有创意的选项和功能强大的工具，
实现自己的设计意图。
Illustrator 可以保存为多种图片格式，其中 ai、eps、svg 可以保存矢量图形信息； png、jpg 可以保存位图图像信息。
1． 2 SVG 简介
SVG（ Scalable Vector Graphics 即可缩放矢量图形） 是 W3C（ World Wide Web Consortium 即万维网联盟） 组织为适应互
联网 Web 应用的飞速发展需要，而制定的一套基于 XML 语言的可缩放矢量图形语言描述规范。
SVG 严格遵从 XML 语法，并用文本格式的描述性语言来描述图像内容，是一种和图像分辨率无关的矢量图形格式。
但是 SVG 并不是静态的图形，它可以通过相关命令实现动画及交互，这使得它被越来越多的设计师所接受。
SVG 图形的创建和编辑可以使用很多软件，例如大型软件 adobe illustrator，visio，CorelDＲAW，在线工具 svg － edit，开
源软件 Scribus、Karbon14、Inkscape 以及 Sodipodi 等。爱好者们还制作并提供了多种在线编辑工具方便地制作 SVG 文件。
2 SVG 交互
SVG 的交互可以通过三个层次完成： 链接、事件和脚本。
交互链接： 链接是交互形式汇总最基本的。在 SVG 中，通过 ＜ a ＞ ＜ / a ＞ 标签提供链接内容，中间加入 xlink： href 链接
某一文件或网址。比如 ＜ a xlink： href = " https： / / www． baidu． com / " ＞ ，其中结尾用”/ ”，即可省略 ＜ / a ＞ ，表示对应对象链
接到网址 https： / / www． baidu． com / 。
交互事件： 事件主要是鼠标和键盘相关的操作，在对应操作时对象做出反应。SVG 支持 click 鼠标单击、……等事件。
例： ＜ set attributeName = " fill" from = " white" to = " black" begin = " mouseover" end = " mouseout" / ＞ ，set 后面设置对象的
交互反映效果，begin 表示触发开始的事件，end 表示触发结束的事件。
交互脚本： SVG 支持 VBScript 和 JavaScript 等脚本语言，脚本的触发器需要在一般“事件”名称前加上 on，比如，事件
click 变成 onclick。将脚本嵌入 SVG 中：
＜ script type = " text / javascript" ＞ / / 下面文本为 JavaScript 代码
＜！ ［CDATA［alert（ “Hello！ ”） ； ］］＞ / / 内层［］为具体代码，表示弹出一个警告框，显示“Hello！ ”
＜ / script ＞

收稿日期： 2016 － 09 － 02
修回日期： 2016 － 09 － 13
作者简介： 吴笑眉（ 1983 － ） ，女，江苏扬州人，江苏联合职业技术学院扬州商务分院信息电子系讲师，硕士。研究方
向： 计算机基础与图形图像设计等教学与研究。

· 55·
2016 年 9 月 张家口职业技术学院学报 第3 期

此外，在 xlink 中也可以链接 JavaScript 的文件，例如：

＜ scripttype = " text / javascript" xlink： href = " a． js" ＞ / / 链接名为 a 的 JavaScript 文件
＜ / script ＞
3 Illustrator 中的 SVG 交互
在 Illustrator 中可以直接绘制图形，并保存为 SVG 格式。
Illustrator 中完成 SVG 交互，可以使用“SVG 交互”面板（ “窗口”＞“SVG 交互”） 将交互内容添加到图稿中。但是在
Illustrator 官方帮助文件上，对这一部分只做了面板按钮及命令操作方法的介绍。下面针对该面板的具体操作，通过实例
介绍实现 SVG 交互的方法。
这里用一个简单的 JavaScript 语句”alert（ “Hello！ ”） ； ”作为 SVG 交互在 Illustrator 中的初步尝试。
3． 1 直接输入脚本代码
在 Illustrator 中绘制一个图形（ 这里以“矩形”为例） ，在“SVG 交互”面板中选择一个“事件”（ 这里以“onclick”为例，在
元素上单击鼠标时触发动作） ，直接输入 JavaScript 代码 alert（ “Hello！ ”） 。

将文件保存为 SVG 格式。完成后，用浏览器打开 SVG 文件，点击矩形，查看效果，如图。

使用文本工具（ 如记事本） ，打开 svg 文件，查看代码，相应代码如下：

＜ svg version = " 1． 1" id = " 图层_1"
xmlns = " http： / / www． w3． org /2000 / svg" xmlns： xlink = " http： / / www． w3． org /1999 / xlink" x = " 0px" y = " 0px" width = "
178． 723px"
height = " 157． 895px" viewBox = " 0 0 178． 723 157． 895" enable － background = " new 0 0 178． 723 157． 895" xml： space
= " preserve" ＞ / / 对应图层 1 画板的宽高值
＜ rect id = " demo" x = " 33． 361" y = " 53． 448" onclick = " alert（ ＆quot； Hello！ ＆quot； ） ； " fill = " #AAAAAA" stroke = " #
040000" stroke － miterlimit = " 10" width = " 112" height = " 51" / ＞ / / 灰色的矩形，点击它弹出警告框
＜ text transform = " matrix（ 1 0 0 1 64． 8616 88． 2649） " font － family = " ＇AdobeSongStd － Light － GBpc － EUC － H＇" font －
size = " 21" ＞ 点我！ ＜ / text ＞ / / 文本“点我！ ”字体等的属性
3． 2 链接外部脚本文件
在 Illustrator 中绘制一个图形，选择所需的触发动作，即事件（ 这里仍以“onclick”为例） ，通过“SVG 交互”面板上的添
加文件链接 a． js。

· 56·
2016 年 9 月 吴笑眉 基于 Illustrator 的 SVG 交互研究初探 第3 期

输入文件中的 function 名称 display_alert（ ） ，保存为 SVG 格式。用浏览器打开，点击矩形，查看效果。

查看代码，发现其中不同的部分是产生链接语句及对应的事件内容：
＜ defs ＞
＜ script xlink： href = " a． js" language = " JavaScript" ＞ / / 链接 a． js 文件
＜ / script ＞
＜ / defs ＞
＜ rect id = " demo" x = " 33． 361 " y = " 53． 448 " onclick = " display _ alert （ ） ； " fill = " # AAAAAA" stroke = " #040000 "
stroke － miterlimit = " 10" width = " 112" height = " 51" / ＞ / / 矩形上对应单击事件
4 小结
Illustrator 作为一款图形图像设计软件，其交互功能并非其所长，但是简单的交互是可以方便地通过一些设置完成的。
通过以上效果和代码比较可以看出，初步实现了通过 Illustrator 进行交互的尝试，两种方法实现了同样的效果； 直接输
入代码，便于实现简单事件响应； 使用链接文件，可以定义复杂内容的 function，使用某个对象调用即可。
在 Illustrator 中进行 SVG 交互的设置，是以“交互脚本”为主要途径，具有操作对象可视性强、操作相对简单的特点。
但是，如果期望实现复杂的功能，还需要进行进一步的探讨。
参考文献：
［1］王仲，董欣，陈晓鸥． SVG———一种支 持 可 缩 放 矢 量 图 形 的 Web 浏 览 语 言 规 范［J］． 中 国 图 象 图 形 学 报，2000，5
（ 12） ．
［2］侯宇，李素有． 基于 XML 的 SVG 技术及其应用［J］． 计算机应用研究，2002，19（ 5） ： 136 － 138．
［3］Adobe 公司． Illustrator 帮助［EB / OL］． https： / / helpx． adobe． com / cn / illustrator / topics． html．
［4］威尔顿（ Paul Wilton） ，麦克匹克（ Jeremy McPeak） ． JavaScript 入门经典［M］． 北京： 清华大学出版社，
2011．

A Study on the SVG Interaction Based on Illustrator

WU Xiao － mei
（ Yangzhou Business Branch of Jiangsu Union Technical Institute，Yangzhou，Jiangsu 225000）
Abstract： As the important vector graphic design software，Adobe Illustrator is one of the major creating and editing software
for SVG graphics． SVG format not only adapts to various resolutions on webpages，but also has advantages in webpage interaction，
which can be realized through many approaches． Therefore，this paper mainly explores how interactive function is realized by using
“SVG interactivity”panel in Adobe llustrator ，which realizes simple script interaction and external links interaction．
Key words： Illustrator； SVG； interactivity

· 57·