WEBPery

AI

.ai

Adobe Illustrator's native vector artwork format. Source files for logo and illustration work; export elsewhere for delivery.

rawlosslessTransparency

Origin and purpose

AI (Adobe Illustrator Artwork) is Adobe Illustrator's native file format. It was introduced with the first version of Illustrator in 1987 and, like Photoshop's PSD, has evolved continuously alongside its host application. AI files are the canonical working format for vector design, brand identity work, illustration, and any project where the source remains editable as scalable vector paths.

Unlike most image formats this site covers, AI is a vector format — files describe shapes, paths, gradients, and type rather than pixel grids. This makes AI files functionally closer to SVG than to PNG or JPEG: a single file scales to any rendered size without loss of quality.

File structure

Modern AI files (since version 9) are essentially PDF documents with Illustrator-specific extensions. The format builds on PDF's container structure and adds:

  • AI-specific resources — preserving editability of Illustrator-specific constructs like gradient meshes, live effects, symbol libraries, brushes, and pattern swatches.
  • Live effects — non-destructive filters and transformations that re-render when parameters change.
  • Multi-artboard layouts — multiple distinct compositions in one file (replaced earlier "crop area" concepts).
  • Layer structure with sub-layers — hierarchical organisation.
  • Symbol instances — references to a master symbol that can be edited once and updated everywhere.
  • Compound paths and clipping masks — complex shape combinations.
  • Type with full character formatting — editable text with kerning, tracking, baseline shift, OpenType features.
  • Linked or embedded raster content — when a design includes photos or textures.

Because the underlying container is PDF, AI files open in PDF viewers (Preview, Acrobat) and display the flat composite. They don't expose the editable structure outside Illustrator.

AI vs SVG

The relationship between AI and SVG is similar to the relationship between PSD and PNG: AI is the working format with full editing state, SVG is the delivery format with the rendered result.

AspectAISVG
PurposeWorking fileDelivery file
Editor supportIllustrator (full), Affinity, Inkscape (partial)Universal
File sizeLarger (preserves editor state)Smaller (final shapes only)
Layer hierarchyNativeVia <g> grouping
Live effectsPreservedBaked in or lost
Web renderingNot supportedNative in browsers
Cross-tool fidelityLossy outside IllustratorUniversal

A typical workflow:

  1. Design in Illustrator (.ai).
  2. Export the final composition as SVG for web use.
  3. Export rasterised versions (PNG, WebP, PDF) for non-vector contexts.
  4. Keep the .ai original for revisions.

Modern relevance

AI is the de facto standard format for:

  • Brand identity and logo design — logos almost always start as AI files.
  • Illustration and editorial graphics — most professional illustration ships as AI source plus rendered derivatives.
  • Packaging design — die-line and print-ready packaging artwork.
  • Print-ready advertising — print collateral that needs CMYK colour management.
  • Multi-format design systems — a single AI file containing brand assets at multiple sizes and variants.

AI matters because Illustrator is the dominant professional vector design tool. Affinity Designer and Inkscape are credible alternatives but have not displaced the AI format as the industry standard for handoff between designers and clients.

Web rendering

AI files do not render in browsers. The PDF-based structure means a browser might render the embedded PDF preview, but no major browser does this for .ai files served from a website.

For web display of AI content, the conversion is always to SVG (preferred for vector content) or to a raster format (PNG, WebP, AVIF) when SVG isn't an option.

Conversion to web formats

The standard pipeline for getting AI content to the web:

  1. Open the AI file in Illustrator.
  2. Use "Save As" with "SVG" format for the vector export.
  3. Use "Export As" or "Export for Screens" for raster derivatives.
  4. Run the SVG through SVGO to strip Illustrator-specific cruft.
# After exporting SVG from Illustrator, optimise it
svgo input.svg -o output.svg

