How to use SVG in Salesforce Lightning Component ?

SVG stands for Scalable Vector Graphics. It is a custom icon resource for components used in Lightning App Builder or Community Builder.

Prerequisites : basic understanding of Lightning Component. and SVG [ You can learn more about SVG at  https://www.w3schools.com/graphics/svg_intro.asp ]

In Lightning Components, The default SVG looks like and if we want to customize this icon to some other icon, we need to create a SVG for our lightning component.

Default SVG looks like below:

What is the use of SVG in Component?  Where we can see it in the Lightning Application ?

SVG icons is used in Salesforce Lightning App Builder or Community Builder.

Navigation:

Go to Home > Settings > Edit Page

Check the highlighted section (Custom components) in below screenshot

 

Steps to follow to customize this SVG icon/logo:

Step 1:

• Go to Lightning Component and it must be implemented with flexipage:availableForAllPageTypes.

Note: If you haven’t created any lightning component yet, create a component (SVGExample) and add below code.

SVGExample.cmp

 

<aura:component implements="flexipage:availableForAllPageTypes">
   <p>SVG Example</p>
</aura:component>

Step 2:

• Create a SVG from the component bundle. You just have to click on the SVG in Component bundle it automatically creates a section for you.

Remove existing code and add below code in SVG then Save your lightning component.

Here we are adding the polygon/star as an icon for this component.

[ W3 Schools to apply SVG ( https://www.w3schools.com/graphics/svg_polygon.asp )  See Example 3. ]

SVGExample.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg height="450" width="450" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <polygon points="200,20 80,396 380,156 20,156 320,396"
   style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>

Step 3:

Now Go to Home > Settings > Edit Page

Check the component which we created in earlier step and verify the icon.

 

That’s it my friend.  Happy Coding.

Resources:

• Learn SVG
• W3 Schools to apply SVG ( https://www.w3schools.com/graphics/svg_polygon.asp ) Example 3.

Like our facebook page for new post updates.? & Don’t forget to bookmark this site for your future reference. ?

if you have any suggestions or issue with it, you can post in comment box 🙂

About The contributor: 

• Brahmaji Tammana

  10 Post Contribute