WHITE PAPER

Creating SVG with Adobe Illustrator CS2

TABLE OF CONTENTS 1 Introduction to the SVG le format 3 5 6 Creating SVG with Illustrator Adding interactivity to SVG Outputting SVG from Illustrator

Adobe Illustrator CS2 oers many helpful features that bring new ease to creating and managing Scalable Vector Graphics (SVG) for mobile devices and the web. This white paper describes how you can create SVG content with Illustrator and publish it to the web using Adobe GoLive or animate it using Ikivo Animator. Illustrator CS2 supports the standardized formats recommended by the World Wide Web Consortium (W3C). This paper is intended for creative professionals and developers who want to use Illustrator CS2 to create and publish SVG content. It assumes that you have some basic understanding of vector drawing, Illustrator and GoLive. (If you want to learn more about Illustrator and GoLive, the Classroom in a Book series provides excellent handson training on how to use Adobe products).

10 Reopening SVG les in Illustrator 10 Publishing SVG content using GoLive CS2 12 Animating SVG content for mobile devices 14 Viewing and using SVG

Introduction to the SVG le format

SVG is a text-based graphics language based on XML (Extensible Markup Language), and incorporates other standards such as Cascading Style Sheets (CSS), the Document Object Model (DOM), and Synchronous Multimedia Integration Language (SMIL). Three types of graphic objects can be incorporated: vector graphic shapes (such as paths consisting of straight lines and curves), raster images, and text. In 1999, the W3C introduced SVG as a standard for publishing animation and for interactive applications using vector graphics on the web. In 2004, a vast majority of companies in the mobile phone industry chose SVG as the basis for their graphics platform. Many leading companies joined the SVG eort to produce the SVG Tiny and SVG Basic proles, collectively known as SVG Mobile, which is targeted at resource-limited devices, such as mobile handsets and handheld devices. The SVG Tiny (SVG-t) specication is suitable for highly restricted mobile devices, such as mobile phones. SVG Basic (SVG-b) is targeted for higher level devices, such as personal digital assistants (PDAs), and uses a less restrictive subset of the SVG standard to allow for richer graphics and interactivity. The SVG Mobile specication has also been adopted by the Open Mobile Alliance (OMA) and the 3rd Generation Partnership Project (3GPP) as the required graphics format for next-generation phones and multimedia messaging (MMS). SVG-enabled handsets are available worldwide. SVG content can be dynamic and interactive. A rich set of event handlers, such as onmouseover and onclick, can be assigned to any SVG graphical object. Because of its compatibility and ability to leverage other web standards, features like scripting can be done on SVG elements and other XML elements from dierent namespaces simultaneously within the same web page. SVG has been widely adopted for Location Based Services (LBS) that focus on providing Geographic Information Systems (GIS) and spatial information via mobile phones and PDAs. GIS has very specic requirements: support for rich graphics, vector and raster content, and the ability to handle large amounts of data. SVG is well suited for this market.

Benets of using SVG The benets of using SVG to publish vector graphics on mobile phones and the web include: Small le size On average SVG les are smaller than other web-graphic formats, such as JPEG and GIF, and are quick to download. Display independence SVG images are always crisp on-screen and print at the resolution of your printer, whether its 300 dots per inch (dpi), 600 dpi, or higher. You never get jagged edges due to pixel enlargement or anti-aliasing. Superior color control SVG oers a palette of 16 million colors, and supports ICC color proles, sRGB, gradients, and masking. Interactivity and intelligence Since SVG is XML-based, it oers unparalleled dynamic interactivity. SVG images can respond to user actions with highlighting, tool tips, special eects, audio, and animation. Zooming Users can magnify an image up to 1600% without sacricing sharpness, detail, or clarity. Text stays text Text in SVG images remains editable (within the source code) and, more importantly, is searchable (unlike in raster and binary counterparts). There are no font or layout limitations, and users always see the image the same way you do. An SVG le is text-based, not binary. It is a human readable format very much like HTML. Even a beginner can look at SVG source code and immediately make sense of the descriptive content relative to the graphic representation.

SVG is a royalty-free and vendor-neutral open standard developed under the W3C Process. It has strong industry support. Authors of the SVG specication include Adobe, Agfa, Apple, Canon, Corel, Ericsson, HP, IBM, Kodak, Macromedia, Microsoft, Nokia, Sharp, and Sun Microsystems. SVG viewers are deployed to over 100 million desktops, and there is a broad range of support in many authoring tools, such as Illustrator and GoLive.

