SVG

Bitmap image formats for the web—GIF, JPEG, WBMP, and PNG—describe images using a grid of pixels. The resulting files tend to be bulky, limited to a single (often low) resolution, and consume large amounts of bandwidth on the web. SVG, on the other hand, is a vector format that describes images as shapes, paths, text, and filter effects. The resulting files are compact and provide high-quality graphics on the web, in print, and even on resource-constrained, handheld devices. Users can magnify their view of an SVG image on‑screen without sacrificing sharpness, detail, or clarity. In addition, SVG provides superior support for text and colors, which ensures that users will see images as they appear on your Illustrator artboard.

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, tooltips, audio, and animation.

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.

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.

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.

You use the SVG Interactivity panel (Window > SVG Interactivity) to add interactivity to your artwork when it is exported for viewing in a web browser. For example, by creating an event that triggers a JavaScript command, you can quickly create movement on a web page when the user performs an action such as moving a mouse cursor over an object. The SVG Interactivity panel also lets you see all the events and JavaScript files associated with the current file.

• To delete one event, select it and click the Delete button or choose Delete Event from the panel menu.
• To delete all events, choose Clear Events from the panel menu.

A new SVG Export (File > Export > SVG) option is available. The new workflow allows you to generate standardized, web-optimized SVG files for your web and screen design projects.

The options available are:

• Styling. Choose how you want the resultant code to be written in the SVG file. Choose between Internal CSS, Inline Style, or Presentation Attributes styling.
  
• Font. Choose how fonts are represented in the SVG file. Outlines preserve the path definition, and are most compatible.
• Images: Choose if you want images to be saved as embedded within the document or linked files external to the document.
• Object IDs: Choose how ID types (names) are assigned to objects in the SVG file. Choose between Layer Names, Minimal, or Unique.This option determines how duplicate names of objects are handled, and how objects are named in the exported CSS.
• Decimal: Choose how much information you want to preserve the precision of object locations. A higher value for Decimal will increase the precision of how objects are laid out, and this increases the visual fidelity of the rendered SVG. However, increasing the value of Decimal also increases the file size of the resulting exported SVG.
• Minify: Optimizes the file size of the SVG by removing empty groups and blank spaces. Choosing this option also reduces the readability of the resulting SVG code.
• Responsive. Checking this option ensures that the SVG generated scales within a browser. No absolute size values are written.
  
• Show Code: Opens the exported content in your default text editor.
• Show in browser (icon): Displays the image in your default web browser.