Working with SVGYou can save artwork in SVG format using the Save command or the Save for Web command. (See Saving artwork in a SVG format and Optimization options for SVG format.) How you set up your artwork in Illustrator will affect 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, graphic styles that include these effects also produce rasterization.
Paths Use symbols and simplify the paths in your artwork to improve SVG performance. (See Simplifying paths and Drawing with symbols.) 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. Web links Use slices, image maps, and scripts to add Web links to an SVG file. (See Setting slice options, Creating image maps, and Adding SVG interactivity to artwork.) 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.) For more information on using Illustrator to create SVG files, go to the SVG zone on the Adobe Web site at http://www.adobe.com/svg/. |