Salesforce Component SVG File in 4 Steps

You just need 4 tools to create an SVG for a Component

  1. Power Point

    Create a drawing that will be your Component SVG icon.

    For instance, I made the one below for my KPI Integer Component.

    KPI Integer Component PPT drawing

     
  2. MS Paint

    Copy the drawing you did in the PPT file and paste it in MS Paint. Click outside the pasted image and change the size to 80 pixels (square). Save it.

    Changing size in MS Paint

  3. Convertio

    Go to Converio and follow the steps to load and convert the file in an SVG. Download the file.
  4.  Open it in a Text Editor

    Use a text editor to open the SVG file already downloaded. Copy the content and paste it in the Component SVG file.

You end up with ...

Component SVG

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="80.000000pt" height="79.000000pt" viewBox="0 0 80.000000 79.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,79.000000) scale(0.100000,-0.100000)"
fill="#2e75b6" stroke="none">
<path d="M93 779 c-43 -13 -80 -60 -88 -112 -4 -23 -5 -161 -3 -307 4 -381
-25 -355 398 -355 427 0 395 -32 395 390 0 420 30 389 -380 392 -159 1 -304
-2 -322 -8z m627 -49 c40 -40 10 -129 -44 -130 -32 -1 -100 -105 -98 -147 6
-88 -130 -115 -152 -30 -8 33 -95 86 -130 80 -38 -8 -84 -78 -84 -127 0 -51
-29 -80 -78 -80 -45 0 -74 31 -74 79 0 36 37 75 70 75 27 0 74 79 71 118 -7
88 118 116 147 33 15 -43 93 -90 135 -82 41 9 111 103 104 141 -6 27 15 75 35
83 31 13 79 6 98 -13z m-240 -555 l0 -145 -45 0 -45 0 0 90 0 91 -30 -16 c-41
-21 -50 -19 -50 15 0 24 7 33 38 49 20 11 43 29 50 40 8 15 22 21 47 21 l35 0
0 -145z"/>
</g>
</svg>

Wrap-Up

Enjoy! 😀

"Life is really simple, but we insist on making it complicated"
Confucius

Comments