0

I have an Angular 1.5 application that communicate with Salesforce using REST API.

Salesforce require us to use SVG icons with the following syntax:

<svg aria-hidden="true" class="slds-icon slds-icon--large slds-icon-standard-user">
    <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#user')}"></use>
</svg>

In salesforce does work well.

I'm trying to use locally in order to develop but does not work. I tried the following code:

<svg aria-hidden="true" class="slds-icon slds-icon--large slds-icon-standard-user">
    <use xlink:href="/path/to/the/icon.svg"></use>
</svg>

According to this documentation we need to add within the HTML element the following code:

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

But no luck! :(

Any idea to use SVG with those tags and refer to a local file?

3
  • What does "no luck" mean exactly? Apr 4, 2017 at 6:50
  • Means that the icon is not displayed...
    – Francisco
    Apr 4, 2017 at 21:19
  • 1
    By "use locally" do you mean testing on your development machine using the file:// scheme? If so, if you are testing on Chrome, it may not work due to security features of the browser. Try Firefox instead. Apr 5, 2017 at 10:35

1 Answer 1

0

Use <img> and set your src reference to the local path of your .svg file.

<img class="papa" src="http://s.cdpn.io/3/kiwi.svg">

More here: https://css-tricks.com/using-svg/

3
  • Hello ! But it's not possible to change the color of the svg using the <img> tag ?
    – Fitspade
    Apr 8, 2021 at 7:41
  • @Fitspade No. when using <img> with a .svg source, the browser will essentially create a rasterized, [png equivalent] version of the resource—editing capabilities are lost. So, if you want to change the colors of the elements inside the svg, you need to use the <svg> representation; In that scenario, color changes could be done inline, or with a css selector. e.g.: <img src="https://s.cdpn.io/3/kiwi.svg"/> versus <svg version="1.1" ...> <ellipse fill="#C6C6C6" cx="283.5" cy="487.5" rx="259" ry="80"/> <path id="bird" d="..."></path> </svg>
    – couzzi
    Apr 10, 2021 at 1:05
  • 1
    I found the solution, you have to use the "filter" property in css: HTML: <img class="menu" src="./Icon/menu.svg" /> CSS: filter: invert(28%) sepia(8%) saturate(0%) hue-rotate(222deg) brightness(84%) contrast(93%);
    – Fitspade
    Apr 13, 2021 at 15:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.