About SVG

Bitmap image formats
for the web—GIF, JPEG, WBMP, and PNG—describe images using a grid
of pixels. The resulting files tend to be bulky, limited to a single
(often low) resolution, and consume large amounts of bandwidth on
the web. SVG, on the other hand, is a vector format that describes
images as shapes, paths, text, and filter effects. The resulting
files are compact and provide high-quality graphics on the web,
in print, and even on resource-constrained, handheld devices.
Users can magnify their view of an SVG image on‑screen without sacrificing
sharpness, detail, or clarity. In addition, SVG provides superior support
for text and colors, which ensures that users will see images as
they appear on your Illustrator artboard.

The SVG format is entirely
XML-based and offers many advantages to developers and users alike.
With SVG, you can use XML and JavaScript to create web graphics that
respond to user actions with sophisticated effects such as highlighting,
tool tips, audio, and animation.

You can save artwork in SVG format using the Save, Save
As, Save A Copy, or Save For Web &
Devices command. To access the complete set of SVG export options, use
the Save, Save As, or Save A Copy command.
The Save For Web & Devices command provides
a subset of SVG export options which are applicable to web-oriented
work.

How you set up your artwork in Illustrator will affect the resulting
SVG file. Keep in mind the following guidelines:

Use layers to add structure to an SVG file. When you
save artwork in SVG format, each layer is converted to a group (<g>)
element. (For example, a layer named Button1 becomes <g id="Button1_ver3.0">
in the SVG file.) Nested layers become SVG nested groups, and hidden
layers are preserved with the display="none" SVG styling property.

If you want objects on different layers to appear transparent,
adjust the opacity of each object instead of each layer. If you
alter opacity at the layer level, the resulting SVG file will not
display transparency as it appears in Illustrator.

Raster data is not scalable in the SVG Viewer and cannot
be edited like other SVG elements. If possible, avoid creating artwork
that will be rasterized in the SVG file. Gradient meshes and objects
that use the Rasterize, Artistic, Blur, Brush Strokes, Distort,
Pixelate, Sharpen, Sketch, Stylize, Texture, and Video effects are
rasterized when saved in SVG format. Similarly, graphic styles that include
these effects also produce rasterization. Use SVG effects to add graphic
effects without causing rasterization.

Use symbols and simplify the paths
in your artwork to improve SVG performance. Also avoid
using brushes that produce a lot of path data, such as
the Charcoal, Fire Ash, and Scroll Pen, if performance
is a high priority.

Use slices, image maps, and scripts to add web links to an
SVG file.

A scripting language, such as JavaScript, opens unlimited
functionality to an SVG file. Pointer and keyboard movements can
invoke scripting functions such as rollover effects. Scripts can
also use the document object model (DOM) to access and modify the
SVG file—inserting or deleting SVG elements, for example.

Apply SVG effects

You can use SVG
effects to add graphic properties such as drop shadows to your artwork.
SVG effects differ from their bitmap counterparts in that they are
XML-based and resolution-independent. In fact, an SVG effect is
nothing more than a series of XML properties that describe various
mathematical operations. The resulting effect is rendered to the
target object instead of the source graphic.

Illustrator provides
a default set of SVG effects. You can use the effects with their default
properties, edit the XML code to produce custom effects, or write
new SVG effects.

To create and apply a new effect, choose Effect >
SVG Filters > Apply SVG Filter. In the dialog box, click
the New SVG Filter button , enter
the new code, and click OK.

When you apply an SVG
filter effect, Illustrator displays a rasterized version of the effect
on the artboard. You can control the resolution of this preview
image by modifying the document’s rasterization resolution setting.

Note: An SVG effect must be the last effect when
an object uses multiple effects; in other words, it must appear
at the bottom of the Appearance panel (just above the Transparency
entry). If other effects follow an SVG effect, the SVG output will
consist of a raster object.

Import effects from an SVG file

SVG Interactivity panel overview

You
use the SVG Interactivity panel (Window > SVG Interactivity)
to add interactivity to your artwork when it is exported for viewing
in a web browser. For example, by creating an event that triggers
a JavaScript command, you can quickly create movement on a web page
when the user performs an action such as moving a mouse cursor over
an object. The SVG Interactivity panel also lets you see all the
events and JavaScript files associated with the current file.

Delete an event from the SVG Interactivity
panel

To delete one event, select
it and click the Delete button or choose Delete Event from the panel
menu.

To delete all events, choose Clear Events from the panel
menu.

List, add, or remove events linked
to a file

Click the Link JavaScript Files button .

In the JavaScript Files dialog box, select a JavaScript
entry and do one of the following: