logoredraws.com

How to Save Vector Artwork from Illustrator as SVG

Save or export a redrawn logo from Adobe Illustrator as SVG: prepare paths and type, choose the right export method and settings, and verify the file.

Published

Contents
  1. The short answer
  2. Before you start: prepare a logo redrawn from a sketch
  3. Choosing an export method
  4. Method 1: Export As SVG (recommended for delivery)
  5. Method 2: Save As SVG (for an editable master)
  6. Method 3: Export for Screens (for several logo versions)
  7. How to verify the SVG
  8. When the SVG is not the final deliverable

The short answer

In Adobe Illustrator, you can produce an SVG in three ways: File > Save As with SVG chosen as the format, File > Export > Export As with SVG chosen as the format, or File > Export > Export for Screens. Save As keeps more Illustrator-specific data and is suited to a working master. Export As and Export for Screens produce cleaner files intended for web and app use. Before choosing any of them, prepare the artwork so the SVG contains real vector paths rather than an embedded copy of your scanned sketch.

SVG (Scalable Vector Graphics) is an XML-based text format that describes shapes as mathematical paths, so a logo can scale to any size without pixelation. An SVG file can also contain embedded raster images, live text that depends on installed fonts, and filter effects. The .svg extension alone does not prove that the file is fully vector, that it is easy to edit, or that you have the right to reuse the logo it contains.

Menu names and option labels below reflect recent Illustrator versions. Adobe has renamed and moved export commands over time, so confirm the exact wording in the version you are running.

Before you start: prepare a logo redrawn from a sketch

Logos rebuilt from hand-drawn sketches often carry leftovers from the tracing process. Clean these up first, because SVG export writes out whatever is in the document.

  • Remove or hide the placed sketch. A scanned image left on the artboard, even on a locked or template layer, can end up embedded in the SVG as raster data. Delete it, or move it to a layer you exclude from export.
  • Expand any Image Trace result. A live trace is still linked to the source image until you select it and choose Object > Expand (or click Expand in the Control or Properties panel). After expanding, the artwork becomes ordinary editable paths.
  • Simplify and tidy paths. Traced shapes often contain excess anchor points, tiny stray fragments and overlapping pieces. Object > Path > Simplify reduces anchor points; use the Pathfinder panel or Shape Builder tool to merge overlapping shapes into clean compound paths.
  • Decide how to handle text. Live text in an SVG relies on the viewer having the same font. For a logo, create outlines with Type > Create Outlines so the letterforms become paths. Keep a separate copy with editable type for future changes.
  • Decide how to handle strokes. SVG supports strokes, but if you want line weights to scale exactly with the logo in every context, or the artwork will be used where stroke settings may be overridden, convert them with Object > Path > Outline Stroke. Keep an unconverted copy.
  • Check effects. Drop shadows, blurs and similar appearance effects may be written as SVG filters or rasterized, and filters render inconsistently across viewers. Flatten or remove them if the logo must be pure vector shapes; Object > Expand Appearance converts many effects into editable objects.
  • Use RGB color. SVG is a screen format, and colors are written as RGB values. If the document is in CMYK or uses spot colors, expect the values to be converted, and check the result visually.
  • Fit the artboard. Object > Artboards > Fit to Artwork Bounds removes empty space so the SVG canvas matches the logo.

To confirm the artwork is clean, switch to Outline view (View > Outline). Every visible element should appear as a thin path outline; a placed image shows as a box with a cross through it. The Links panel and Window > Document Info (with Embedded Images or Linked Images selected in its menu) also list any raster images still in the file.

Choosing an export method