As a text-based format, SVG is human-readable. Many SVG object names, attributes, and values are clearly descriptive of the corresponding image. The descriptive text makes it easy to learn. It also makes project maintenance and updates substantially easier.

The code of this SVG le looks like this:

... code deleted ... < rect id=Rectangular_shape ll=#FF9900 width=85.302 height=44.092/> < ellipse id=Elliptical_shape ll=#FFFF3E cx=42.651 cy=22.046 rx=35.447 ry=16.426/> < text transform=matrix(1 0 0 1 16.2104 32.2134) font-family=MyriadRoman font-size=31.2342>SVG</text> ... code deleted ...

The three objects that make up this example are readily identiable. There is one rectangle <rect>, one ellipse <ellipse>, and a text <text> element. The positioning and styling properties are easily readable, and you can easily modify them with a simple text-editing application. For example, you could change the ll color of the ellipse by simply changing the color value in the ll description. SVG is certainly not limited to such simple examples. SVG content can include raster images, SVG lter eects, animation, and interactivity. For more complex graphics, the SVG designer needs to use a graphics editing tool that is suitable for vector graphics. Illustrator has supported SVG content creation since version 9; the latest release, Illustrator CS2, presents the richest features for creating SVG content. SVG is the best choice for publishing resolution-independent vector graphics to handheld devices and the web. SVG can easily be integrated into many types of applications, whether for use in a user interface or to provide interactive dynamic content. SVG is ideal for creating dynamic content because you can modify the position of the vectors, their appearance, and textual contents directly in the source code.

Illustrator supports SVG basic shapes (referred to as primitives), such as <ellipse> and <rect> as seen in the code on the left, making reading, writing, and transforming SVG objects straightforward. SVG basic shapes can also be represented as SVG <path> objects, but the syntax for describing a basic shape can be very useful for hand-coding and manipulating an objects properties via scripts.

Creating SVG with Adobe Illustrator CS2

SVG can also be used in a variety of workows that require dynamic generation of content, such as GIS, news feeds, weather and trac reports, and nancial information in which graphical information must be updated in real time. SVG is also great for representing charts and rich graphical statistical data.

Creating SVG with Illustrator CS2

Illustrator CS2 is the industry-standard vector graphics application. It has a rich set of tools that enable you to generate sophisticated graphics for multiple uses. This section focuses on the new Illustrator features and functionalities that are particularly suited to optimizing SVG output for mobile devices and the web. Before you start Although SVG is scalablemeaning that it can be resized without losing resolutionyou should work within the dimensions of the nal use if you are working with bitmap graphics to ensure that the bitmaps are optimized in quality and le size for your target device (raster images do not scale well and lose sharpness when enlarged). Working within the targeted dimensions becomes even more important if you are planning to use SVG raster eects that aect an underlying image or if your vector art has transparency eects that would cause transparency attening in SVG output. Because SVG is viewed on an RGB raster display device, such as a monitor, the Illustrator document color mode should be set to RGB. You can select the color mode either in the New Document dialog box or by choosing File > Document Color Mode. You should also make sure that the RGB color settings are dened as sRGB (select Edit > Color Settings). If you have a full version of the Creative Suite, you can dene the color settings globally for all Adobe Creative Suite 2 components from the Adobe Bridge application.

SVG adheres to a set of rules to make the document compatible. Each object, group of objects, and layer must have a distinct name or identier, which needs to be unique and written in a certain way. To enforce naming compliance as you work, you can set the Identify Objects By preference to XML ID (Preferences > Units & Display Performance). This preference gives you error messages when you do not name your objects correctly or when there are duplicates: Note: Setting this preference to XML ID does not aect work that has already been done; it is eective only for new elements. Managing graphic objects When designing for SVG output keep in mind that SVG is text-based, so having fewer graphic objects (including groups) or making it less complex (fewer points), results in a smaller SVG le.

Fewer points means lighter les The original buttery on the left is 84 KB when output to SVG. The simplied le requires only 20 KB.

Creating SVG with Adobe Illustrator CS2

