基于Illustrator的SVG交互研究初探

吳笑眉

(江蘇聯(lián)合職業(yè)技術(shù)學(xué)院 揚(yáng)州商務(wù)分院，江蘇揚(yáng)州 225000)

基于Illustrator的SVG交互研究初探

吳笑眉

(江蘇聯(lián)合職業(yè)技術(shù)學(xué)院 揚(yáng)州商務(wù)分院，江蘇揚(yáng)州 225000)

Adobe Illustrator作為一種重要的矢量圖形設(shè)計(jì)軟件，是SVG圖形的主要?jiǎng)?chuàng)建和編輯軟件之一。SVG格式在網(wǎng)頁(yè)顯示時(shí)能適應(yīng)各種分辨率，且其在網(wǎng)頁(yè)交互方面也具有優(yōu)勢(shì)，交互功能可以通過多種途徑實(shí)現(xiàn)。主要針對(duì)Illustrator軟件利用“SVG交互”面板如何實(shí)現(xiàn)交互進(jìn)行初步探討，實(shí)現(xiàn)簡(jiǎn)單的腳本交互和外部鏈接交互。

Illustrator; SVG; 交互

1 Illustrator與SVG簡(jiǎn)介

1.1 Illustrator簡(jiǎn)介

Illustrator是出版、多媒體和在線圖像的工業(yè)標(biāo)準(zhǔn)矢量繪圖軟件。廣泛應(yīng)用于出版印刷、書籍排版、專業(yè)插畫、多媒體圖像處理和互聯(lián)網(wǎng)頁(yè)面的制作等方面，無(wú)論是生產(chǎn)印刷出版線稿的設(shè)計(jì)者、從事包裝設(shè)計(jì)的職業(yè)插畫家、生產(chǎn)多媒體圖像的藝術(shù)家，還是互聯(lián)網(wǎng)網(wǎng)頁(yè)設(shè)計(jì)師，都能通過Adobe Illustrator中提供的具有突破性、富有創(chuàng)意的選項(xiàng)和功能強(qiáng)大的工具，實(shí)現(xiàn)自己的設(shè)計(jì)意圖。

Illustrator可以保存為多種圖片格式，其中ai、eps、svg可以保存矢量圖形信息；png、jpg可以保存位圖圖像信息。

1.2 SVG簡(jiǎn)介

SVG(Scalable Vector Graphics即可縮放矢量圖形)是W3C(World Wide Web Consortium即萬(wàn)維網(wǎng)聯(lián)盟)組織為適應(yīng)互聯(lián)網(wǎng)Web應(yīng)用的飛速發(fā)展需要，而制定的一套基于XML語(yǔ)言的可縮放矢量圖形語(yǔ)言描述規(guī)范。

SVG嚴(yán)格遵從XML語(yǔ)法，并用文本格式的描述性語(yǔ)言來描述圖像內(nèi)容，是一種和圖像分辨率無(wú)關(guān)的矢量圖形格式。但是SVG并不是靜態(tài)的圖形，它可以通過相關(guān)命令實(shí)現(xiàn)動(dòng)畫及交互，這使得它被越來越多的設(shè)計(jì)師所接受。

SVG圖形的創(chuàng)建和編輯可以使用很多軟件，例如大型軟件adobe illustrator， visio, CorelDRAW，在線工具svg-edit，開源軟件Scribus、Karbon14、Inkscape以及Sodipodi等。愛好者們還制作并提供了多種在線編輯工具方便地制作SVG文件。

2 SVG交互

SVG的交互可以通過三個(gè)層次完成：鏈接、事件和腳本。

交互鏈接：鏈接是交互形式匯總最基本的。在SVG中，通過標(biāo)簽提供鏈接內(nèi)容，中間加入xlink:href鏈接某一文件或網(wǎng)址。比如，表示對(duì)應(yīng)對(duì)象鏈接到網(wǎng)址https://www.baidu.com/。

交互事件：事件主要是鼠標(biāo)和鍵盤相關(guān)的操作，在對(duì)應(yīng)操作時(shí)對(duì)象做出反應(yīng)。SVG支持click鼠標(biāo)單擊、……等事件。例： ，set后面設(shè)置對(duì)象的交互反映效果，begin表示觸發(fā)開始的事件，end表示觸發(fā)結(jié)束的事件。

交互腳本：SVG支持VBScript和JavaScript等腳本語(yǔ)言，腳本的觸發(fā)器需要在一般“事件”名稱前加上on，比如，事件click變成onclick。將腳本嵌入SVG中：

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

//鏈接名為a的JavaScript文件

