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.
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.
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 <version number> Settings/<location> folder. You can modify existing filter definitions, delete filter definitions, and add new filter definitions.
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.
Note: An SVG effect must be the last effect when an object uses multiple effects; in other words, it must appear at the bottom of the Appearance panel (just above the Transparency entry). If other effects follow an SVG effect, the SVG output will consist of a raster object.
Choose Effect > SVG Filter > Import SVG Filter.
Select the SVG file you want to import effects from and click Open.
Triggers the action when the element receives focus, such as selection by the pointer.
Triggers the action when the element loses focus (often when another element receives focus).
Triggers the action with a mouse click or keypress, depending upon the SVG element.
Triggers the action when the mouse button is pressed down over an element.
Triggers the action when the mouse button is released over an element.
Triggers the action when the mouse is clicked over an element.
Triggers the action when the pointer is moved onto an element.
Triggers the action while the pointer is over an element.
Triggers the action when the pointer is moved away from an element.
Triggers the action when a key is pressed down.
Triggers the action while a key is pressed down.
Triggers the action when a key is released.
Triggers the action after the SVG document has been completely parsed by the browser. Use this event to call one-time-only initialization functions.
Triggers the action when an element does not load properly or another error occurs.
Triggers the action when the page loading is stopped before the element is completely loaded.
Triggers the action when the SVG document is removed from a window or frame.
Triggers the action when the zoom level is changed for the document.
Triggers the action when the document view is resized.
Triggers the action when the document view is scrolled or panned.
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:
Note: The default styling for SVG is set to Presentation Attributes because it improves compatibility with common developer tools, such as Android Studio.