When working with complex graphics, such as an illustration, simplify the artwork by reducing the number of points needed to represent it. Fewer points signicantly reduces the amount of textual information needed to describe the artwork in the SVG le. To simplify graphics in Illustrator, select Object > Path > Simplify and experiment until you nd the ideal trade-o between the graphics quality and the number of points. The SVG source code is human-readable, and it is important to use human-readable descriptions for any objects, object groups, and layers that you are adding to the document to make it easy to identify them later. As you start inserting graphics onto your art board, the elements appear in the Layers palette (Window > Layers). Double-clicking an element opens a window in which you can add a name or identier.

Naming objects and layers in the Layers palette generates useful identication attributes in the SVG output.

Assigning logical criteria to objects and layers not only helps you organize your work better but it is also essential for recognizing the objects inside the SVG source code or for adding interactivity to specic elements.
... code deleted... <g id=Buttons> <g id=Mail> ... code deleted ... </g> <g id=Search_World_Wide> ... code deleted ... </g> <g id=Tools> ... code deleted ... </g> <g id=Shop> ... code deleted ...

The objects that you create in Illustrator appear in the reverse order in the SVG source code. In Illustrator, the stacking order is from top to bottom. SVG, however, draws objects from the bottom up. Therefore, the topmost object is drawn last. Symbols If your artwork contains objects that are repeated, such as the button backgrounds in the above image, use the Illustrator Symbols feature, which denes the vectors that describe the object once, thereby not duplicating the vector information multiple times. Symbols are expanded to individual objects when outputting to the SVG Tiny subset, so each referenced symbol becomes an autonomous vector shape. SVG lter eects In addition to a variety of Adobe Photoshop and vector lters and eects, Illustrator supports SVG lter eects. Using SVG lter eects on your vector objects preserves the objects vector data and allows scalable graphic eects. For example, an SVG lter eect applied to a text object can create three-dimensional highlighting and shading while preserving the text content of the object so that it remains selectable and searchable. Unlike rasterized content, zooming in on an
Creating SVG with Adobe Illustrator CS2 4

object with an SVG lter eect or outputting the image to a high-resolution printer causes no loss in image quality. SVG lter eects are essentially instructions for dynamic client-side rendering of such common but powerful eects as Gaussian blurs and specular highlighting. Illustrator has a number of preset SVG lter eects, but its also easy to create your own eects or import denitions from other SVG les. To apply an Illustrator SVG lter eect, choose Eects > SVG Filter Eects and select one of the available lter eects. To preview the lter eect before applying it, choose Eects > SVG Filter Eects > Apply SVG Filter and select Preview.

You can edit, add, and delete SVG lter eects, using the three buttons below the list, as well as preview the eect on your target object.

To manually edit a lter eect, select Edit SVG Filter. Note: Small mobile devices might not be able to process SVG lters in real time; therefore, SVG lter eects are rasterized when outputting to SVG Tiny and SVG Basic. Also, some mobile devices might not be able to display transparency in raster images, causing some eects to not appear as desired.

Adding interactivity to SVG

You can add interactivity to objects in Illustrator in several ways. Hyperlinks and JavaScript (ECMAScript) actions can be associated with graphical elements and text. Note: Interactivity that is applied with the Attributes palette or the SVG Interactivity palette does not transfer to the SVG Tiny le format because this format does not support scripting. However, you can add interactive features using GoLive CS2, Beatware Mobile Designer, or Ikivo Animator.

The Attributes palette enables you to add hyperlinks to any object. Although image maps dont apply to SVG (the SVG object itself becomes the link), you must select an image map to enter a URL for the hyperlink.

Adding hyperlinks using the Attributes palette You can easily add hyperlinks to objects or a group of objects by selecting the desired target set and assigning the hyperlink from the Attributes palette (Window > Attributes). Hyperlinks are fully supported in both SVG Basic and SVG Tiny. Assigning a URL to an object adds the following code to the source le:
<a xlink:href=http://www.adobe.com/svg > <rect y=194 ll=#FF1A00 width=24.371 height=26/> </a>

You can add other standard HTML commands to links either directly in the SVG source le or in Illustrator. For example, to add a link that opens in a new window, you can add the following string in the URL box of the Attributes palette. Illustrator automatically adds the missing outer quotation marks: http://www.adobe.com/svg target=blank
Creating SVG with Adobe Illustrator CS2 5

