I was wondering about it this weekend and I found out that you can simply use an image tag that points to a SVG file like this:
<div class="slds-illustration slds-illustration_large" aria-hidden="true">
<img src="/img/chatter/OpenRoad.svg" class="slds-illustration__svg" alt=""/>
<h3 class="slds-text-heading_medium">Some title</h3>
This works fine but you'll have to inspect the source of existing pages to figure out the proper SVG file names.
Update 14 April 2019: This is now documented in SLDS website.
Update 30 April 2021: This no longer seems to be documented in the SLDS website. I attempted to check the wayback machine to verify the change, but the snapshot from April 2019 didn't have the full page.
Let's catalog the image paths that everyone has found so far; if anyone finds more, please add them to this answer.
- Open Road: /img/chatter/OpenRoad.svg
- Desert: /img/chatter/Desert.svg
- No Events: /projRes/ui-home-private/emptyStates/noEvents.svg
- No Tasks: /projRes/ui-home-private/emptyStates/noTasks.svg
- No Assistant: /projRes/ui-home-private/emptyStates/noAssistant.svg