Save in SVG format

SVG is a vector format that produces high-quality, interactive web graphics. 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 save 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. If your document contains multiple artboards and you save to SVG, the active artboard is preserved. You cannot save individual artboards as separate SVG files.

For a video on creating mobile content in Illustrator, see www.adobe.com/go/vid0207.

  1. If the artwork contains any SVG effects, select each item to which an SVG effect has been applied, and move the effect to the bottom of the Appearance panel (just above the Opacity entry). If other effects follow an SVG effect, the SVG output will consist of a raster object. In addition, if the artwork contains multiple artboards, select the artboard you want to export.

  2. Choose File > Save As or File > Save A Copy.

  3. Type a filename, and choose a location for the file.

  4. Choose SVG (*.SVG) or SVG Compressed (*.SVGZ) as the file format, and click Save.

  5. In the SVG Options dialog box, set the desired options and click OK:

    SVG Profiles
    Specifies the SVG XML Document Type Definition for the exported file.
    SVG 1.0 and SVG 1.1
    Suitable for SVG files that will be viewed on a desktop computer. SVG 1.1 is the full version of the SVG specification, of which SVG Tiny 1.1, SVG Tiny 1.1 Plus, and SVG Basic 1.1 are subsets.

    SVG Basic 1.1
    Suitable for SVG files that will be viewed on medium powered devices, such as handheld devices. Keep in mind that not all handhelds support the SVG Basic profile. As a result, selecting this option does not guarantee that the SVG file will be viewable on all handhelds. SVG Basic does not support nonrectangular clipping and some SVG filter effects.

    SVG Tiny 1.1 and SVG Tiny 1.1+
    Suitable for SVG files that will be viewed on small devices, such as mobile phones. Keep in mind that not all mobile phones support the SVG Tiny and SVG Tiny Plus profiles. As a result, selecting either of these options does not guarantee that the SVG file will be viewable on all small devices.

    SVG Tiny 1.2
    Suitable for SVG files that will be viewed on a variety of devices ranging from PDAs and mobile phones to laptops and desktop computers.

    SVG Tiny does not support gradients, transparency, clipping, masks, symbols, patterns, underline text, strike through text, vertical text, or SVG filter effects. SVG Tiny Plus includes the ability to display gradients and transparency, but does not support clipping, masks, symbols, or SVG filter effects.

    For additional information on SVG profiles, see the SVG specification on the World Wide Web Consortium (W3C) website (www.w3.org).

    Font Type
    Specifies how fonts are exported:
    Adobe CEF
    Uses font hinting for better rendering of small fonts. This font type is supported by the Adobe SVG Viewer but may not be supported by other SVG viewers.

    SVG
    Does not use font hinting. This font type is supported by all SVG viewers.

    Convert To Outlines
    Converts type to vector paths. Use this option to preserve the visual appearance of type in all SVG Viewers.

    Font Subsetting
    Controls 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
    Determines 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
    Preserves Illustrator-specific data by embedding an AI file in the SVG file (resulting in a larger file size). Select this option if you plan to reopen and edit the SVG file in Illustrator. Note that if you make manual changes to the SVG data, the changes are not reflected when you reopen the file. This is because Illustrator reads the AI portion of the file, not the SVG portion.

    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 style sheet 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.

    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 Adobe Graphics Server Data
    Includes all information needed for variable substitution in the SVG file.

    Include Slicing Data
    Includes slice locations and optimization settings.

    Include XMP
    Includes XMP metadata in the SVG file. Choose File > Info or use the Bridge Browser to enter metadata.

    Output Fewer <tspan> Elements
    Allows Illustrator to ignore auto-kerning settings during export, which results in a file with fewer <tspan> elements. Select this option to create an SVG file that is more editable and compact. Deselect this option if maintaining the appearance of auto-kerned text is critical.

    Use <textPath> Element For Text On Path
    Exports text on a path as a <textPath> element. However, note that the text may appear differently in the SVG Viewer than it does in Illustrator since this export mode will not always be able to maintain visual parity. In particular, overflow text will be visible in the SVG Viewer.

    Show SVG Code
    Displays the code for the SVG file in a browser window.

    Web Preview
    Displays the SVG file in a browser window.

    Device Central
    Opens the file in Device Central for previewing on a particular mobile phone or device.