Exporting Assets for Web: SVG, JPEG, & PNG

Topics covered in this Adobe XD tutorial:

Exporting individual assets, Exporting artboards

Exercise Preview

Exercise Overview

In this exercise, you’ll learn how to export graphics for use in webpages.

Getting Started

1. If you still have Pulse - Prototyping Done.xd open from the previous exercise, skip to the next step. Otherwise open it as follows:

   • In Adobe XD, go to File > Open from Your Computer or hit Cmd–Shift–O (Mac) or Ctrl–Shift–O (Windows).
   • Navigate into Desktop > Class Files > Adobe XD Class > Pulse and double–click on Pulse - Prototyping Done.xd to open it.
2. At the top of the Home Page artboard, select the black navbar.

3. Zoom to the selection by hitting Cmd–3 (Mac) or Ctrl–3 (Windows).

Exporting Vector Graphics as SVG

1. We want to select the logo. It’s nested in the navbar component, so double–click on the black navbar to go into it. You won’t see anything change, but you will now be able select things inside this component.
2. Hover over the PULSE logo and when you see a green outline around the logo click once to select the logo.

3. Select the PULSE logo.

   This is a vector logo, so we want to export it as SVG (S calable V ector G raphics) for use in a website.

4. If the Layers panel is not open, at the bottom left of the window click the  icon.
5. Notice the name of the selected layer is Pulse logo.
6. Layer names are used for the exported file names, so let’s rename it. Double–click on the Pulse logo name.
7. Rename it to pulse-logo and hit Return (Mac) or Enter (Windows) to apply it.
8. With the logo selected, go to File > Export > Selected.
9. Windows users only, next to Export to click Choose Destination (or Change).
10. If you’re already in the Pulse folder, go into the Web Assets folder. (Otherwise, navigate to Desktop > Class Files > Adobe XD Class > Pulse > Web Assets.)
11. Windows users only, click Select Folder.

12. Set the following (Mac users: If you don’t see them, click the Options button):

    • Set Format to SVG.

    • Set Styling to Presentation Attributes.

      NOTE: Presentation Attributes codes various attributes (fill, stroke, etc.) on each element, whereas Internal CSS codes class rules into an embedded style tag. While Internal CSS may be more efficient (smaller files) for some graphics, Presentation Attributes are typically smaller. Presentation Attributes are also easier to override with CSS, so we typically using them.

    • Set Save images to Embed. (We don’t have pixel-based images in our selection, but if we did we’d typically prefer them to be embedded into the SVG.)

    • Check on Optimize File Size (Minify).

13. Click Export.

    TIP: Multiple selected elements are exported separately, using the layer names.

Exporting Pixel-Based Graphics as JPEG

1. Select the photo below the black navbar (behind New Autumn Attire).
2. In the Layers panel double–click on the feature photo name to edit it.
3. Web filenames can’t have spaces in them. Change the space into a dash to make it feature-photo (Hit Return (Mac) or Enter (Windows) to apply the change.)

4. We could select the objects we want to export, but there’s another way. In the Layers panel, hover over feature-photo and to the right of the layer name click the Mark for Export icon.

   NOTE: XD automatically marks images for export. Earlier versions of XD did not do this, and people can uncheck it, so don’t assume it’s always checked on.

5. In the Layers panel, mark the following for export: women-photo and men-photo.

6. Now we can export all the objects we marked for batch export. Go to File > Export > Batch.

   • Mac users: You should still be in the Web Assets folder.
   • Windows users: Export to should still be set to the Web Assets folder.

7. Set the following (Mac users: If you don’t see them, click the Options button):

   Format:	JPG
   Quality:	30%
   Export Size:	Choose 2x from the menu (or type in 2).

   NOTE: If you want both 1x and 2x sizes, choose Web from the Export Size menu.

8. Click Export.
9. Let’s look at the final exported files. Switch to the Desktop (the Finder on Mac or Windows Explorer on Windows).

10. Navigate into Desktop > Class Files > Adobe XD Class > Pulse > Web Assets and notice the following:

    • The feature-photo was exported at a 2x size.
    • The pulse-logo is vector and rendered at the full resolution of the screen, so there’s no need for 1x or 2x sizes.

Exporting Artboards

When sending the entire design (all the artboards) to a client or developer, XD has online sharing options we’ll cover in the next exercise. If you prefer exporting PNGs or a multiple page PDF file instead, here’s how.

1. Keep the Web Assets folder open on your Desktop, but switch back to XD.
2. Click onto an empty part of the canvas to make sure nothing is selected.

3. Go to File > Export > All Artboards.

   • Mac users: You should still be in the Web Assets folder.
   • Windows users: Export to should still be set to the Web Assets folder.

4. Set the following (Mac users: If you don’t see them, click the Options button):

   Format:	PNG
   Export Size:	2x

   NOTE: This will only export a 1x version of each artboard. If you prefer to export 1x and 2x files, set Export Size to Web .

5. Click Export All Artboards.

6. We can also export a PDF that contains each artboard as a different page. Again go to File > Export > All Artboards.

   • Mac users: You should still be in the Web Assets folder.
   • Windows users: Export to should still be set to the Web Assets folder.

7. Set the following (Mac users: If you don’t see them, click the Options button):

   Format:	PDF
   Save selected assets as:	Single PDF file

8. Click Export All Artboards.
9. Switch back to the Web Assets folder open on your Desktop.
10. Notice there is a PNG for each artboard, with a filename that matches the artboard name in XD.
11. Double–click on Pulse - Prototyping Done.pdf to open it.
12. Scroll through the PDF file to see that each artboard is a different page.
13. Close the file.
14. Switch back to XD.

15. Save and close the file.

Exporting Pixel-Based Graphics as PNG

1. In Adobe XD, go to File > Open from Your Computer or hit Cmd–Shift–O (Mac) or Ctrl–Shift–O (Windows).

2. Navigate into Desktop > Class Files > Adobe XD Class > Pulse and double–click on iTastify Design Done.sketch to open it.

   NOTE: Notice that this is a Sketch file, and XD can open it! The conversion may not be perfect, so be sure to inspect your files closely if you’re converting them.

3. Near the top of the artboard, there’s a hand holding an iPhone. It requires a transparent background, so it can be composited onto the background pattern in the final webpage. JPEG is best for compressing photos, but it doesn’t support transparency. We’ll have to make this a PNG.

   The photo is nested in several groups, so hold Cmd (Mac) or Ctrl (Windows) and click on the hand holding an iPhone.

4. With the photo selected, go to File > Export > Selected.
5. Windows users only, next to Export to click Change.
6. Navigate to Desktop > Class Files > Adobe XD Class.
7. Windows users only, click Select Folder.

8. Set the following (Mac users: If you don’t see them, click the Options button):

   Format:	PNG
   Export Size:	Choose 2x from the menu (or type in 2).

9. Click Export.

10. You can close this file without saving changes.