Adobe Illustrator CS4 - Manual (Page 386)

379 USING ADOBE ILLUSTRATOR CS4
Web graphics
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 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
“ Optimize an image for the web ” on page 386
“ Save in SVG format ” on page 270
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 Documents
and Settings/<userdir>/Application Data/Adobe/Adobe Illustrator CS4 Settings/<location> folder. You can modify
existing filter definitions, delete filter definitions, and add new filter definitions.
1 Select an object or group (or target a layer in the Layers panel).
2 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.
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.