creating svg with adobe illustrator

TABLE OF CONTENTS1 Introduction to the SVG file format

3 Creating SVG with Illustrator

5 Adding interactivity to SVG

6 Outputting SVG from Illustrator

10 Reopening SVG files in Illustrator

10 Publishing SVG content using GoLive CS2

12 Animating SVG content for mobile devices

14 Viewing and using SVG

WHITE PAPER

Creating SVGwith Adobe Illustrator CS2

Adobe® Illustrator® CS2 offers 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 hands-on training on how to use Adobe products).

Introduction to the SVG file formatSVG 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 plat-form. Many leading companies joined the SVG effort to produce the SVG Tiny and SVG Basic profiles, collectively known as SVG Mobile, which is targeted at resource-limited devices, such as mobile handsets and handheld devices.

• The SVG Tiny (SVG-t) specification 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 assis-tants (PDAs), and uses a less restrictive subset of the SVG standard to allow for richer graphics and interactivity.

The SVG Mobile specification 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 different namespaces simultane-ously within the same web page. SVG has been widely adopted for Location Based Ser-vices (LBS) that focus on providing Geographic Information Systems (GIS) and spatial information via mobile phones and PDAs. GIS has very specific 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.

2Creating SVG with Adobe Illustrator CS2

SVG is a royalty-free and vendor-neutral open stan-dard developed under the W3C Process. It has strong industry support. Authors of the SVG specification 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.

Benefits of using SVGThe benefits of using SVG to publish vector graphics on mobile phones and the web include:

Small file size On average SVG files 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 it’s 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 offers a palette of 16 million colors, and supports ICC color profiles, sRGB, gradients, and masking.

Interactivity and intelligence Since SVG is XML-based, it offers unparalleled dynamic interactivity. SVG images can respond to user actions with highlighting, tool tips, special effects, audio, and animation.

Zooming Users can magnify an image up to 1600% without sacrificing sharpness, detail, or clarity.

Text stays text Text in SVG images remains editable (within the source code) and, more impor-tantly, is searchable (unlike in raster and binary counterparts). There are no font or layout limita-tions, and users always see the image the same way you do.

An SVG file 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.

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 file looks like this:

... code deleted ...<rect id=”Rectangular_shape” fill=”#FF9900” width=”85.302” height=”44.092”/><ellipse id=”Elliptical_shape” fill=”#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=”̓ Myriad-Roman ”̓ font-size=”31.2342”>SVG</text>... code deleted ...

The three objects that make up this example are readily identifiable. 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 fill color of the ellipse by simply changing the color value in the fill description.

SVG is certainly not limited to such simple examples. SVG content can include raster images, SVG filter effects, 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 fea-tures for creating SVG content.

SVG is the best choice for publishing resolution-independent vector graphics to handheld de-vices 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 con-tents 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> ob-jects, but the syntax for describing a basic shape can be very useful for hand-coding and manipulating an object’s properties via scripts.


SVG can also be used in a variety of workflows that require dynamic generation of content, such as GIS, news feeds, weather and traffic reports, and financial 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 CS2Illustrator 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 startAlthough SVG is scalable—meaning that it can be resized without losing resolution—you should work within the dimensions of the final use if you are working with bitmap graphics to ensure that the bitmaps are optimized in quality and file 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 effects that affect an underlying image or if your vector art has transparency effects that would cause transparency flattening in SVG output.

Because SVG is viewed on an RGB raster display device, such as a monitor, the Illustrator docu-ment color mode should be set to RGB. You can select the color mode either in the New Docu-ment dialog box or by choosing File > Document Color Mode. You should also make sure that the RGB color settings are defined as sRGB (select Edit > Color Settings). If you have a full ver-sion of the Creative Suite, you can define 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 identifier, 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 affect work that has already been done; it is effec-tive only for new elements.

Managing graphic objectsWhen 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 file.

Fewer points means lighter filesThe original butterfly on the left is 84 KB when output to SVG. The simplified file requires only 20 KB.


When working with complex graphics, such as an illustration, simplify the artwork by reducing the number of points needed to represent it. Fewer points significantly reduces the amount of textual information needed to describe the artwork in the SVG file. To simplify graphics in Illus-trator, select Object > Path > Simplify and experiment until you find the ideal trade-off 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 identifier.

Naming objects and layers in the Layers palette generates useful identification 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 specific 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 bot-tom up. Therefore, the topmost object is drawn last.