Adding interactivity using the SVG Interactivity palette The SVG Interactivity palette (Window > SVG Interactivity) lets you assign JavaScript events to objects, groups, and layers. You can script behaviors for your illustration, such as animation and interactivity, that can be viewed by the end user. You can enter customized scripts for the selected object or link to an external script le. For example, you can add a simple JavaScript snippet to create an onmouseup event that opens a dialog box when an object is clicked:
window.alert('SVG Mobile!')

You can add interactivity to objects in your layout by associating JavaScript to events triggered by the end user of the SVG le.

JavaScript also allows you to script actions for showing or hiding objects or layers. For example, the following hide/show action can be very useful when designing user interfaces with rollover eects. In this case, it is important to use identiers (names) for all of your objects.
elemHide(evt, 'ID_of_object') elemShow(evt, ID_of_object)

Using the SVG Interactivity palette, you can also link any number of external script les and link any object in Illustrator with any number of JavaScripts and functions. If you plan to use the same JavaScript le for several actions, you might want to link it rather than embed it in the SVG le. This can be useful when changes need to be made globally to the JavaScript le. SVG Tiny and SVG Basic support the SVG 1.1 events listed in the Event menu. SVG Tiny, however, only allows interactivity with declarative animation, such as show and hide. Also, SVG Tiny does not support extended scripting. SVG Basic allows optional support of scripting and includes all of the language features of SVG 1.1. GoLive and Ikivo Animator oer advanced solutions when adding interactivity to SVG Tiny les, which is described later in this document.

Outputting SVG from Illustrator

Now that you have prepared the content, its time to publish it to a mobile device or the web. Understanding how Illustrator generates SVG and which SVG features are supported can greatly enhance the quality of the output and the workow process for those working directly with the SVG code. Any Illustrator le can easily be saved as an SVG le. You can save the entire illustration as an SVG le by using any of the Save commands, or you can save a sliced area of your artwork with the Save For Web command. The rst method provides the most control over specic SVG options, but the second method lets you use Illustrator as a web page layout tool, enabling you to streamline the page by selectively optimizing specic graphical areas in dierent web graphics formats (with SVG as one of the options). This document focuses on the Save commands, although the information can easily be applied to the Save For Web option. Note: Saving sliced data is incompatible with SVG mobile formats because they require the use of a single le. SVG and SVGZ le types The uncompressed SVG format is ideal if further hand-coding using a text editor will be needed.
Creating SVG with Adobe Illustrator CS2 6

SVGZ is a compressed gzipped version of the SVG le. Compression reduces the le by up to 80%, depending on the content. Text can usually be heavily compressed, but binary-encoded content, such as embedded rasters (such as JPEG, PNG, or GIF les) cannot be compressed signicantly. SVGZ les can be uncompressed by any application that expands gzipped les. When designing for mobile workows, be sure that the intended device can decompress gzipped les if you are saving to SVGZ. After you have selected your le type and named your le, the SVG Options dialog box appears.

Illustrator CS2 features a complete set of options for outputting SVG to mobile devices and the web using the latest W3C standards. After you have selected your options, you can preview the le in source mode or preview mode.

In the SVG Options dialog box, choose the DTD (Document Type Description) to associate with your SVG le. In addition to the SVG 1.0 le format, you can choose one of the following updated formats: SVG 1.1Ideal for content intended to be viewed on the web. The features and syntax are compatible with SVG 1.1. SVG Tiny 1.1Suitable for mobile phones. The features and syntax are compatible with SVG Tiny 1.1. SVG Tiny 1.1+Suitable for mobile phones. It contains additional support for ll opacity (transparency), store opacity, and gradient. The features and syntax are compatible with SVG Tiny 1.1. SVG Basic 1.1Suitable for handheld devices. The features and syntax are compatible with SVG Basic 1.1. Fonts Embedding fonts makes your SVG le slightly heavier, because additional text is needed inside the le to describe them. Each mobile phone platform has its own set of fonts, so there is no guarantee that your SVG output will look the same on dierent platforms. If fonts are crucial in your design, research the target platform as much as possible or consider creating outlines of the words. Adobe CEF (only compatible with SVG 1.0 and 1.1)Produces the best visual delity for displaying text. The Adobe SVG Viewer can display text using this format, however, not all viewers support it. SVGThe standard W3C SVG font format. It is supported by all viewers, but does not produce the best visual delity for small text due to the lack of hinting (or automatic kerning which, depending on the actual size of the font, increases or reduces the space between single characters; small type requires more letterspace).
Creating SVG with Adobe Illustrator CS2 7

