skip to content
HeyBrazadownload →

Sketch logosketch · HeyBraza shows you

how to export svg from sketch

HeyBraza shows you both routes - make exportable for a file, or edit > copy > copy svg code for a dev.

developers want an svg, not a png - and sketch gives you two ways to hand one over. you can export an svg file, or copy the svg code straight to the clipboard. here's where each lives.

or do it yourself

  1. 1select your icon - ideally a single shape or a group on its own frame.
  2. 2click 'make exportable' in the inspector, then set the format dropdown to 'svg'.
  3. 3click 'export selected' to save the svg file (the scale is locked to 1x for vectors - that's fine, svgs scale freely).
  4. 4to hand a dev the raw code instead, select the shape and choose 'edit' > 'copy' > 'copy svg code', then paste it to them.
  5. 5for full inspect-and-download access, share the document to the web app so devs can grab assets from any browser.

let HeyBraza do this with you

HeyBraza is a tiny on-screen guide that points at the right buttons and talks you through it, on windows and mac.

download

common questions

why does my exported svg look wrong or has extra borders?

inner and outer borders aren't supported in svg - convert them to a normal stroke or flatten the shape before exporting.

can a developer export svgs without sketch?

yes - share the document to your workspace with 'can download and inspect' on, and they can inspect and export assets from the browser.

more fixes