How to Export SVG from Sketch

Sketch's SVG export is flexible â€” here's how to get clean, minimal SVG for icons, logos, and web assets.

Preset:

Colors:

Drop your image here

Supports PNG, JPG, BMP, WEBP up to 5MB

VTracer vectorization + SVGO optimizationPrivacy protected

Basic SVG Export from Sketch

Export any layer or artboard as SVG.

Select layer â†’ File > Export â†’ choose SVG format â†’ Export
Or: select layer â†’ Inspect panel (right sidebar) â†’ Export section â†’ + â†’ SVG â†’ Export Selected
Artboard export: click artboard name â†’ File > Export Artboard â†’ SVG
Prefix option: use export presets to name files automatically (e.g., icon-{name}.svg)
Export multiple: Ctrl+click multiple layers â†’ Export Selected as SVG

SVG Export Settings in Sketch

Key settings for clean Sketch SVG output.

Flatten: select all â†’ Layer > Flatten Selection â€” merges complex groups before export
Outline text: Layer > Convert Text to Outlines â€” removes font dependency in SVG
Include background: uncheck 'Include background' to exclude artboard background fill
Sketch SVG output: clean presentation attributes, minimal grouping, small file size
Symbols: export symbols as individual SVG (useful for icon libraries)

Cleaning Up Sketch SVG Output

Post-export optimization for Sketch SVGs.

Run SVGO for an additional 15â€“25% size reduction
Sketch adds mask layers as clip-path elements â€” these are correct and shouldn't be removed
IDs: Sketch generates UUID-based IDs â€” run SVGO's cleanupIds to simplify
Remove style blocks: Sketch sometimes adds <style> blocks â€” SVGO can convert to presentation attributes

Frequently Asked Questions

Does Sketch export clean SVG?

Yes â€” Sketch is one of the cleaner SVG exporters. It uses presentation attributes, minimal metadata, and produces smaller files than Illustrator. SVGO can trim an additional 15â€“25% after export.

How do I export a Sketch icon set as individual SVG files?

Select all icon artboards â†’ File > Export â†’ SVG. Each artboard exports as a separate SVG file named after the artboard.

How do I export SVG with transparent background from Sketch?

In Export dialog, uncheck 'Include background' (or don't set a fill on the artboard). The SVG will have no background rectangle.

Can I export Sketch components/symbols as SVG?

Yes â€” right-click a symbol in the symbol list â†’ Export Symbol as SVG. Or detach the symbol instance and export normally.

Why does my Sketch SVG look different in the browser?

Sketch may use fonts not available in the browser, or include Sketch-specific shadow/gradient effects not standard in SVG. Convert text to outlines and simplify effects before export for browser-consistent results.

Ready to Convert Your Image to SVG?

Free online converter — no sign-up, no watermarks, results in under 3 seconds.

Try It Free — Convert Image to SVG