Convert to outlineConverts all text to outlined paths. The visual delity of small text might not be accurately preserved, which can make the text look bolder than originally intended. SVG Basic supports downloadable fonts using the WebFonts facility dened in the CSS level 2 specication. In SVG Tiny, an SVG font can only be embedded within the same document that uses the font. You can choose from the following font subsetting options: None (Use System Fonts)Provides the smallest possible SVG les because no font information is included, except for the name of the font. This option relies on the fonts being installed on the output device. If the font is not found, substitution occurs, which might have unexpected results. Only Glyphs UsedCreates a subset of the font based on the characters that are used in the artwork. This option is not available for linked fonts. Do not use this option if the content of your SVG le is dynamic and the text might change. Common EnglishIncludes a set of English font characters. This is useful when the textual content of the SVG le might change. Do not use this option if the SVG le is intended for an international audience. Common English & Glyphs UsedCombines the information of the Only Glyphs Used and Common English options. Common RomanIncludes a set of Roman-letter font characters and accented letters. It is useful if the SVG le contains text that might change. Common Roman & Glyphs UsedIncludes the Roman-letter font subset and the glyphs used in the le. All GlyphsIncludes the full set of English and Roman-letter font characters and is the most complete font inclusion you can have in SVG. This option provides the most exibility if portions of the text need to be edited in the SVG le using its text-based format. Images Vector graphics are very powerful for creating complex illustrations, but sometimes it might be necessary to include bitmaps, such as photographic images, in your project. Using Illustrator, you can link or incorporate raster formats like JPEG, PNG, or GIF into your artwork. You can choose from the following options: Embed the image directly into your document. This slightly increases the le size, but ensures that the images are always included with the le. Link documents to images exported from the original Illustrator le. This is useful when you are using multiple SVG les that share common raster elements. Images are saved as JPEG (alpha channel is not supported) or PNG (supports alpha channel). Linking les can also help you create a cleaner SVG le that does not contain long strings of binary code denitions of the raster content. Preserve Illustrator Editing Capabilities This option preserves Illustrator editing capabilities for future revisions. This can be useful if your le contains locked layers and objects or Illustrator guides, or if you need to preserve swatch preferences, layer color coding, and other features linked to the Illustrator environment. It produces much larger les than simple SVG les because they contain both Illustrator and SVG code. This option is not recommended if you are creating SVG output for mobile devices. This option aects the way Illustrator opens the SVG le on further edits: it ignores any changes you might have made to the portions of the SVG le. Note: Illustrator CS2 does not preserve the editing capabilities by default as it did in earlier versions. If you need to keep Illustrator-specic information in your le, you must select this option. CSS Properties CSS Properties determines whether attributes are placed within the CSS code. Illustrator supports all of the SVG methods of applying style properties. How you choose to save the illustration aects how easy it will be to script the SVG le. You can choose from the following options:
Creating SVG with Adobe Illustrator CS2 8

Presentation AttributesElements are styled with individual presentation attributes, which are placed at the highest point in the hierarchy. This option makes it easy to edit individual elements using a text editor. Style AttributesCreates the most readable le, but might increase the le size. Use this for code used in transformations, such as Extensible Stylesheet Language Transformations (XSLT). Style Attributes (Entity References)Results in faster rendering times and reduced le size because styles are placed at the beginning of the SVG le and referenced by each object that uses them. Style ElementsBest option when creating a single style sheet that formats both HTML and SVG documents. This option might cause slower rendering speeds because objects need to reference the information. A style section with unique CSS class declarations for each combination of styles dened in your illustration is located near the top of the SVG le, very much like in an HTML le. Note: CSS properties are not available for the SVG Tiny le format. Decimal Places This option species the precision of vectors in the exported artwork. The values range from 1 to 7, where a high value results in a larger le and increased image quality. The lower you set this value, the less information is needed to describe the vectors. The best choice for most les is 3. Encoding You can choose which encoding to use when saving the SVG le. Remember that SVG is textbased, so it needs to have information about how it should be represented in a text editor. You can choose from the following encoding types: ISO 8859-1Suitable for European languages that might include accented characters. Unicode (UTF-8)An 8-bit format suitable for a wider variety of languages, such as Japanese, Chinese, or Hebrew, as well as European languages. You must select this option to include Adobe XMP (eXtended Metadata Platform) metadata in your le. Unicode (UTF-16)Enables double-byte formats. Optimize for Adobe SVG Viewer This option uses shortcuts to optimize the rendering performance of the SVG le by the Adobe SVG Viewer. All the necessary code to represent the le in other viewers is also written into the le. Include Adobe Graphics Server Data This option includes the extended syntax used by server scripting languages, such as Adobe Graphics Server, as well as variables and data sets created in the Illustrator document using the Variables palette. Include Slicing Data Similar to Preserve Illustrator Editing Capabilities, this option lets you save slicing data and optimization settings in the SVG le for future use in Illustrator. Include XMP Select this option if you require le information (metadata), such as the author, date created, or date modied, to be included with the document. Adobe XMP is an XML-based solution for including information about les in the les themselves and integrates perfectly within the XML structure of SVG. Output Fewer <tspan> Elements This option reduces le size, but the appearance of text might change because kerning positions are ignored. You are also more likely to get complete words or phrases, allowing for more text editability, making it easier to add animation or interactivity to the text after output. Use <textPath> Elements For Text On Path Select this option only if you know that your illustration contains text that was placed on a path using the Text On Path tool. This option uses <textpath> to write text on a path object. If it is not selected, each character is written as a <text> element, as in previous releases of Illustrator. Use this option if you want a more compact XML form, but also when you have text on paths that need to edited or indexed. This option might not preserve the appearance shown in the Illustrator document.

