Using Help
|
Contents
|
Index
Back
301
Adobe Illustrator Help
Preparing Graphics for the Web
Using Help
|
Contents
|
Index
Back
301
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
and
“Optimizing images”
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 301
.)
Paths
Use symbols and simplify the paths in your artwork to improve SVG performance.
(See
“Simplifying paths” on page 61
and
“Working with symbols” on page 71
.) 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.
Links
Use slices, image maps, and scripts to add links to an SVG file. (See
“Choosing a slice
type and setting slice options” on page 294
,
“Creating image maps” on page 299
, and
“Adding SVG interactivity to artwork” on page 302
.)
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
“Adding SVG interactivity
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