SymbolsIf your artwork contains objects that are repeated, such as the button backgrounds in the above image, use the Illustrator Symbols feature, which defines 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 filter effectsIn addition to a variety of Adobe Photoshop® and vector filters and effects, Illustrator supports SVG filter effects. Using SVG filter effects on your vector objects preserves the object’s vector data and allows scalable graphic effects. For example, an SVG filter effect 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


object with an SVG filter effect or outputting the image to a high-resolution printer causes no loss in image quality.

SVG filter effects are essentially instructions for dynamic client-side rendering of such common but powerful effects as Gaussian blurs and specular highlighting. Illustrator has a number of preset SVG filter effects, but it’s also easy to create your own effects or import definitions from other SVG files.

To apply an Illustrator SVG filter effect, choose Effects > SVG Filter Effects and select one of the available filter effects. To preview the filter effect before applying it, choose Effects > SVG Filter Effects > Apply SVG Filter and select Preview.

You can edit, add, and delete SVG filter effects, using the three buttons below the list, as well as preview the effect on your target object.

To manually edit a filter effect, select Edit SVG Filter.

Note: Small mobile devices might not be able to process SVG filters in real time; therefore, SVG filter effects 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 effects to not appear as desired.

Adding interactivity to SVGYou 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 file 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 don’t 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 paletteYou 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 file:

<a xlink:href=”http://www.adobe.com/svg” > <rect y=”194” fill=”#FF1A00” width=”24.371” height=”26”/>

</a>

You can add other standard HTML commands to links either directly in the SVG source file 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


Adding interactivity using the SVG Interactivity paletteThe 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 file. For ex-ample, 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 file.

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 effects. In this case, it is important to use identifiers (names) for all of your objects.

elemHide(evt, 'ID_of_object')

elemShow(evt, I̒D_of_object̒ )

Using the SVG Interactivity palette, you can also link any number of external script files and link any object in Illustrator with any number of JavaScripts and functions. If you plan to use the same JavaScript file for several actions, you might want to link it rather than embed it in the SVG file. This can be useful when changes need to be made globally to the JavaScript file.

SVG Tiny and SVG Basic support the SVG 1.1 events listed in the Event menu. SVG Tiny, how-ever, 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 offer advanced solutions when adding interactivity to SVG Tiny files, which is described later in this document.

Outputting SVG from IllustratorNow that you have prepared the content, it’s 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 workflow process for those working directly with the SVG code.

Any Illustrator file can easily be saved as an SVG file. You can save the entire illustration as an SVG file by using any of the Save commands, or you can save a sliced area of your artwork with the Save For Web command. The first method provides the most control over specific SVG op-tions, but the second method lets you use Illustrator as a web page layout tool, enabling you to streamline the page by selectively optimizing specific graphical areas in different 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 file.

SVG and SVGZ file typesThe uncompressed SVG format is ideal if further hand-coding using a text editor will be needed.


SVGZ is a compressed gzipped version of the SVG file. Compression reduces the file 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 files) cannot be compressed sig-nificantly. SVGZ files can be uncompressed by any application that expands gzipped files. When designing for mobile workflows, be sure that the intended device can decompress gzipped files if you are saving to SVGZ.

After you have selected your file type and named your file, 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 file in source mode or preview mode.

In the SVG Options dialog box, choose the DTD (Document Type Description) to associate with your SVG file. In addition to the SVG 1.0 file format, you can choose one of the following updated formats:

SVG 1.1—Ideal for content intended to be viewed on the web. The features and syntax are com-patible with SVG 1.1.

SVG Tiny 1.1—Suitable 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 fill opacity (trans-parency), store opacity, and gradient. The features and syntax are compatible with SVG Tiny 1.1.

SVG Basic 1.1—Suitable for handheld devices. The features and syntax are compatible with SVG Basic 1.1.

FontsEmbedding fonts makes your SVG file slightly heavier, because additional text is needed inside the file 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 different 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 fidelity for display-ing text. The Adobe SVG Viewer can display text using this format, however, not all viewers support it.

SVG—The standard W3C SVG font format. It is supported by all viewers, but does not produce the best visual fidelity for small text due to the lack of hinting (or automatic kerning which, de-pending on the actual size of the font, increases or reduces the space between single characters; small type requires more letterspace).


Convert to outline—Converts all text to outlined paths. The visual fidelity 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 defined in the CSS level 2 specification. 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 files 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 Used—Creates 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 file is dynamic and the text might change.

Common English—Includes a set of English font characters. This is useful when the textual content of the SVG file might change. Do not use this option if the SVG file is intended for an international audience.