Creating SVG with Adobe Illustrator CS2

Show SVG Code This button shows the code of the SVG le as it would output with the current Save options. Show SVG Code lets you check how simple or complex the le will be when reopened in a text editor for editing. Preview This button opens your browser to preview how the SVG le looks when viewed in a browser. You can use it to check whether URLs or actions function properly before saving the le.

Reopening SVG les in Illustrator

At times it might be necessary to edit SVG les using Illustrator. Because the Illustrator and SVG DOMs are very dierent, data used to get lost with earlier versions of Illustrator. For example, personalized scripts got lost during conversion, causing designers and developers to reenter the code for interactivity and animation. In Illustrator CS2, a great deal of attention has been put on round-tripping SVG les to and out of Illustrator to retain the interactivity and animation code. Namespaces, identiers, metadata, and elements that are not SVG are now preserved. Basic SVG elements, such as <ellipse> or <rect>, remain such when saved back to SVG. Embedded JavaScript for animation or interactivity is handled as part of the Illustrator le and is preserved when the le is saved back to SVG. Viewboxes are preserved. Object transformations, such as Rotation, Sheering, and Scaling, are preserved where possible. Because new options reduce <tspan> elements and enable <textPath>, it is now easier to produce SVG that will need further editing. These options might not preserve visual delity, but they output text in a form that makes more sense if the SVG needs editing or animation.

Publishing SVG content using GoLive CS2

In addition to viewing source code and tracking hyperlinks in SVG les, GoLive oers signicant new tools for working with SVG mobile les. You can open SVG Tiny les and edit them in the Layout, Source, or Outline editor. In Layout mode, you can add actions to the SVG le, which is much more dicult to do in Illustrator.

Although SVG can be viewed by itself, most of the time it must be included in some sort of a container, such as SMIL. Adobe actively participates in other W3C working groups, such as the one on Compound Document Formats (CDF), which is the W3C standard for documents that combine multiple formats, such as XHTML, SVG, SMIL, and XForms. The W3C CDF Working Group is dening the behavior of some format combinations, addressing the needs for an extensible and interoperable web. You can open SVG Tiny les in GoLive to preview content and edit the interactivity of single objects.

To add interactivity to any object in your SVG le, select it and add actions from the Inspector palette. The events that are available by default are: On Load, On Click, Mouse Down, Mouse Move, Mouse Over, and Mouse Up. Developers can extend GoLive events by using the GoLive Software Development Kit (SDK) to include extensions for handheld devices, such as On Tap for touch-sensitive devices. To create a new action, click Create New Item and change the attributes of any object, which can be selected by clicking on the shape preview square and dragging a line
Creating SVG with Adobe Illustrator CS2 10

with the pointer to the element that you want to modify in the preview pane. Once the object is correctly linked and its ID appears next to the Shape icon in the actions Inspector, you can begin dening the event, using the following options:

GoLive CS2 oers tools for adding basic interactivity to SVG objects when working in Preview mode. For more advanced interactivity, developers can use the SDK.

