By Dani Beaumont
With the outline stroke feature in Adobe XD, you can easily customize paths, borders, and shapes, making scaling objects and exporting them to SVG for the web that much easier. Let me show you an example.
I'm working on a web design and I've got the home screen here with two different layouts. The one on the left is for mobile and the one on the right is for tablet. I've already gone in and designed some icons for mobile, and I want to leverage those on the tablet layout. So for that, I'll come on in and select them. And just press and drag a second copy here on the tablet layout.
Next, what I want to do is, come in and resize them so that they fill the space a bit better. Notice, as I press and drag to resize the icons, the ones on the right are scaling quite fine, but the ones on the left -- although the icon is scaling -- the border weight is not scaling, so it's starting to look a little funny. Now, when you're designing in XD, one or the other of these approaches might be right for the type of design you're working on, so that's fine. It's just when you're scaling that things tend to get tough. To scale these in the past, I can always copy the icons to the clipboard, paste them over in Illustrator and resize them there, and then copy and paste them back here. But it's quite a hassle and it's difficult to resize the icons when you can't see them in context of the rest of the design. Instead, what I can do is, go ahead and undo the change that I made. I'm going to come in and select that first column of icons. And here in the Object menu, under Path, I'm going to select Outline Stroke. Now, when I come in and select the full set and press and drag to resize them, I'm getting a nice proportionate scale for the line weights as well as the objects themselves.
There's a second advantage to outline strokes when it comes to exporting SVG: once you convert an object to an outline stroke, it will automatically export as a scalable SVG. And this can be really handy when you're coding up responsive websites. If I'm not sure I've converted all of my borders to an outline stroke, I can always apply the setting at the time that I export the content. So if I come back in and select my new set of icons, and then under File, come in and select Export and then the Selected set. Notice here under Format, when I change it to SVG, I have an option for Path Options. If I check that, it's going to convert all paths in the selected set to Outline Stroke. And as a result, any exported SVG content will be marked as scalable SVG.
That's just a quick look at the outline stroke feature. We can't wait to see what you'll create using this capability.
Design objects that scale proportionately and export them in SVG format for display on the web. Learn how to customize paths, borders, and shapes using outline strokes. In this tutorial, you’ll explore how to set up icons that scale to fit two different layouts for mobile and tablet. Select an object and choose the Outline Stroke option in the Path section of the Object menu. When you apply outline strokes to shapes and paths, they are automatically exported as a scalable SVG files, the perfect assets for developing responsive websites.
