You are on page 1of 14

WHITE PAPER

Creating SVG
with Adobe Illustrator CS2

TABLE OF CONTENTS Adobe® Illustrator® CS2 offers many helpful features that bring new ease to creating and
1 Introduction to the SVG file format managing Scalable Vector Graphics (SVG) for mobile devices and the web. This white
3 Creating SVG with Illustrator paper describes how you can create SVG content with Illustrator and publish it to the
5 Adding interactivity to SVG web using Adobe GoLive® or animate it using Ikivo Animator. Illustrator CS2 supports
6 Outputting SVG from Illustrator the standardized formats recommended by the World Wide Web Consortium (W3C).
10 Reopening SVG files in Illustrator This paper is intended for creative professionals and developers who want to use
10 Publishing SVG content using GoLive CS2 Illustrator CS2 to create and publish SVG content. It assumes that you have some basic
12 Animating SVG content for mobile devices understanding of vector drawing, Illustrator and GoLive. (If you want to learn more
14 Viewing and using SVG
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 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 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.
Benefits of using SVG SVG is a royalty-free and vendor-neutral open stan-
The benefits of using SVG to publish vector graphics on mobile phones and the web include: dard developed under the W3C Process. It has strong
industry support. Authors of the SVG specification
Small file size On average SVG files are smaller than other web-graphic formats, such as JPEG include Adobe, Agfa, Apple™, Canon, Corel, Ericsson,
HP™, IBM™, Kodak, Macromedia, Microsoft™, Nokia,
and GIF, and are quick to download.
Sharp, and Sun Microsystems™. SVG viewers are
Display independence SVG images are always crisp on-screen and print at the resolution of your deployed to over 100 million desktops, and there is a
broad range of support in many authoring tools, such
printer, whether it’s 300 dots per inch (dpi), 600 dpi, or higher. You never get jagged edges due to
as Illustrator and GoLive.
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”/> Illustrator supports SVG basic shapes (referred to as
<text transform=”matrix(1 0 0 1 16.2104 32.2134)” font-family=”ʼMyriad- primitives), such as <ellipse> and <rect> as seen in
Romanʼ” font-size=”31.2342”>SVG</text> the code on the left, making reading, writing, and
... code deleted ... transforming SVG objects straightforward. SVG basic
shapes can also be represented as SVG <path> ob-
The three objects that make up this example are readily identifiable. There is one rectangle
jects, but the syntax for describing a basic shape can
<rect>, one ellipse <ellipse>, and a text <text> element. The positioning and styling properties be very useful for hand-coding and manipulating an
are easily readable, and you can easily modify them with a simple text-editing application. For object’s properties via scripts.
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.
Creating SVG with Adobe Illustrator CS2 2
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 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 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 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 file.

Fewer points means lighter files


The original butterfly on the left is 84 KB when output to SVG. The simplified file requires only 20 KB.

Creating SVG with Adobe Illustrator CS2 3


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.

Symbols
If 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 effects


In 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

Creating SVG with Adobe Illustrator CS2 4


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 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 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 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 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
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 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, ʻID_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 Illustrator


Now 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 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 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.

Fonts
Embedding 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).
Creating SVG with Adobe Illustrator CS2 7
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.

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 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 Capabilities


This 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 Properties
CSS 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:

Creating SVG with Adobe Illustrator CS2 8


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 Places
This 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.

Encoding
You 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 Viewer


This 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 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 file for future use in Illustrator.

Include XMP
Select 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> Elements


This 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 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 9
Show SVG Code
This 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.

Preview
This 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 Illustrator


At 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 CS2


In 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.

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.
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
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
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 features


GoLive 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 MMS
XHTML Basic and MP, i-mode EU, i-mode Japanese pages, WML Decks, and MMS documents. Enables the transmission of graphics, video clips,
sound files, and short text messages over wireless net-
You must incorporate the SVG Tiny file inside a SMIL container to achieve complex interactivity,
works using the Wireless Application Protocol (WAP).
which is needed, for example, in user interface systems and new generation mobile services. 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 offers a set of new tools for creating timelined MMS content
that can incorporate SVG Tiny files 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
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 devices


To 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.

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.

Before you begin


Before 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.

Creating SVG with Adobe Illustrator CS2 12


Creating a new Animator document
We 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 stage


The 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 attributes


You 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.

Creating SVG with Adobe Illustrator CS2 13


Ikivo Animator-generated content is viable for mobile use but, depending on the tar- ADDITIONAL RESOURCES AND
geted service, you might have to embed the content in XHTML or SMIL (MMS). Use FURTHER READING
Adobe Systems, Inc.
GoLive CS to publish your animation with these and other standards.
www.adobe.com/svg
www.adobe.com/illustrator
Hyperlinking
www.adobe.com/golive
You can add hyperlinks by selecting objects, and then choosing Object > Add Hyper-
World Wide Web Consortium:
link. The full address must be given for the hyperlink to work correctly, for example,
SVG Specification and News
http://www.adobe.com. The user can click on the button to navigate to the desired page. www.w3.org/Graphics/SVG
www.w3.org/TR/SVGMobile
Previewing
www.svg.org
You can preview how the animation will be seen in your chosen device by selecting
Open Mobile Alliance
View > Preview.
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 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 Systems Incorporated • 345 Park Avenue, San Jose,
CA 95110-2704 USA • www.adobe.com

Adobe SVG Viewer Adobe, the Adobe logo, Illustrator, GoLive and Photoshop are
either registered trademarks or trademarks of Adobe Systems
The Adobe SVG Viewer integrates with your web browser as a plug-in. The Adobe SVG Incorporated in the United States and/or other countries. HP is
a registered trademark of Hewlett-Packard Company. IBM is a
Viewer lets you pan and zoom across SVG files. You can also interact with the SVG im- trademark of International Business Machines Corporation in the
United States and/or other countries. Apple, Mac and Macintosh
age by pressing the Control key and clicking in the SVG image area. In the contextual are trademarks of Apple Computer, Inc., registered in the United
States and other countries. Microsoft and Windows are either
menu, you can set the display quality, control animations, search, copy, view, or save the registered trademarks or trademarks of Microsoft Corporation in
the United States and/or other countries. Sun Microsystems is a
source code. 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