Why save your logo as SVG?
SVG is the ideal format for logos on websites, in apps and for digital applications. It is lightweight, scalable and supported by all modern browsers. In this guide, we show you exactly how to export an optimal SVG file from Adobe Illustrator.
Export SVG in 5 steps
Step 1: Prepare your design
Convert all text to outlines via Type > Create Outlines. Remove hidden layers and unused elements. Ensure all objects are on one layer or logically organized. Check that there are no raster effects (shadows, blur) in your design, as these will be embedded as bitmaps in the SVG.
Step 2: Adjust the artboard
Select all objects (Ctrl/Cmd+A) and go to Object > Artboards > Fit to Artwork Bounds. This ensures the artboard fits tightly around your logo without unnecessary whitespace. You can also manually use the Artboard tool (Shift+O).
Step 3: Choose the correct export method
Go to File > Export > Export As. Choose SVG as the file type. You can also use File > Save As > SVG, but 'Export As' gives you more control over the output settings and generally produces a cleaner file.
Step 4: Configure the SVG options
In the SVG options panel: choose SVG profile 'SVG 1.1', set fonts to 'Convert to Outlines', choose 'Presentation Attributes' for CSS properties. Set Decimals to 2 for a good balance between file size and precision. Enable 'Responsive' if your logo needs to scale flexibly.
Step 5: Check the result
Open the exported SVG file in a web browser to verify everything looks correct. Compare it with your original in Illustrator. Check that colours match, shapes are intact and the file scales cleanly when zooming in and out in the browser.
Optimal SVG export settings
For the best results, use these settings: SVG profile 1.1, CSS properties set to 'Presentation Attributes', Decimals at 2, Encoding UTF-8. Disable 'Preserve Illustrator Editing Capabilities' to keep the file smaller. If your logo contains no images, choose 'Link' for image location. For additional optimization, you can then run the file through SVGO or a similar tool.
Extra tips for optimal SVG export
Use as few anchor points as possible for smaller files. Avoid clipping masks where possible and create shapes using Pathfinder instead. Do not use Illustrator's transparency effects; instead, set the opacity directly on the object. Group logical elements together so the SVG code remains well-organized. Consider using 'Show SVG Code' to inspect the code before exporting.
Frequently asked questions
Why does my SVG look different from Illustrator?
This is often caused by raster effects (shadows, blur, gradients with transparency) that do not translate well to SVG. Convert all effects to simple vector shapes or remove them. Also check that text has been converted to outlines.
Which SVG profile should I choose?
Choose SVG 1.1 for the broadest browser compatibility. SVG Tiny is intended for mobile devices with limited capability and is not needed for most applications.
How do I make my SVG smaller?
Reduce the number of anchor points, use whole numbers for colours, remove unnecessary metadata and use an SVG optimizer like SVGO. In Illustrator, you can use 'Simplify Path' to reduce the number of points.
Perfect SVG file from Illustrator
With the right settings and preparation, you can export a perfect SVG file from Illustrator for your website. Don't have Illustrator or want to ensure an optimal result? Logo in Vector delivers your logo as an optimized SVG file, ready for immediate use on your website.