Adobe ILLUSTRATOR 10 Using Manual page 301

Adobe Illustrator Help
Using Help | Contents
Working with SVG in Illustrator
You can save artwork in SVG format using the Save command and the Save for Web
command. (See "Saving artwork in an SVG format" on page 324
on page 305.) How you set up your artwork in Illustrator will impact the resulting SVG file.
Keep in mind the following guidelines:
Layers 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> in the SVG file.) Nested layers become SVG nested groups, and
hidden layers are preserved with the SVG styling property "display:none" .
Transparency 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 effects and mesh objects 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, styles that include these effects—such as
Blazing Sun, Cement, and Flames—produce rasterization.
Use SVG filter effects to add graphic effects without causing rasterization.
(See "Adding SVG filter effects to artwork" on page
Paths Use symbols and simplify the paths in your artwork to improve SVG performance.
(See "Simplifying paths" on page 61
using brushes that produce a lot of path data, such as the Charcoal, Fire Ash, and Scroll
Pen, if performance is a high priority.
Links Use slices, image maps, and scripts to add links to an SVG file. (See
type and setting slice options" on page
"Adding SVG interactivity to artwork" on page
Scripts 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. (See
to artwork" on page 302.)
For more information on using Illustrator to create SVG files, go to the SVG zone on
www.adobe.com.
Adding SVG filter effects to artwork
You can use SVG filters to add graphic effects such as drop shadows to your artwork. SVG
filters differ from their bitmap counterparts in that they are XML-based. In fact, an SVG
filter 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 set of standard SVG filters. You can use the filter with its default
properties, edit the XML code to produce custom effects, or write new SVG filters.
Important: An SVG filter effect must be the last effect when an object has multiple effects;
in other words, it must appear at the bottom of the Appearance palette (just above the
Using Help | Contents
| Index
and "Working with symbols" on page
294, "Creating image maps" on page
| Index
Preparing Graphics for the Web
and "Optimizing images"
301.)
302.)
"Adding SVG interactivity
Back 301
71.) Also avoid
"Choosing a slice
299, and
Back 301