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.
| Aspect | AI | SVG |
|---|---|---|
| Purpose | Working file | Delivery file |
| Editor support | Illustrator (full), Affinity, Inkscape (partial) | Universal |
| File size | Larger (preserves editor state) | Smaller (final shapes only) |
| Layer hierarchy | Native | Via <g> grouping |
| Live effects | Preserved | Baked in or lost |
| Web rendering | Not supported | Native in browsers |
| Cross-tool fidelity | Lossy outside Illustrator | Universal |
A typical workflow:
- Design in Illustrator (
.ai). - Export the final composition as SVG for web use.
- Export rasterised versions (PNG, WebP, PDF) for non-vector contexts.
- Keep the
.aioriginal 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:
- Open the AI file in Illustrator.
- Use "Save As" with "SVG" format for the vector export.
- Use "Export As" or "Export for Screens" for raster derivatives.
- 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:
| Asset | AI source | SVG export | PNG @ 512px | WebP @ 512px |
|---|---|---|---|---|
| Simple logo | 200 KB | 2 KB | 8 KB | 6 KB |
| Complex illustration | 8 MB | 80 KB | 250 KB | 150 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
- SVG Format — the vector format for web delivery of AI content
- EPS Format — older vector format that AI files can be saved as for compatibility
- WebP format overview — recommended raster format when vector isn't viable
- Image SEO Best Practices — accessibility and SEO considerations