For automated AI conversion outside Illustrator:

  • ImageMagick — can rasterise AI files (treating them as PDFs):
    convert input.ai -density 300 output.png
    convert input.ai -density 300 -quality 80 output.webp
    
  • pdftocairo — converts PDF (and PDF-compatible AI files) to PNG or SVG:
    pdftocairo -svg input.ai output.svg
    pdftocairo -png -r 300 input.ai output.png
    
  • Inkscape — opens AI files (via PDF import) and re-exports as SVG.
  • Affinity Designer — opens AI files with reasonable fidelity and exports to SVG, PNG, or its own format.

The fidelity of automated AI-to-SVG conversion varies. Illustrator-specific features (live effects, symbols, complex blend modes) may not survive the round trip. For high-fidelity exports, opening in Illustrator and exporting to SVG natively is the most reliable path.

SVG export from Illustrator

When exporting from Illustrator to SVG, the export options matter:

  • SVG Profile — choose "SVG 1.1" for maximum browser compatibility.
  • Subsetting — embed glyph subsets only for type that uses unusual fonts.
  • Image Location — for compositions that include raster elements, link or embed the rasters.
  • CSS Properties — "Style Attributes" works for most use cases; "Presentation Attributes" produces smaller output for simple files.
  • Decimal Places — 1 or 2 decimal places is usually enough; defaults to 3, which inflates file size.
  • Minify — yes.
  • Responsive — yes (omits width and height attributes; useful for SVGs that should scale to container).

After export, run SVGO to remove remaining Illustrator artefacts.

File size in raster export

When you export an AI file as a raster image, the file size depends on rendered dimensions, not on the AI source's complexity. A logo with 5 paths and a logo with 500 paths produce the same-sized PNG at 1024×1024.

For most logo and brand work, the source vector file is dramatically smaller than any rasterised output:

AssetAI sourceSVG exportPNG @ 512pxWebP @ 512px
Simple logo200 KB2 KB8 KB6 KB
Complex illustration8 MB80 KB250 KB150 KB

The AI file size includes embedded fonts, symbol libraries, history, and Illustrator-specific resources that are stripped in the SVG export.

Layered vs flattened deliveries

Illustrator workflows often produce two AI files per project:

  • Layered working file — preserves layer structure, named layers, separate text layers, separate brand elements. Used for ongoing editing.
  • Flattened deliverable — single layer, outlined text (paths replacing editable type), embedded rather than linked images. Used for handoff when the recipient doesn't have the source fonts or doesn't need to edit.

Outlining text before delivery (converting type to vector paths) is essential when the recipient may not have the same fonts installed. The visual appearance is preserved; the editability is lost.

When to use AI today

Choose AI when:

  • The file is a working design document that will be edited further.
  • Illustrator is the primary tool in the project pipeline.
  • The recipient explicitly requested AI source files.
  • The design uses Illustrator-specific features (live effects, complex gradient meshes, brushes) that wouldn't survive SVG export.

Choose SVG when:

  • The file is going to be rendered in a browser.
  • The file is a final deliverable for design system consumption.
  • The recipient may not have Illustrator.
  • File size matters.

Choose PDF when:

  • The file is for print production.
  • The recipient needs a finished, viewable file but no editability.

Choose raster formats (PNG, WebP, AVIF, JPEG) when:

  • The file is for web display of a vector design that won't be edited or scaled further.
  • The use case is fundamentally raster (composited photo + vector overlay).

Common pitfalls

Sending AI files when SVG would do. Web developers typically need SVG, not AI. Asking for AI when the actual need is "a logo I can put on a website" creates friction when the recipient doesn't have Illustrator.

Forgetting to outline text. A handoff AI file that uses custom fonts the recipient doesn't have will render incorrectly. Outline text before flattening for delivery.

Linking instead of embedding. Linked raster images are convenient during editing but break when the file is moved. Embed for delivery.

Using AI as a web format. Never. The browser support doesn't exist; the file size is wrong; the editability is wasted.

Further reading