Scale ShapeYou can modify the scale of the object by resizing it along the x and y axis, oset it from its current position, and assign a duration for the action. Set AttributeYou can give the attribute a name and value. Set ColorYou can modify the stroke and ll attributes of the vector object, which is useful when creating rollover eects, such as changing the color of a button as the user passes the cursor over it. In the Source editor, you can manually change code. You can save the modied le back into its original format. Improved mobile features GoLive CS2 oers a host of new features for publishing content on mobile devices. You can directly create pages, cascading stylesheets, and multimedia documents, such as blank XHTML Basic and MP, i-mode EU, i-mode Japanese pages, WML Decks, and MMS documents. You must incorporate the SVG Tiny le inside a SMIL container to achieve complex interactivity, which is needed, for example, in user interface systems and new generation mobile services.
MMS Enables the transmission of graphics, video clips, sound les, and short text messages over wireless networks using the Wireless Application Protocol (WAP). You can easily create MMS containers in GoLive CS2.

SMIL is used to create rich media and multimedia presentations, which can integrate streaming audio and video with images, text, and any other media type. GoLive oers a set of new tools for creating timelined MMS content that can incorporate SVG Tiny les inside a SMIL container.
Creating SVG with Adobe Illustrator CS2 11

The following shows you how to create an MMS document for mobile messaging using an SVG le created in Illustrator. MMS containers can include sound, image, and other rich media, such as SVG Tiny, 3GPP, and 3GPP movies. To create a new MMS document, open an untitled SMIL document. The Layout window includes three main areas: The slide area lets you insert text and preview your slides. The timeline area lets you add other slides and media. The preview area displays the device selected as the Recipients Device in the Main Toolbar, which you can use to check the appearance on the output device. You can set the duration of a slide by moving it along the horizontal axis. In the Tools palette, select the SVG Tiny object in the Draggable SMIL Objects section and drag it onto the timeline in the image area and use the Inspector palette to link it to the source le, just as you would with an image le. You will then be able to add other media, such as movie clips, text, and sound, to the slide or to other slides that need to be added to the timeline.

Animating SVG content for mobile devices

To animate SVG Tiny content, we will use Ikivo Animator, a third-party application that integrates seamlessly with Adobe Creative Suite 2 and is based on the Mobile SVG standard. In this document, we are using Microsoft Windows but the same functions are available for Mac OS. Ikivo Animator has all the necessary features to animate two-dimensional vector content.

1. Displays the frame of the animation that is selected in the timeline. 2. Lets you browse for SVG content, which you can then drag to the stage window. You can also launch an external editor to create new static content. 3. The timeline uses a time-interval interface in which animations are at exactly 10 frames per second. This area also displays a tree view for navigating to objects and animation attributes. 4. You can use dierent color models as well as customized swatches to modify the ll and stroke of objects selected in the stage or timeline area. 5. Lets you enter numerical values for position, rotation, and scale.

Before you begin Before creating an animation, here are a few things to consider about an animated workow. Ikivo Animator uses the SVG Tiny subset, which requires small le sizes for faster and standardized access by mobile devices. See the section Outputting SVG from Illustrator on what the SVG Tiny le format supports. Economize on animations and objects, and reuse objects whenever possible to reduce le size. Apply animations to groups of objects instead of to individual objects to avoid code repetition. In the following example, we will animate a series of SVG Tiny les created with Illustrator.

Creating SVG with Adobe Illustrator CS2

12

Creating a new Animator document We will start by creating a new animator document that proles a Sony Ericsson K700i mobile phone. Because SVG is scalable, the resulting animation can be resized to other device resolutions without losing its sharpness. If you are using bitmap graphics such as photographs, you should work within the targeted dimensions (176 x 220 pixels in this example) to ensure that the bitmaps are optimized in both graphic quality and le size for the device. Inserting SVG content onto the stage The Object Browser is more than a le browser. You can edit, create, and delete static content as well as preview SVG artwork for animation. All the elements that are present in the source folder are already in the SVG Tiny le format. If the les are not SVG Tiny compliant, Ikivo Animator makes them compliant when they are imported. In our example, we have a le named interface.svg, which is the background for our objects. When you drag and drop the le into the stage window, all the buttons and elements are added in sequence. You can change the stacking order of the elements in the treeline view of the Timeline window. You can also rename or remove the elements. Animating the attributes You can animate the visibility, stroke and ll color, position, rotation, and scale. In this example, we have placed the object Circle into the Stage window. It then appears in the timeline, where we can change the timing or add a new keyframe; we can then either change the timing of its appearance in the animation or add a new keyframe (here, a new keyframe was added at 4 seconds). We can then move the object on the stage to record the movement from second 0 to 4. At rst the line is straight, but you can easily add anchor points from the contextual menu that appears when you right-click on the curve (Control+click on Mac OS). Very much like Illustrator, you can give the curve the exact shape you need. By moving the cursor over the timeline, you can preview the movement in real time.

