Apply svg effects – Adobe Illustrator CS3 User Manual

Page 382

ILLUSTRATOR CS3

User Guide

376

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 () element. (For example, a layer named Button1 becomes

id="Button1_ver3.0"> 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.

“Save in SVG format” on page 266

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 modify Illustrator’s default SVG filters, use a text editor to edit the Adobe SVG Filters.svg file in the
/Application Data/Adobe/Adobe Illustrator CS3 Settings folder. You can modify existing filter definitions,

delete filter definitions, and add new filter definitions.

Select an object or group (or target a layer in the Layers panel).

Do one of the following:

•

To apply an effect with its default settings, select the effect from the bottom section of the Effect > SVG Filters
submenu.

•

To apply an effect with custom settings, choose Effect > SVG Filters > Apply SVG Filter. In the dialog box, select
the effect, and click the Edit SVG Filter button

. Edit the default code and click

OK.

•

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.