Saving artwork in a SVG format


    SVG is a vector format that produces high-quality, interactive Web graphics. (See Creating Web graphics with SVG.) There are two versions of the SVG formats: SVG and Compressed SVG (SVGZ). SVGZ can reduce file sizes by 50% to 80%; however, you cannot edit SVGZ files using a text editor.

    Note: The SVG plug-in for your Web browser is normally installed with Illustrator. If you need to find the plug-in separately, go to www.adobe.com/svg/ to download it.

    When you export artwork in an SVG format, mesh objects are rasterized. In addition, images that have no alpha channel are converted to the JPEG format. Images with an alpha channel are converted to the PNG format.

To save artwork in a SVG format:

  1. If the artwork contains any SVG filter effects, select each item to which an SVG filter effect has been applied, and move the filter effect to the bottom of the Appearance palette (just above the Opacity entry).
  2. If other effects follow an SVG filter effect, the SVG output will consist of a raster object. (See Creating Web graphics with SVG.)

  3. Choose a Save command. (See About saving artwork.)
  4. Type a filename, and choose a location for the file.
  5. Choose SVG (*.SVG) or SVG Compressed (*.SVGZ) as the file format, and click Save.
  6. In the SVG Options dialog box, set the desired options:
    • Font Subsetting to control which glyphs (characters of a particular font) are embedded in the exported SVG file. Choose None from the Subsetting menu if you can rely on the necessary fonts being installed on end-user systems. Choose Only Glyphs Used to include only glyphs for text that exists in the current artwork. The other values (Common English, Common English + Glyphs Used, Common Roman, Common Roman + Glyphs Used, All Glyphs) are useful when the textual content of the SVG file is dynamic (such as server-generated text or user-interactive text).
    • Image Location to determine whether raster images are embedded directly in the file or linked to the exported JPEG or PNG images from the original Illustrator file. Embedding images increases file size but ensures that rasterized images will always be available.
    • Preserve Illustrator Editing Capabilities to preserve Illustrator-specific data in the SVG file. Select this option if you plan to reopen and edit the SVG file in Illustrator.
  7. Click OK to save the artwork, or click Advanced to set additional options:
  8. CSS Properties

    Determines how style attributes are saved in the SVG code. The default method, Presentation Attributes, applies properties at the highest point in the hierarchy, which allows the most flexibility for specific edits and transformations. The Style Attributes method creates the most readable files but may increase the file size. Choose this method if the SVG code will be used in transformations--for example, transformations using Extensible Stylesheet Language Transformation (XSLT). The Style Attributes <Entity References> method results in faster rendering times and reduced SVG file size. The Style Elements method is used when sharing files with HTML documents. By selecting Style Elements, you can then modify the SVG file to move a style element into an external stylesheet file that is also referenced by the HTML file; however, the Style Elements option also results in slower rendering speeds.

    Decimal Places

    Specifies the precision of vector data in the SVG file. You can set a value of 1-7 decimal places. A higher value results in a larger file size and increased image quality.

    Encoding

    Determines how characters are encoded in the SVG file. UTF (Unicode Transformation Format) encoding is supported by all XML processors. (UTF-8 is an 8-bit format; UTF-16 is a 16-bit format.) ISO 8859-1 and UTF-16 encoding do not preserve file metadata. (See Adding metadata to documents.)

    Optimize for Adobe SVG Viewer

    Maintains the highest level of Illustrator data while still allowing the SVG file to be manually edited. Select this option to take advantage of faster rendering for features such as SVG filter effects.

    Include Extended Syntax for Variable Data

    Includes all information needed for variable substitution in the SVG file. (See Saving templates for data-driven graphics.)

    Include Slicing Data

    Includes slice locations and optimization settings.