As in Illustrator, you can edit the paths by moving points or handles to ne-tune the movement of the SVG object.

To animate the ll color of the circle, move back to the starting point of the timeline and select the object. You can assign the object another color in the Color palette. SVG Tiny does not support transparency but, in our case, we want to give the illusion of the circle fading from the white background into red. To nish the animation, we need to change the scale of the object from its starting point to give the illusion of it growing to its nal size. Note: Unlike a video or SWF format animation, SVG is time-based and not frame-based. The advantage to being time-based is that animations play more accurately at the times and durations specied, and performance scales according to the platform.
Creating SVG with Adobe Illustrator CS2 13

Ikivo Animator-generated content is viable for mobile use but, depending on the targeted service, you might have to embed the content in XHTML or SMIL (MMS). Use GoLive CS to publish your animation with these and other standards. Hyperlinking You can add hyperlinks by selecting objects, and then choosing Object > Add Hyperlink. The full address must be given for the hyperlink to work correctly, for example, http://www.adobe.com. The user can click on the button to navigate to the desired page. Previewing You can preview how the animation will be seen in your chosen device by selecting View > Preview.

ADDITIONAL RESOURCES AND FURTHER READING Adobe Systems, Inc. www.adobe.com/svg www.adobe.com/illustrator www.adobe.com/golive World Wide Web Consortium: SVG Specication and News www.w3.org/Graphics/SVG www.w3.org/TR/SVGMobile www.svg.org Open Mobile Alliance www.openmobilealliance.org 3rd Generation Partnership Project www.3gpp.org

You can preview how your animation will perform at the resolution of any given device.

Viewing and using SVG

Because SVG is an open standard, many dierent SVG viewers are available. These can be thought of as SVG-only browsers, in the same way as older browsers were HTMLonly browsers. These SVG viewers include an XML parser; a CSS parser; a CSS cascading, specicity, and inheritance engine; and an SVG rendering engine to draw the graphics. In addition to on-screen display, some might also oer print capabilities. SVG-enabled phones are steadily becoming more important. The following manufacturers provide phones that are fully equipped with a compliant SVG Tiny 1.1 implementation: Motorola, NEC, Nokia, Panasonic, Sagem, Sanyo, Sharp, Siemens, and Sony Ericsson. An increasing number of viewers for SVG Tiny and SVG Basic proles are becoming available. The supported platforms include PalmOS, Pocket PC, BlackBerry RIM, Symbian, and others. The recommendations by the W3C and 3GPP for SVG indicate that the specications are stable and contribute to web interoperability. For a full list of mobile viewers, go to www.w3.org/Graphics/SVG/SVG-Implementations. htm. Adobe SVG Viewer The Adobe SVG Viewer integrates with your web browser as a plug-in. The Adobe SVG Viewer lets you pan and zoom across SVG les. You can also interact with the SVG image by pressing the Control key and clicking in the SVG image area. In the contextual menu, you can set the display quality, control animations, search, copy, view, or save the source code.
Adobe Systems Incorporated 345 Park Avenue, San Jose, CA 95110-2704 USA www.adobe.com Adobe, the Adobe logo, Illustrator, GoLive and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. HP is a registered trademark of Hewlett-Packard Company. IBM is a trademark of International Business Machines Corporation in the United States and/or other countries. Apple, Mac and Macintosh are trademarks of Apple Computer, Inc., registered in the United States and other countries. Microsoft and Windows are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. Sun Microsystems is a trademark or registered trademark of Sun Microsystems, Inc. in the United States and other countries. SVG is a trademark of the World Wide Web Consortium; marks of the W3C are registered and held by its host institutions MIT, INRIA and Keio. All other trademarks are the property of their respective owners. 2005 Adobe Systems Incorporated. All rights reserved. Printed in the USA. 1/05