Technical Findings from Testing Sketch’s SVG Export Methods
--
This article is a summary of my reasearch into how an SVG’s code changes depending on which export feature you use. Based on these findings, I’ve compiled the take-aways, explanations, and recommendations for your workflow in this other article:
The information below is categorized into Sketch’s 3 main export functions: the Export button, dragging out of the Layer List or Inspector, and the Copy SVG Code from the Edit menu. Within each category, I’ve listed what kind of layer was exported and notes about the results.
The Copy SVG Code part mentions the <?xml … > XML declaration found on some SVGs. I’ve covered when that’s necessary in this article:
There are several shorthands used below—such as “no translate transform”; “user-defined bounds”; and “Sketch determines bounds” that are more thoroughly explained in the companion article.
Most of the time when exporting an SVG, it’s preferable to have “no translate transform” and “user-defined bounds.” The approaches that provide both of those have a 👍🏽 next to them.
📅 These results were last tested in Sketch Beta version 44 (41325)
Export Button
🔌 Sketch SVGO Compressor plugin processes your exported SVG.
With an Artboard: 👍🏽
▸ No translate transform
▸ User-determined bounds
With a single layer inside an Artboard:
▹ Translated
▹ Sketch-determined bounds based on layer
With a single layer outside an Artboard:
▸ No translate transform
▹ Sketch-determined bounds based on layer
With a slice inside an Artboard:
▹ Translated
▸ User-determined bounds
On a slice outside an Artboard: 👍🏽
▸ No translate transform
▸ User-determined bounds
Dragging out of Sketch
🔌 The Sketch SVGO Compressor plugin doesn’t run.
Dragging a layer from the Layer List:
▸ The layer must already have an SVG export setting
▸ Does not include <title>, <desc>, or comment about Sketch version
▸ Otherwise identical to using Export button
Dragging a slice or Artboard’s export preview from the Inspector:
▸ Only slices and Artboards show export previews in the Inspector; layers don’t, so this isn’t a great solution overall.
▸ Identical to using Export button
Copy SVG Code
🔌 The Sketch SVGO Compressor plugin doesn’t run (and isn’t meant to).
Does not include a <title> element, because a file name isn’t specified.
Does not include an <?xml … > XML declaration at the top of the code.
With an Artboard: 👍🏽
No translation
User-determined bounds
With layers inside an Artboard
Transformed
Sketch determines bounds based on layer
With layers outside an Artboard:
No translation
Sketch determines bounds based on layer
With a slice inside an Artboard:
(layers must also be selected)
Translated Artboard group
Sketch determines bounds based on selected layers; only respects slice bounds if other selected layers are inside.
With a slice outside an Artboard:
(layers must also be selected)
No translation (no Artboard group)
Sketch determines bounds based on selected layers; only respects slice bounds if other selected layers are inside.
Check out the companion article, for the take-aways from this data and my recommendations for your workflow.
