[SalesForce] How to use slds illustration

I looked into this to use illustration in my component.
https://lightningdesignsystem.com/components/illustration/

As we can't use svg tag in lightning component, so is there any way by which we can make a use of this?

One solution I thought is copying the svg code in a file and added it to resource, and use the path in lightning:icon src attribute. Is there any other good solution for that if framework recommends?

Best Answer

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=""/>
    <div class="slds-text-color_weak">
        <h3 class="slds-text-heading_medium">Some title</h3>
    </div>
</div>

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

Related Solutions

[SalesForce] How to use SVG and USE tags? Aren’t they deprecated

SVG isn't directly supported in Lightning at this time, although you can do so by way of using an afterRender or the Lightning SVG component helper. However, what that documentation is saying is that the SVG component helper should no longer be used, because we now have lightning:icon and lightning:buttonIcon; the correct method for using a Lightning Icon is to use lightning:icon, as follows:

<lightning:icon size="x-small" iconName="utility:check" />

This emits the appropriate SVG/USE tags on your behalf. If you need to include custom SVG icons, such as those in a static resource, you'd still need to use the SVG helper, or a variant of the helper for including SVG elements, but you should not use the SVG helper component to include Lightning icons.

As a full example, let's say you want to implement Tooltips. To modify the code to be used in a Lightning Component, you would simply do this:

<div style="padding-left:2rem;padding-top:5rem;position:relative;">
    <div class="slds-form-element">
        <div class="slds-form-element__icon slds-align-middle">

            <button class="slds-button slds-button_icon slds-button slds-button_icon" aria-describedby="help" title="Help">
                <lightning:icon iconName="utility:info" size="xx-small" />
                <span class="slds-assistive-text">Help</span>
            </button>
        </div>
    </div>
    <div class="slds-popover slds-popover_tooltip slds-nubbin_bottom-left" role="tooltip" id="help" style="position:absolute;top:0px;left:15px;">
        <div class="slds-popover__body">Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.</div>
    </div>
</div>

[SalesForce] How to use progress ring with lightning component

You need to use custom rendering. This is not a complete example (it doesn't show any icons/variants), but this will get you started:

Component

<aura:component >
    <aura:attribute name="value" type="Integer" default="0" />
    <aura:handler name="init" value="{!this}" action="{!c.updateView}" />
    <aura:handler name="change" value="{!v.value}" action="{!c.updateView}" />
    <div class="slds-progress-ring">
        <div id="progressContainer" class="slds-progress-ring__progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{!v.value}">

        </div>
        <div class="slds-progress-ring__content">
        </div>
    </div>
</aura:component>

Controller

({
    updateView: function(component, event, helper) {
        // Does nothing *now*, but would be responsible for
        // choosing the correct css class for the progress area, etc.
    }
})

Renderer

({
    // Create SVG, path, populate with default values from controller
    render: function(component, helper) {
        var result = this.superRender(),
            xmlns = "http://www.w3.org/2000/svg",
            updateContainer = result[0].querySelector("#progressContainer"),
            value = component.get("v.value"),
            dValue = "M 1 0 A 1 1 0 "+Math.floor(value / 50)+" 1 "+
                Math.cos(2 * Math.PI * value / 100)+" "+
                Math.sin(2 * Math.PI * value / 100)+" L 0 0",
            svg = document.createElementNS(xmlns,"svg"),
            path = document.createElementNS(xmlns,"path");
        svg.setAttributeNS(null,"viewBox", "-1 -1 2 2");
        path.setAttributeNS(null, "class", "slds-progress-ring__path");
        path.setAttributeNS(null, "d", dValue);
        svg.appendChild(path);
        updateContainer.appendChild(svg);
        return result;
    },
    // Update the progress bar on a rerender event
    rerender: function(component, helper) {
        var value = component.get("v.value"),
            dValue = "M 1 0 A 1 1 0 "+Math.floor(value / 50)+" 1 "+
                Math.cos(2 * Math.PI * value / 100)+" "+
                Math.sin(2 * Math.PI * value / 100)+" L 0 0",
            svg = component.getElement().querySelector("svg"),
            path = svg.childNodes[0];
        this.superRerender();
        path.setAttributeNS(null, "d", dValue);
    }
})

Note that this implementation uses an Integer value from 0-100. If you want to use a different scale (e.g. 0-1 floating point), adjust accordingly.