And what you should know before using Copy SVG Code.
Exporting an SVG file from Sketch is easy—but the process of making an efficient and reliable SVG, tailored to your needs, is a far greater topic. It’s actually such a complex topic that I’ve made a whole course about it, which I’m **releasing today** after 8 months of development! But this article isn’t a sales pitch; it’s a technical guide to a common question designers ask.
A common question when exporting SVGs from Sketch is: “Which feature should I use to export? Copy SVG Code? The Export button? Something else?”
I’ve deeply examined each of these features and compiled my findings and recommendations for you in this article.
When it comes to bitmap formats, it doesn’t matter if you had your layers in a slice or an Artboard; whether you dragged the design out of the Layer List for convenience or used the Export button in the Inspector. Your final graphic will be the same.
But SVGs are different. They are descriptions of your design, containing tons of information about your layers. And there are subtle ways in which those descriptions change based on how you get the SVG out of Sketch. Your graphics will look the same, but the code underneath will vary.
The main variables are:
Which Feature Does the Exporting
Are you using the Export button in the Inspector, the Copy SVG Code function, or dragging out of the Layer List or Inspector export preview?
What You Export
Are you exporting an Artboard, a layer, or a slice? If you’re only exporting selected layers or slices, are they contained within an Artboard or floating around in the Canvas?
Other Processes
Are you relying on Sketch’s SVGO Compressor plugin to optimize the file?
When combined, these variables allow for at least a dozen ways to export an SVG from your design. So which is best?
✴️ Take-Aways & Recommendations
In case you don’t care about the nitty-gritty technical details, here are my tips for your SVG export workflow:
-
Artboards are key. Always have an Artboard around your layers, and export the Artboard rather than the layers or slices inside it.
-
Feel free to use either the Export button in the Inspector or the Copy SVG Code function in the Edit menu—but, again, use them on your Artboard.
-
Copy SVG Code excludes a couple small things that you might want in your SVG—such as a title element (to improve accessibility), or an XML declaration (which is advisable for SVGs used as independent graphics).
-
If you like to use Sketch’s SVGO Compressor plugin, remember that it intentionally only works with the Export button—not Copy SVG Code.
-
Check out the keyboard shortcuts tip below to boost your efficiency!
To understand how I arrived at these conclusions, and what the specific differences are between each export method, we need to understand how layers are positioned in an SVG.
“I’m from there, but I’ve moved here”
Every SVG has a grid, or “coordinate system,”, in which elements are positioned. This is fundamental to how SVGs work.
SVGs also have something called a viewBox, and it’s a bit like an Artboard in Sketch. The viewBox determines which part of the SVG’s grid shows up in your final graphic—anything inside will be visible, and anything outside will be cropped out.
As a generally accepted practice, the viewBox is often positioned at the grid’s origin. In other words, the top left corner of the viewBox is positioned at 0,0 (zero on both the x and y axes). It could be positioned anywhere on the grid, but most scenarios benefit from sticking to this convention.
When exporting a graphic from Sketch (in any format), there are some approaches that allow you, the user, to define the dimensions of your graphic, and others in which Sketch determines the dimensions for you. For example, if you export an Artboard or a slice, you’re in control. If you select any layer and click Make Exportable, Sketch is in control and will create a graphic that is exactly the size of the layer you selected (plus its shadows and borders).
If we export just this red rectangle layer as an SVG, there won’t be any extra space around the rectangle—the viewBox will be the same size as the rectangle. So you might expect Sketch to position both the viewBox and rectangle at 0,0 in the new SVG’s grid.
The downside to that approach is that you lose the information about where that rectangle was positioned in its Artboard. Fortunately, Sketch agrees that the positions of your SVG elements should, for the most part, be the same as your layers within an Artboard.
So when exporting just that red rectangle, Sketch creates a viewBox with the rectangle’s dimensions, but keeps the viewBox positioned at 0,0. Sketch also respects the rectangle’s original position in its Artboard, and uses a trick to move the rectangle over to 0,0 without changing its core position attributes.
That trick is called a translate transform. There are many types of transforms, like scale and rotate, but translate is the most basic: it simply moves an element. Yup—“translate” is just a fancy word for “move.”
It might sound redundant to create an element in one place, then immediately move it somewhere else. But this 2-step process is necessary to preserve the rectangle’s original position information, while also adhering to the convention of having a viewBox positioned at 0,0 in the SVG’s grid. Those might sound like silly reasons, but they can be important when you’re actually working with the SVG code. Here’s a real-world scenario:
When Translate Transforms Are Helpful
In my experience, there’s one scenario when it’s essential to position SVG elements where their corresponding Sketch layers used to be: when you are changing or adding layers to an existing SVG graphic.
Imagine you’ve exported the ever-adorable “Monsieur Whale” icon as an SVG, and spent time optimizing, tweaking, and perhaps animating it or placing it into a spritesheet. But then you make some changes….
After changing the path of the mouth and adding the spray lines, you want to incorporate those changes back into your carefully-crafted SVG. If you export or use Copy SVG Code on just the new layers, Sketch generates an SVG that is both valid as a graphic on its own and also usable for copying a select portion to incorporate back into your original SVG. Doing the latter is easy because the transform is applied to a <g> group; your design elements inside have their original positions and are ready to copy.
*A crude simplification of the new SVG code: *
<svg ... >
<g transform="translate(-10 -80)">
<path id="mouth" d="**[vector points]**" ... />
**<path id="spray-1" .../>
<path id="spray-2" .../>**
...
</g>
</svg>
*(**Bold** = Modifications you would copy back into the original)*複製程式碼The new vector paths are all positioned within the same SVG grid as the original, so they can easily be pasted in. Iterating on an SVG—even after it has left Sketch—becomes almost effortless.
I suggest only using this per-layer workflow when modifying a graphic that you’ve already made. As mentioned in the Take-Aways section above, it’s best to start new SVGs by exporting the Artboard—that way, translate transforms don’t clutter your final SVG.
A Note on Optimization
If you’re using Copy SVG Code for selected layers and incorporating them into an existing SVG (as described above), be careful when putting that copied code through an optimizer like SVGOMG.
I’m a big fan of SVGOMG, and cover all of its options in my course, but some optimizations will rearrange or flatten that translate transform — the one that isn’t supposed to be copied when you incorporate an element back into your existing SVG. Optimizations like Collapse useless groups, and Move attrs from groups to elements might move the transform attribute onto the element you want to copy (rather than leaving it on it’s container group). In that case it’s still pretty easy to delete. But the Round/Rewrite Paths optimization might flatten the transform into that element’s vector points—effectively making it permanent.
It’s not a bad thing to run your copied SVG code through SVGOMG — just make sure that you are still able to locate that translate transform. And if you’re copying layers that will turn into <path> elements, you’re better off copying the whole Artboard so that there is no translate transform at all.
Keyboard Shortcuts Tip
If you start using and loving Copy SVG Code, here’s a tip for making your workflow even more efficient.
Install the awesome Sketch Commands plugin; it adds a function to select the Artboard of the layer you’re working with. Then create custom keyboard shortcuts in System Preferences for that Current Artboard command and for Copy SVG Code. The keys you choose are a matter of personal preference—I mapped these to shift ⌘ A (replacing Sketch’s Select All Artboards function), and control option ⌘ S, respectively.
These new shortcuts allow you to select the Artboard in one keystroke, and copy its SVG code in another! ✨
How Each Method Works
If you’re curious to know the exact differences between Sketch’s export features and all of the aforementioned variables, I’ve made the results of my tests available here:
Technical Findings from Testing Sketch`s SVG Export Methods
Documents the results and tests that informed this article…medium.com
Sketch’s SVG export has improved dramatically in the last year—and even with the last few updates. But certain best practices remain true: always use an Artboard around your layers, and export or copy the Artboard rather than individual layers or slices. The Copy SVG Code function is no longer inferior to the Export button; if you know when and how to use it, it can provide a considerable efficiency boost to your design workflow.
This article was inspired by my new course SVG Workflows in Sketch. I wish I had resources like this when I was learning SVG, so I’m determined to provide some of those missing pieces for other designers. The course aims to bridge the gap between what you know in Sketch, and the amazing things you’ll create with SVG.