448
ADOBE ILLUSTRATOR CS2
User Guide
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 command. To access the
complete set of SVG export options, use the Save, Save As, or Save A Copy command. The Save For Web 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"> in the SVG file.) Nested
layers become SVG nested groups, and hidden layers are preserved with the SVG styling property “display:none”.
•
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.
See also
“To optimize and save web graphics” on page 452
“To save in SVG format” on page 337
About 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 modify Illustrator’s default SVG filters, use a text editor to edit the Adobe SVG Filters.svg file in the Plug-ins folder
inside the Adobe Illustrator application folder. You can modify existing filter definitions, delete filter definitions, and
add new filter definitions.
To apply SVG effects
1
Select an object or group (or target a layer in the Layers palette).