+ Start a Discussion
Chandan Kumar 100Chandan Kumar 100 

How to use SVG path in Lightning !!!!

my org create first app and some error are occure
now code is Here......
<aura:application >
<ul class="slds-timeline">
  <li>
    <div class="slds-timeline__item">
      <span class="slds-assistive-text">Task</span>
      <div class="slds-media">
        <div class="slds-media__body">
          <div class="slds-media slds-timeline__media slds-timeline__media_task">
            <div class="slds-media__figure slds-timeline__icon">
              <div class="slds-icon_container slds-icon-standard-task" title="task">
                <svg class="slds-icon slds-icon_small" aria-hidden="true">
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#task"></use>
                </svg>
              </div>
            </div>
            <div class="slds-media__body">
              <div class="slds-media">
                <div class="slds-media__figure">
                  <span class="slds-checkbox">
                    <input type="checkbox" name="options" id="checkbox-351">
                    <label class="slds-checkbox__label" for="checkbox-351">
                      <span class="slds-checkbox_faux"></span>
                      <span class="slds-form-element__label slds-assistive-text">mark-complete</span>
                    </label>
                  </span>
                </div>
                <div class="slds-media__body">
                  <h3 class="slds-truncate" title="Review proposals for EBC deck with larger team and have marketing review this">
                    <a href="javascript:void(0);">Review proposals for EBC deck with larger team and have marketing review this</a>
                  </h3>
                  <ul class="slds-list_horizontal slds-wrap">
                    <li class="slds-m-right_large">
                      <span class="slds-text-title">Contact:</span>
                      <span class="slds-text-body_small">
                        <a href="javascript:void(0);">Lei Chan</a>
                      </span>
                    </li>
                    <li class="slds-m-right_large">
                      <span class="slds-text-title">Assigned to:</span>
                      <span class="slds-text-body_small">
                        <a href="javascript:void(0);">Betty Mason</a>
                      </span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="slds-media__figure slds-media__figure_reverse">
          <div class="slds-timeline__actions">
            <p class="slds-timeline__date">Feb 24</p>
            <button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" title="More Options for Task, Review proposals">
              <svg class="slds-button__icon" aria-hidden="true">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
              </svg>
              <span class="slds-assistive-text">More Options for Task, Review proposals</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li>
    <div class="slds-timeline__item">
      <span class="slds-assistive-text">Event</span>
      <div class="slds-media">
        <div class="slds-media__body">
          <div class="slds-media slds-timeline__media slds-timeline__media_event">
            <div class="slds-media__figure slds-timeline__icon">
              <div class="slds-icon_container slds-icon-standard-event" title="event">
                <svg class="slds-icon slds-icon_small" aria-hidden="true">
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#event"></use>
                </svg>
              </div>
            </div>
            <div class="slds-media__body">
              <h3 class="slds-truncate" title="Company One — EBC Meeting">
                <a href="javascript:void(0);">Company One — EBC Meeting</a>
              </h3>
              <p class="slds-truncate" title="Let’s get together to review the theater’s layout and facilities. We’ll also discuss potential things that truncate at a certain width.">Let’s get together to review the theater’s layout and facilities. We’ll also discuss potential things that truncate at a certain width.</p>
              <ul class="slds-list_horizontal slds-wrap">
                <li class="slds-m-right_large">
                  <span class="slds-text-title">Time:</span>
                  <span class="slds-text-body_small">
                    <a href="javascript:void(0);">Feb 23, 2015 11:00am–12:00pm</a>
                  </span>
                </li>
                <li class="slds-m-right_large">
                  <span class="slds-text-title">Location:</span>
                  <span class="slds-text-body_small">
                    <a href="javascript:void(0);">300 Pike St, San Francisco CA</a>
                  </span>
                </li>
                <li class="slds-m-right_large">
                  <span class="slds-text-title">Name:</span>
                  <span class="slds-text-body_small">
                    <a href="javascript:void(0);">Lei Chan</a>,
                    <a href="javascript:void(0);">Jason Dewar</a>,
                    <a href="javascript:void(0);">Gwen Jones</a> and
                    <a href="javascript:void(0);">Pete Schaffer</a>
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="slds-media__figure slds-media__figure_reverse">
          <div class="slds-timeline__actions">
            <p class="slds-timeline__date">Feb 24</p>
            <button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" title="More Options for Event, Company One">
              <svg class="slds-button__icon" aria-hidden="true">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
              </svg>
              <span class="slds-assistive-text">More Options for Event, Company One</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li>
    <div class="slds-timeline__item">
      <span class="slds-assistive-text">Call</span>
      <div class="slds-media">
        <div class="slds-media__body">
          <div class="slds-media slds-timeline__media slds-timeline__media_call">
            <div class="slds-media__figure slds-timeline__icon">
              <div class="slds-icon_container slds-icon-standard-log-a-call" title="call">
                <svg class="slds-icon slds-icon_small" aria-hidden="true">
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#log_a_call"></use>
                </svg>
              </div>
            </div>
            <div class="slds-media__body">
              <h3 class="slds-truncate" title="Mobile conversation on Monday">
                <a href="javascript:void(0);">Mobile conversation on Monday</a>
              </h3>
              <p class="slds-truncate" title="Lei seemed interested in closing this deal quickly! Let’s move.">Lei seemed interested in closing this deal quickly! Let’s move.</p>
              <ul class="slds-list_horizontal slds-wrap">
                <li class="slds-m-right_large">
                  <span class="slds-text-title">Name:</span>
                  <span class="slds-text-body_small">
                    <a href="javascript:void(0);">Lei Chan</a>
                  </span>
                </li>
                <li class="slds-m-right_large">
                  <span class="slds-text-title">Assigned to:</span>
                  <span class="slds-text-body_small">
                    <a href="javascript:void(0);">Betty Mason</a>
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="slds-media__figure slds-media__figure_reverse">
          <div class="slds-timeline__actions">
            <p class="slds-timeline__date">Feb 24</p>
            <button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" title="More Options for Call, Mobile conversation">
              <svg class="slds-button__icon" aria-hidden="true">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
              </svg>
              <span class="slds-assistive-text">More Options for Call, Mobile conversation</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li>
    <div class="slds-timeline__item">
      <span class="slds-assistive-text">Email</span>
      <div class="slds-media">
        <div class="slds-media__body">
          <div class="slds-media slds-timeline__media slds-timeline__media_email">
            <div class="slds-media__figure slds-timeline__icon">
              <div class="slds-icon_container slds-icon-standard-email" title="email">
                <svg class="slds-icon slds-icon_small" aria-hidden="true">
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#email"></use>
                </svg>
              </div>
            </div>
            <div class="slds-media__body">
              <h3 class="slds-truncate" title="Mobile conversation on Monday">
                <a href="javascript:void(0);">Mobile conversation on Monday</a>
              </h3>
              <p class="slds-truncate" title="Hi guys, Thanks for meeting with the team today and going through the proposals we saw. This goes on until it’s truncated.">Hi guys, Thanks for meeting with the team today and going through the proposals we saw. This goes on until it’s truncated.</p>
              <ul class="slds-list_horizontal slds-wrap">
                <li class="slds-truncate_container_50 slds-m-right_large slds-grid">
                  <span class="slds-text-title">To:</span>
                  <span class="slds-text-body_small slds-m-left_xx-small slds-truncate" title="Lei Chan with Long Name that might go on for quite some distance futher than you might expect">
                    <a href="javascript:void(0);">Lei Chan with Long Name that might go on for quite some distance futher than you might expect</a>
                  </span>
                  <span class="slds-no-flex slds-text-body_small"> + 44 more</span>
                </li>
                <li class="slds-m-right_large">
                  <span class="slds-text-title">From:</span>
                  <span class="slds-text-body_small">
                    <a href="javascript:void(0);">Jason Dewar</a>
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="slds-media__figure slds-media__figure_reverse">
          <div class="slds-timeline__actions">
            <p class="slds-timeline__date">Feb 24</p>
            <button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" title="More Options for Email, Mobile conversation">
              <svg class="slds-button__icon" aria-hidden="true">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
              </svg>
              <span class="slds-assistive-text">More Options for Email, Mobile conversation</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>