Method | Menu path | Best for
Save As SVG | File > Save As, format: SVG (svg) | A master file you may reopen in Illustrator; offers the option to preserve Illustrator editing data
Export As SVG | File > Export > Export As, format: SVG (svg) | A clean, lightweight file for web, apps or handoff to developers
Export for Screens | File > Export > Export for Screens, format: SVG | Exporting one or more artboards or assets at once, such as logo variations
  • 1. Choose File > Export > Export As.
  • 2. Select SVG (svg) as the format and name the file.
  • 3. Turn on Use Artboards if you want the SVG cropped to the artboard; leave it off to crop to the artwork bounds.
  • 4. Click Export to open SVG Options.
  • 5. Styling: choose how colors and other attributes are written. Presentation Attributes writes them directly on each element and is the most widely compatible. Internal CSS groups them into a style block, which some developers prefer but which can cause style collisions when several SVGs are placed inline on one web page. Inline Style writes a style attribute on each element.
  • 6. Font: if any live text remains, choose Convert to Outlines to turn it into paths, or SVG to keep it as text that depends on the font being available.
  • 7. Images: Preserve, Embed or Link. For a pure vector logo this should not matter; if it does, a raster image is still in the file.
  • 8. Object IDs: Layer Names uses your layer and object names as IDs, which helps developers target parts of the logo; Minimal and Unique produce short or guaranteed-unique IDs.
  • 9. Decimal: sets how many decimal places are written for coordinates. Fewer places make a smaller file but can slightly distort curves on small or detailed logos; compare before and after if you lower it.
  • 10. Minify: removes whitespace to reduce file size. Leave it off if someone will read or edit the code.
  • 11. Responsive: when on, Illustrator omits fixed width and height so the SVG scales to its container. Turn it off if the file must open at a specific pixel size.
  • 12. Click OK.

Method 2: Save As SVG (for an editable master)

  • 1. Choose File > Save As, select SVG (svg) and click Save.
  • 2. In SVG Options, choose an SVG Profile. SVG 1.1 is the general-purpose choice.
  • 3. Set Fonts: choose Convert to Outline, or keep text as SVG type if it must remain live.
  • 4. Set Images to Embed or Link if any raster content is intentional.
  • 5. Decide on Preserve Illustrator Editing Capabilities. When on, Illustrator stores extra private data so the file reopens with more of its editing structure intact, which makes the file noticeably larger and is unnecessary for web delivery. Turn it off for files you hand to others.
  • 6. Click More Options to set CSS Properties, decimal places, encoding and responsiveness, which work much like the Export As settings above.
  • 7. Click OK.

Even with editing capabilities preserved, keep your native .ai file as the true master. An SVG is a delivery format, and some Illustrator features do not survive the round trip.

Method 3: Export for Screens (for several logo versions)

If you have built logo variations on separate artboards, such as full color, one color and reversed, open File > Export > Export for Screens. Select the artboards, add SVG as a format, use the format settings control to set SVG options, choose a destination folder and click Export Artboard. Individual objects can instead be added to the Asset Export panel and exported from the Assets tab.

How to verify the SVG

  • Open the file in a web browser. It should display correctly and stay sharp when you zoom in.
  • Check the canvas. Confirm there is no unexpected empty space or cropping around the logo.
  • Open the file in a plain text editor and look for an <image> element or a long block of encoded data beginning with data:image; either one means raster content is embedded.
  • Search for <text> or font-family. If you intended all type to be outlined, neither should appear.
  • Search for <filter>. Its presence means effects were exported as filters that may render differently in other software.
  • Place the SVG back into a new Illustrator document and inspect it in Outline view to confirm paths, colors and grouping came through as expected.
  • If the logo is going to a developer or a specific platform, test it in that environment, since support for CSS styling, filters and fonts varies.

A clean, outlined logo export will typically look something like the simplified example below: shapes defined by path data, colors as attributes and no image or text elements. Your path data and values will differ.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 80">
  <path fill="#1a1a1a" d="M12.4,8.2c...z"/>
  <path fill="#e63b2e" d="M96.1,14.7c...z"/>
</svg>

When the SVG is not the final deliverable

SVG suits websites, apps and many cutting or engraving workflows, but print vendors often ask for AI, EPS or PDF files that keep CMYK or spot color definitions. If the logo is headed to print, export those formats from your master file alongside the SVG rather than converting the SVG later.