This is to create an SVG from a PNG and set it to a dynamic colour (when it’s a one colour icon).
- Open the PNG in Inkscape
- Make sure document properties are set to px (you can open it using Shift+Ctrl+D)
- Select the image (using “edit, select all” or Ctrl+A)
- Edit, resize to selection – Shift+Ctrl+R
- Go to: Path → Trace Bitmap (or use Shift+Alt+B)
- Use:
Single scan
Brightness cutoff
Click Apply - Delete the original PNG underneath (Layers and Objects) – Shift+Ctrl+L
- Save as Plain SVG
- Close document – Ctrl+W
- Open the new SVG in Notepad or Notepad++
- Remove any style element for colour
- Add fill colour with currentColor:
In the <svg section, under version, add:
fill=”currentColor” - Save SVG
Here’s an example of an SVG file:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="674"
height="674"
viewBox="0 0 178.45983 178.43334"
version="1.1"
fill="currentColor"
id="svg1"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><defs
id="defs1" /><g
id="layer1"
transform="translate(-15.804511,-59.204901)"><path
d="M 100.29825,237.58266 C 86.325321,236.75385 73.451697,233.05305 61.653367,226.47335 50.803119,220.42237 41.121583,211.95042 33.569566,201.89825 19.896924,183.69918 13.782031,160.99179 16.395334,138.12249 17.989564,124.17121 22.867249,110.81416 30.625264,99.155254 35.403262,91.974779 41.309645,85.391814 47.936027,79.861527 58.952186,70.667592 71.80771,64.353083 85.777916,61.273954 96.731821,58.859639 108.53263,58.55078 119.68691,60.386463 c 11.95106,1.966809 23.27958,6.319926 33.528,12.883528 11.38295,7.290209 21.4873,17.698778 28.41639,29.271929 7.21562,12.05174 11.29604,24.92437 12.4394,39.243 0.18224,2.28223 0.25702,8.5774 0.13125,11.049 -0.82936,16.29806 -5.8917,31.70837 -14.78277,45.00033 -9.11765,13.63067 -21.96635,24.71962 -36.44893,31.45688 -10.02002,4.66129 -19.96426,7.25618 -31.32667,8.17451 -1.92415,0.15551 -9.39692,0.23259 -11.34533,0.11702 z m 9.398,-11.17897 c 20.06967,-1.14039 38.79205,-9.98231 52.59726,-24.83982 11.67182,-12.56149 18.80294,-28.33285 20.46398,-45.25862 0.4948,-5.04194 0.51036,-10.426 0.0443,-15.32466 -1.95483,-20.54563 -11.788,-39.15267 -27.76651,-52.541826 C 147.20969,81.881358 137.88594,76.796095 128.25937,73.834941 117.50152,70.525805 106.14371,69.564025 94.879583,71.008338 79.631343,72.963502 65.305556,79.436787 53.698785,89.616394 38.416868,103.01925 29.071076,121.32166 27.276049,141.36159 c -0.40673,4.54078 -0.406733,9.6168 -7e-6,14.18166 0.658164,7.38688 2.394342,14.74218 5.096204,21.59 6.966149,17.65559 20.472719,32.44894 37.488338,41.05987 12.273226,6.21099 25.834559,9.00613 39.835666,8.21057 z m -6.05367,-26.03957 c -8.563624,-0.35184 -16.205383,-2.81903 -23.18856,-7.48659 -7.897158,-5.27847 -13.930639,-13.02363 -17.110535,-21.96475 -1.603398,-4.50838 -2.49095,-9.44003 -2.522261,-14.01486 -0.01096,-1.60144 0.0032,-1.7815 0.182928,-2.32834 0.62592,-1.90425 1.91116,-3.2307 3.697636,-3.81619 0.658666,-0.21586 0.881633,-0.24777 1.729796,-0.24757 1.121071,2.8e-4 1.86246,0.18519 2.794,0.69686 0.802439,0.44077 1.825859,1.50475 2.220546,2.30857 0.494275,1.00664 0.580089,1.45361 0.658327,3.429 0.08073,2.03828 0.181244,3.05867 0.469939,4.77061 0.863445,5.12017 3.000939,10.04176 6.193517,14.26058 0.912632,1.206 1.572859,1.96301 2.809843,3.22174 5.454315,5.5502 12.300344,8.8591 20.117494,9.7234 1.54045,0.17032 5.62332,0.14425 7.112,-0.0454 2.58999,-0.32998 4.66518,-0.80079 6.90033,-1.56554 10.61151,-3.63066 18.7264,-12.51438 21.37991,-23.4055 0.54826,-2.25031 0.79665,-4.18089 0.95535,-7.42555 0.0656,-1.34205 0.10784,-1.65525 0.29468,-2.18733 0.69668,-1.98392 2.34954,-3.38563 4.41577,-3.74481 1.207,-0.20981 2.73708,0.0861 3.84483,0.7435 0.80751,0.47925 1.70674,1.46692 2.11601,2.32413 0.6105,1.27871 0.71478,2.33957 0.51876,5.27751 -0.57992,8.6917 -3.61911,16.92465 -8.76502,23.74384 -1.42978,1.8947 -2.18161,2.7505 -4.13953,4.71198 -1.849,1.85236 -2.9715,2.84336 -4.71563,4.1632 -6.59969,4.99417 -14.77895,8.08658 -23.10179,8.73431 -1.23369,0.096 -3.89242,0.1633 -4.86834,0.12321 z M 79.334161,131.32603 c -1.801428,-0.32178 -3.516434,-1.25599 -4.796229,-2.61265 -1.003472,-1.06373 -1.60594,-2.11843 -2.065677,-3.61623 -0.213238,-0.69472 -0.23168,-0.86927 -0.236153,-2.23523 -0.0053,-1.62726 0.07456,-2.08991 0.570151,-3.302 0.41687,-1.01955 0.89707,-1.75274 1.703218,-2.60054 1.185607,-1.24687 2.381857,-1.95017 4.097342,-2.40894 0.923349,-0.24692 2.753594,-0.30478 3.813757,-0.12056 3.665672,0.63698 6.348656,3.4209 6.923478,7.18393 0.210774,1.37983 0.05616,2.7676 -0.468503,4.20522 -0.965872,2.64655 -3.101059,4.57317 -5.933962,5.35431 -0.719674,0.19844 -2.847163,0.28849 -3.607422,0.15269 z m 48.513999,0 c -1.80143,-0.32178 -3.51643,-1.25599 -4.79623,-2.61265 -1.0032,-1.06344 -1.62049,-2.14158 -2.06563,-3.60779 -0.21296,-0.70145 -0.23173,-0.87976 -0.2362,-2.24367 -0.005,-1.62726 0.0746,-2.08991 0.57015,-3.302 0.41687,-1.01955 0.89707,-1.75274 1.70322,-2.60054 1.18561,-1.24687 2.38186,-1.95017 4.09734,-2.40894 0.92335,-0.24692 2.75359,-0.30478 3.81376,-0.12056 2.11633,0.36775 4.01305,1.51002 5.28206,3.18104 0.51674,0.68044 1.18624,2.03829 1.41145,2.86268 0.28505,1.04338 0.38531,2.17551 0.27702,3.12789 -0.42478,3.73557 -2.84614,6.58016 -6.44429,7.57069 -0.725,0.19959 -2.84998,0.29008 -3.61265,0.15385 z"
id="path1" /></g></svg>