</aura:application >

AND ERROR MSG is User-added image
sfdcMonkey.comsfdcMonkey.com
hi Chandan Kumar ,
remove  <svg> and <use> tags  in your code and for display SVG icons you can use 

<lightning:icon iconName="action:approval" size="large" alternativeText="Indicates approval"/>

or you can create custom lightning component for show SVG icons in lightning component 
here is the sample code [see the Step 0 : Create Support SVG Lightning component. part] :-
http://www.sfdcmonkey.com/2017/01/07/custom-lookup-lightning-component/ 

Hopes it helps 
if it helps you, closed your query with choosing best answer so it make proper solution for others in future
thanks ][sfdcmonkey.com (http://sfdcmonkey.com)]
 
salesforce learner 14salesforce learner 14
Hi Piyush,

I tried the slution you provided but I am still not able to see the path

<div class="slds-path-coach">
  <div class="slds-grid">
    <div class="slds-tabs_path" role="application">
      <ul class="slds-tabs_path__nav" role="listbox" aria-orientation="horizontal">
        <li class="slds-tabs_path__item slds-is-complete slds-is-incomplete slds-is-current" role="presentation">
          <a aria-selected="false" class="slds-tabs_path__link" href="javascript:void(0);" id="path-1" role="option" tabindex="-1">
            <span class="slds-tabs_path__stage">
             RRF
               <lightning:icon iconName="action:approval" size="large" alternativeText="Indicates approval"/>
              
              <span class="slds-assistive-text">Stage Complete</span>
            </span>
            <span class="slds-tabs_path__title">Contacted</span>
          </a>
        </li>
        <li class="slds-tabs_path__item slds-is-complete" role="presentation">
          <a aria-selected="false" class="slds-tabs_path__link" href="javascript:void(0);" id="path-2" role="option" tabindex="-1">
            <span class="slds-tabs_path__stage">
              <lightning:icon iconName="action:approval" size="large" alternativeText="Indicates approval"/>
              <span class="slds-assistive-text">Stage Complete</span>
            </span>
            <span class="slds-tabs_path__title">Open</span>
          </a>
        </li>
        <li class="slds-tabs_path__item slds-is-current" role="presentation">
          <a aria-selected="true" class="slds-tabs_path__link" href="javascript:void(0);" id="path-3" role="option" tabindex="0">
            <span class="slds-tabs_path__stage">
              <lightning:icon iconName="action:approval" size="large" alternativeText="Indicates approval"/>
              <span class="slds-assistive-text">Current Stage:</span>
            </span>
            <span class="slds-tabs_path__title">Unqualified</span>
          </a>
        </li>
        <li class="slds-tabs_path__item slds-is-incomplete" role="presentation">
          <a aria-selected="false" class="slds-tabs_path__link" href="javascript:void(0);" id="path-4" role="option" tabindex="-1">
            <span class="slds-tabs_path__stage">
              <lightning:icon iconName="action:approval" size="large" alternativeText="Indicates approval"/>
            </span>
            <span class="slds-tabs_path__title">Nurturing</span>
          </a>
        </li>
        <li class="slds-tabs_path__item slds-is-incomplete" role="presentation">
          <a aria-selected="false" class="slds-tabs_path__link" href="javascript:void(0);" id="path-5" role="option" tabindex="-1">
            <span class="slds-tabs_path__stage">
             <lightning:icon iconName="action:approval" size="large" alternativeText="Indicates approval"/></span>
            <span class="slds-tabs_path__title">Closed</span>
          </a>
        </li>
      </ul>
    </div>
    <button class="slds-button slds-button_brand slds-path__mark-complete slds-no-flex slds-m-horizontal_small">
      <lightning:icon iconName="action:approval" size="large" alternativeText="Indicates approval"/>
      Mark Status as Complete</button>
  </div>
</div>




 
salesforce learner 14salesforce learner 14
Hi Piyush,

Although no error is coming but I am not getting the desired path.
This is what the result looks like.

User-added image





 
SFDCDEVELOPERSFDCDEVELOPER
Hi,
Chandan Kumar 100

I think you are missing extends in your application
<aura:application extends="force:slds">
  
</aura:application>
Let me know if it solves your problem
 
Caleb Kuester 27Caleb Kuester 27
Put a zipped archive into a static resource and do something like this:
Markup:
<div id="someDiv">
     <img src="{!$Resource.Asset_Name+'/somesvg.svg'}"/>
</div>
Then in your .css:
.THIS #someDiv img{
     height:someNumberOfpx;
     width:someNumberOfpx;
}
Something to note about lightning:icon: It can only have a maximum size of about 32px and cannot be resized (I think).