Apply svg effects – Adobe Illustrator CC 2015 User Manual
Page 468
463
Web graphics
Last updated 6/5/2015
You can save artwork in SVG format using the Save, Save As, Save A Copy, or Save For Web & Devices command. To
access the complete set of SVG export options, use the Save, Save As, or Save A Copy command. The Save For Web &
Devices command provides a subset of SVG export options which are applicable to web-oriented work.
For a video on creating mobile content in Illustrator, see
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 display="none" SVG styling property.
• 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.
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 CS5 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.