decorative banner

Saving artwork in an 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.

    When you export artwork in an SVG format, mesh objects are rasterized. In addition, images in the artwork 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 an SVG format:

  1. If the artwork contains any SVG filter effects, select each item to which an SVG filter effects has been applied, and move the filter effect to the bottom of the Appearance palette (just above the Transparency entry). (See Adding SVG filter effects to artwork.)
  2. Save the artwork as described in About saving and exporting artwork. Choose SVG (SVG) or SVG Compressed (SVGZ) as the file format.
  3. In the SVG Options dialog box, set the desired options:
    • Font Subsetting to control which fonts are embedded or linked from 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 (only available when embedding fonts) 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).
    • Font Location to determine whether the subset fonts are embedded directly in the file or linked to the exported fonts from the original Illustrator file. Embedding fonts increases file size but ensures that the fonts will always be available. For example, embed fonts if you plan to distribute the SVG file via e-mail. Saving the fonts in an external location makes sense if you have several SVG files that share the same fonts.
    • 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.
  4. Click OK to save the artwork, or click Advanced to set additional options:
  5. 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 allow 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 to 7 decimal places. A high 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.)

    Include Slicing Data

    Includes slice locations and optimization settings.

    Include File Info

    Includes file metadata in the SVG file. This option is available only when UTF-8 encoding is selected. (See Adding metadata to documents.)