3 Illustrator中的SVG交互

在Illustrator中可以直接繪制圖形，并保存為SVG格式。

Illustrator中完成SVG交互，可以使用“SVG交互”面板(“窗口”>“SVG交互”)將交互內(nèi)容添加到圖稿中。但是在Illustrator官方幫助文件上，對(duì)這一部分只做了面板按鈕及命令操作方法的介紹。下面針對(duì)該面板的具體操作，通過實(shí)例介紹實(shí)現(xiàn)SVG交互的方法。

這里用一個(gè)簡(jiǎn)單的JavaScript語(yǔ)句” alert(“Hello!”); ”作為SVG交互在Illustrator中的初步嘗試。

3.1 直接輸入腳本代碼

在Illustrator中繪制一個(gè)圖形(這里以“矩形”為例)，在“SVG交互”面板中選擇一個(gè)“事件”(這里以“onclick”為例，在元素上單擊鼠標(biāo)時(shí)觸發(fā)動(dòng)作)，直接輸入JavaScript代碼alert(“Hello!”)。

將文件保存為SVG格式。完成后，用瀏覽器打開SVG文件，點(diǎn)擊矩形，查看效果，如圖。

使用文本工具(如記事本)，打開svg文件，查看代碼，相應(yīng)代碼如下：

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">//對(duì)應(yīng)圖層1畫板的寬高值

//灰色的矩形，點(diǎn)擊它彈出警告框

//文本“點(diǎn)我！”字體等的屬性

3.2 鏈接外部腳本文件

在Illustrator中繪制一個(gè)圖形，選擇所需的觸發(fā)動(dòng)作，即事件(這里仍以“onclick”為例)，通過“SVG交互”面板上的添加文件鏈接a.js。

輸入文件中的function名稱display_alert()，保存為SVG格式。用瀏覽器打開，點(diǎn)擊矩形，查看效果。

查看代碼，發(fā)現(xiàn)其中不同的部分是產(chǎn)生鏈接語(yǔ)句及對(duì)應(yīng)的事件內(nèi)容：

//矩形上對(duì)應(yīng)單擊事件

4 小結(jié)

Illustrator作為一款圖形圖像設(shè)計(jì)軟件，其交互功能并非其所長(zhǎng)，但是簡(jiǎn)單的交互是可以方便地通過一些設(shè)置完成的。

通過以上效果和代碼比較可以看出，初步實(shí)現(xiàn)了通過Illustrator進(jìn)行交互的嘗試，兩種方法實(shí)現(xiàn)了同樣的效果；直接輸入代碼，便于實(shí)現(xiàn)簡(jiǎn)單事件響應(yīng)；使用鏈接文件，可以定義復(fù)雜內(nèi)容的function，使用某個(gè)對(duì)象調(diào)用即可。

在Illustrator中進(jìn)行SVG交互的設(shè)置，是以“交互腳本”為主要途徑，具有操作對(duì)象可視性強(qiáng)、操作相對(duì)簡(jiǎn)單的特點(diǎn)。但是，如果期望實(shí)現(xiàn)復(fù)雜的功能，還需要進(jìn)行進(jìn)一步的探討。

[1]王仲, 董欣, 陳曉鷗. SVG——一種支持可縮放矢量圖形的Web瀏覽語(yǔ)言規(guī)范[J]. 中國(guó)圖象圖形學(xué)報(bào), 2000, 5(12).

[2]侯宇, 李素有. 基于XML的SVG技術(shù)及其應(yīng)用[J].計(jì)算機(jī)應(yīng)用研究, 2002, 19(5):136-138.

[3]Adobe公司.Illustrator 幫助[EB/OL].https://helpx.adobe.com/cn/illustrator/topics.html.

[4]威爾頓(Paul Wilton),麥克匹克(Jeremy McPeak). JavaScript入門經(jīng)典[M]. 北京:清華大學(xué)出版社,2011.

A Study on the SVG Interaction Based on Illustrator

WU Xiao-mei

(Yangzhou Business Branch of Jiangsu Union Technical Institute, Yangzhou, Jiangsu 225000)

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.

Illustrator; SVG; interactivity

2016-09-02

吳笑眉(1983-)，女，江蘇揚(yáng)州人，江蘇聯(lián)合職業(yè)技術(shù)學(xué)院揚(yáng)州商務(wù)分院信息電子系講師，碩士。研究方向：計(jì)算機(jī)基礎(chǔ)與圖形圖像設(shè)計(jì)等教學(xué)與研究。

TP312.1

A

1008-8156(2016)03-0055-03

修回日期：2016-09-13