Apex Code Development You need to sign in to do that
Don't have an account?
Accessing SVG icons from VF page running in Salesforce1
We are hoping to update our upcoming release of GreatVines functionalities for Salesforce1 along with the new SLDS styles. I ran into one issue last night when trying to leverage the SVG "sprite" icons within a Visualforce page. From javascript we output the following code as directed in the link above:
This attempts to render the button with an inside icon however we get the following error:
Account_Photo_SF1?id=001G000001mAP70IAG&sfdcIFrameOrigin=https%3A%2F%2Fna11.lightning.force.com&isd…:1 Unsafe attempt to load URL https://na11.salesforce.com/assets/icons/utility-sprite/svg/symbols.svg#camera from frame with URL https://c.na11.visual.force.com/apex/Account_Photo_SF1?id=001G000001mAP70IA…eOrigin=https%3A%2F%2Fna11.lightning.force.com&isdtp=p1&sfdcIFrameHost=web. Domains, protocols and ports must match.
I have attempted to change the URL to the SVG file to na11.visual.force.com, c.na11.visualforce.com, na11.lightning.force.com but none of them work. I have also added *.visual.force.com and *.lightning.force.com to the CORS whitelist but still no change?
var svg = '<svg aria-hidden="true" class="slds-button__icon slds-button__icon--left"><use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#camera"></use></svg>';
photoButton.setAttribute('class', 'btn btn-default slds-button slds-button--neutral');
photoButton.innerHTML = (mobile ? '{!$Label.Take_A_Photo} / ' : '') + '{!$Label.Choose_Existing}';
photoButton.insertAdjacentHTML('afterbegin', svg);
This attempts to render the button with an inside icon however we get the following error:
Account_Photo_SF1?id=001G000001mAP70IAG&sfdcIFrameOrigin=https%3A%2F%2Fna11.lightning.force.com&isd…:1 Unsafe attempt to load URL https://na11.salesforce.com/assets/icons/utility-sprite/svg/symbols.svg#camera from frame with URL https://c.na11.visual.force.com/apex/Account_Photo_SF1?id=001G000001mAP70IA…eOrigin=https%3A%2F%2Fna11.lightning.force.com&isdtp=p1&sfdcIFrameHost=web. Domains, protocols and ports must match.
I have attempted to change the URL to the SVG file to na11.visual.force.com, c.na11.visualforce.com, na11.lightning.force.com but none of them work. I have also added *.visual.force.com and *.lightning.force.com to the CORS whitelist but still no change?
{!URLFOR($Resource.SLDS080, '/assets/icons/utility-sprite/svg/symbols.svg#camera')}