Common English & Glyphs Used—Combines the information of the Only Glyphs Used and Common English options.

Common Roman—Includes a set of Roman-letter font characters and accented letters. It is useful if the SVG file contains text that might change.

Common Roman & Glyphs Used—Includes the Roman-letter font subset and the glyphs used in the file.

All Glyphs—Includes 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 flexibility if portions of the text need to be edited in the SVG file using its text-based format.

ImagesVector 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 file size, but ensures that the images are always included with the file.

• Link documents to images exported from the original Illustrator file. This is useful when you are using multiple SVG files that share common raster elements. Images are saved as JPEG (alpha channel is not supported) or PNG (supports alpha channel). Linking files can also help you create a cleaner SVG file that does not contain long strings of binary code definitions of the raster content.

Preserve Illustrator Editing CapabilitiesThis option preserves Illustrator editing capabilities for future revisions. This can be useful if your file 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 files than simple SVG files because they contain both Illustrator and SVG code. This option is not recommended if you are creating SVG output for mobile devices. This option affects the way Illustrator opens the SVG file on further edits: it ignores any changes you might have made to the portions of the SVG file.

Note: Illustrator CS2 does not preserve the editing capabilities by default as it did in earlier ver-sions. If you need to keep Illustrator-specific information in your file, you must select this option.

CSS PropertiesCSS Properties determines whether attributes are placed within the CSS code. Illustrator sup-ports all of the SVG methods of applying style properties. How you choose to save the illustra-tion affects how easy it will be to script the SVG file. You can choose from the following options:


Presentation Attributes—Elements 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 Attributes—Creates the most readable file, but might increase the file 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 file size because styles are placed at the beginning of the SVG file and referenced by each object that uses them.

Style Elements—Best 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 defined in your illustration is located near the top of the SVG file, very much like in an HTML file.

Note: CSS properties are not available for the SVG Tiny file format.

Decimal PlacesThis option specifies the precision of vectors in the exported artwork. The values range from 1 to 7, where a high value results in a larger file and increased image quality. The lower you set this value, the less information is needed to describe the vectors. The best choice for most files is 3.

EncodingYou can choose which encoding to use when saving the SVG file. Remember that SVG is text-based, 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-1—Suitable 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 file.

Unicode (UTF-16)—Enables double-byte formats.

Optimize for Adobe SVG ViewerThis option uses shortcuts to optimize the rendering performance of the SVG file by the Adobe SVG Viewer. All the necessary code to represent the file in other viewers is also written into the file.

Include Adobe Graphics Server DataThis 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 DataSimilar to Preserve Illustrator Editing Capabilities, this option lets you save slicing data and optimization settings in the SVG file for future use in Illustrator.

Include XMPSelect this option if you require file information (metadata), such as the author, date created, or date modified, to be included with the document. Adobe XMP is an XML-based solution for including information about files in the files themselves and integrates perfectly within the XML structure of SVG.

Output Fewer <tspan> ElementsThis option reduces file 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 PathSelect 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.


Show SVG CodeThis button shows the code of the SVG file as it would output with the current Save options. Show SVG Code lets you check how simple or complex the file will be when reopened in a text editor for editing.

PreviewThis button opens your browser to preview how the SVG file looks when viewed in a browser. You can use it to check whether URLs or actions function properly before saving the file.

Reopening SVG files in IllustratorAt times it might be necessary to edit SVG files using Illustrator. Because the Illustrator and SVG DOMs are very different, 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 files to and out of Illustrator to retain the interactivity and animation code. Namespaces, identifiers, 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 file and is preserved when the file 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 pro-duce SVG that will need further editing. These options might not preserve visual fidelity, but they output text in a form that makes more sense if the SVG needs editing or animation.

Publishing SVG content using GoLive CS2In addition to viewing source code and tracking hyperlinks in SVG files, GoLive offers signifi-cant new tools for working with SVG mobile files. You can open SVG Tiny files and edit them in the Layout, Source, or Outline editor.

In Layout mode, you can add actions to the SVG file, which is much more difficult to do in Illustrator.

You can open SVG Tiny files in GoLive to preview content and edit the interactivity of single objects.

To add interactivity to any object in your SVG file, 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

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 Work-ing Group is defining the behavior of some format combinations, addressing the needs for an extensible and interoperable web.


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 defining the event, using the following options:

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

Scale Shape—You can modify the scale of the object by resizing it along the x and y axis, offset it from its current position, and assign a duration for the action.

Set Attribute—You can give the attribute a name and value.

Set Color—You can modify the stroke and fill attributes of the vector object, which is useful when creating rollover effects, such as changing the color of a button as the user passes the cur-sor over it.

In the Source editor, you can manually change code. You can save the modified file back into its original format.

Improved mobile featuresGoLive CS2 offers 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 file inside a SMIL container to achieve complex interactivity, which is needed, for example, in user interface systems and new generation mobile services.

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 offers a set of new tools for creating timelined MMS content that can incorporate SVG Tiny files inside a SMIL container.

MMSEnables the transmission of graphics, video clips, sound files, and short text messages over wireless net-works using the Wireless Application Protocol (WAP). You can easily create MMS containers in GoLive CS2.


The following shows you how to create an MMS document for mobile messaging using an SVG file 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 Recipient’s 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 file, just as you would with an image file. 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 devicesTo animate SVG Tiny content, we will use Ikivo Animator, a third-party application that inte-grates 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.

Before you beginBefore creating an animation, here are a few things to consider about an animated workflow. Ikivo Animator uses the SVG Tiny subset, which requires small file sizes for faster and standard-ized access by mobile devices. See the section “Outputting SVG from Illustrator” on what the SVG Tiny file format supports.

Economize on animations and objects, and reuse objects whenever possible to reduce file 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 files created with Illustrator.

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 different color models as well as customized swatches to modify the fill and stroke of objects selected in the stage or timeline area.

5. Lets you enter numerical values for position, rotation, and scale.


Creating a new Animator documentWe will start by creating a new animator document that profiles 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 file size for the device.

Inserting SVG content onto the stageThe Object Browser is more than a file 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 file format. If the files are not SVG Tiny compliant, Ikivo Animator makes them compliant when they are imported.

In our example, we have a file named interface.svg, which is the background for our objects. When you drag and drop the file 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 Time-line window. You can also rename or remove the elements.

Animating the attributesYou can animate the visibility, stroke and fill 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 sec-ond 0 to 4. At first 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 fine-tune the movement of the SVG object.

To animate the fill 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 sup-port transparency but, in our case, we want to give the illusion of the circle fading from the white background into red.

To finish the animation, we need to change the scale of the object from its starting point to give the illusion of it growing to its final 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 specified, and performance scales according to the platform.

Ikivo Animator-generated content is viable for mobile use but, depending on the tar-geted 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.

HyperlinkingYou can add hyperlinks by selecting objects, and then choosing Object > Add Hyper-link. 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.

PreviewingYou can preview how the animation will be seen in your chosen device by selecting View > Preview.

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

Viewing and using SVGBecause SVG is an open standard, many different SVG viewers are available. These can be thought of as SVG-only browsers, in the same way as older browsers were HTML-only browsers. These SVG viewers include an XML parser; a CSS parser; a CSS cascad-ing, specificity, and inheritance engine; and an SVG rendering engine to draw the graphics. In addition to on-screen display, some might also offer print capabilities.

SVG-enabled phones are steadily becoming more important. The following manufac-turers provide phones that are fully equipped with a compliant SVG Tiny 1.1 imple-mentation: Motorola, NEC, Nokia, Panasonic, Sagem, Sanyo, Sharp, Siemens, and Sony Ericsson.

An increasing number of viewers for SVG Tiny and SVG Basic profiles 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 specifications 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 ViewerThe Adobe SVG Viewer integrates with your web browser as a plug-in. The Adobe SVG Viewer lets you pan and zoom across SVG files. You can also interact with the SVG im-age 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.

ADDITIONAL RESOURCES AND FURTHER READINGAdobe Systems, Inc.www.adobe.com/svg www.adobe.com/illustrator www.adobe.com/golive

World Wide Web Consortium: SVG Specification and Newswww.w3.org/Graphics/SVG www.w3.org/TR/SVGMobile www.svg.org

Open Mobile Alliancewww.openmobilealliance.org

3rd Generation Partnership Projectwww.3gpp.org

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

www.w3.org/Graphics/SVG/SVG-Implementations.htm

www.w3.org/Graphics/SVG/SVG-Implementations.htm

http://www.adobe.com/svg

http://www.adobe.com/illustrator

http://www.adobe.com/golive

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

http://www.w3.org/TR/SVGMobile

http://www.svg.org

http://www.openmobilealliance.org

http://www.3gpp.org

http://www.adobe.com

creating svg with adobe illustrator

Documents