How do you create an svg that can be colored and resized like the SVG's that came with a websit-CodePudding

I downloaded a website theme that came with svgs of some brands such as discord, coinbase, Facebook, etc. I wanted to use my own svgs of brands that I work with, but the svgs I am using do not behave like the ones that came with the theme. I can see they're different, but I am not sure exactly how and what I would need to do to my own svgs to make them behave like the ones I downloaded with the theme. I'll attach a couple from the theme and one that is my own.

Theme SVG

<svg viewBox="0 0 2761 991" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g id="discord" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="discord-logo-color-wordmark-1" transform="translate(166.411797, 163.000000)" fill="currentColor" fill-rule="nonzero">
      <path d="M354.349187,278.457552 C335.215619,278.457552 320.110171,294.939371 320.110171,315.457552 C320.110171,335.975734 335.551296,352.457552 354.349187,352.457552 C373.482755,352.457552 388.588203,335.975734 388.588203,315.457552 C388.588203,294.939371 373.147078,278.457552 354.349187,278.457552 Z M231.827219,278.457552 C212.693651,278.457552 197.588203,294.939371 197.588203,315.457552 C197.588203,335.975734 213.029328,352.457552 231.827219,352.457552 C250.960786,352.457552 266.066235,335.975734 266.066235,315.457552 C266.401911,294.939371 250.960786,278.457552 231.827219,278.457552 Z" id="Shape"></path>
      <path d="M517.788451,0.45755237 L69.2134785,0.45755237 C31.3858875,0.45755237 0.588202867,31.2634021 0.588202867,69.1010219 L0.588202867,517.79492 C0.588202867,555.63254 31.3858875,586.438389 69.2134785,586.438389 L448.828418,586.438389 L431.086273,525.161536 L473.935226,564.673387 L514.440877,601.841314 L586.748484,664.457552 L586.748484,69.1010219 C586.413727,31.2634021 555.616042,0.45755237 517.788451,0.45755237 Z M388.572078,434.083372 C388.572078,434.083372 376.52081,419.684986 366.478087,407.295676 C410.331312,394.906367 427.069184,367.783826 427.069184,367.783826 C413.344129,376.824673 400.288589,383.186751 388.572078,387.539751 C371.834206,394.571521 355.765849,398.924522 340.032249,401.938137 C307.895535,407.965369 278.43688,406.291138 253.330072,401.603291 C234.248897,397.919983 217.845783,392.89729 204.120728,387.204905 C196.421307,384.191289 188.05237,380.507981 179.683434,375.820134 C178.679162,375.150442 177.67489,374.815596 176.670617,374.145903 C176.001103,373.811057 175.666345,373.476211 175.331588,373.476211 C169.305954,370.127749 165.958379,367.783826 165.958379,367.783826 C165.958379,367.783826 182.026736,394.236675 224.540932,406.96083 C214.498208,419.684986 202.112183,434.418218 202.112183,434.418218 C128.130788,432.074295 100.011163,383.856443 100.011163,383.856443 C100.011163,277.040507 148.216235,190.315344 148.216235,190.315344 C196.421307,154.486801 241.948319,155.49134 241.948319,155.49134 L245.295893,159.509494 C185.039553,176.58665 157.589443,203.039499 157.589443,203.039499 C157.589443,203.039499 164.954107,199.021345 177.340132,193.663806 C213.159179,177.926034 241.613561,173.90788 253.330072,172.568495 C255.338616,172.233649 257.012404,171.898803 259.020948,171.898803 C279.441152,169.220033 302.539416,168.550341 326.641951,171.229111 C358.443908,174.912419 392.589168,184.288112 427.403942,203.039499 C427.403942,203.039499 400.958104,177.926034 344.049338,160.848879 L348.735943,155.49134 C348.735943,155.49134 394.597712,154.486801 442.468026,190.315344 C442.468026,190.315344 490.673098,277.040507 490.673098,383.856443 C490.673098,383.521597 462.553473,431.739448 388.572078,434.083372 L388.572078,434.083372 Z M894.055816,172.771723 L782.916345,172.771723 L782.916345,297.669353 L856.89774,364.303745 L856.89774,243.089423 L896.399118,243.089423 C921.505926,243.089423 933.891951,255.143886 933.891951,274.564965 L933.891951,367.317361 C933.891951,386.73844 922.175441,399.797441 896.399118,399.797441 L782.581588,399.797441 L782.581588,470.452777 L893.721058,470.449988 C953.307883,470.784834 1009.21238,440.983523 1009.21238,372.6749 L1009.21238,272.890734 C1009.54713,203.242726 953.642641,172.771723 894.055816,172.771723 L894.055816,172.771723 Z M1476.53377,372.6749 L1476.53377,270.211965 C1476.53377,233.378884 1542.81574,225.007729 1562.90119,261.84081 L1624.1618,237.062192 C1600.05926,184.156493 1556.20604,168.753569 1519.71748,168.753569 C1460.13065,168.753569 1401.21334,203.242726 1401.21334,270.211965 L1401.21334,372.6749 C1401.21334,440.313831 1460.13065,474.133296 1518.37845,474.133296 C1555.87128,474.133296 1600.72878,455.716756 1625.50083,407.498904 L1559.88837,377.362747 C1543.82001,418.548828 1476.53377,408.503442 1476.53377,372.6749 Z M1274.00551,284.275505 C1250.90725,279.252812 1235.50841,270.881657 1234.50413,256.483271 C1235.84316,221.994113 1289.0696,220.654728 1320.20204,253.804501 L1369.41138,215.966882 C1338.6137,178.464108 1303.79893,168.418722 1267.97988,168.418722 C1213.41442,168.418722 1160.52274,199.224572 1160.52274,257.48781 C1160.52274,314.076816 1204.04121,344.54782 1251.91152,351.914436 C1276.34881,355.262898 1303.46417,364.973437 1302.79465,381.715747 C1300.78611,413.526135 1235.17365,411.851904 1205.38024,375.688516 L1157.84468,420.223059 C1185.62955,456.051602 1223.45714,474.133296 1258.94143,474.133296 C1313.50689,474.133296 1374.09799,442.657754 1376.44129,385.064209 C1379.78886,312.402585 1326.89719,293.986045 1274.00551,284.275505 Z M1049.71803,470.115142 L1124.70369,470.115142 L1124.70369,172.771723 L1049.71803,172.771723 L1049.71803,470.115142 Z M2314.09689,172.771723 L2202.95741,172.771723 L2202.95741,297.669353 L2276.93881,364.303745 L2276.93881,243.089423 L2316.44019,243.089423 C2341.547,243.089423 2353.93302,255.143886 2353.93302,274.564965 L2353.93302,367.317361 C2353.93302,386.73844 2342.21651,399.797441 2316.44019,399.797441 L2202.62266,399.797441 L2202.62266,470.452777 L2314.09689,470.449988 C2373.68371,470.784834 2429.5882,440.983523 2429.5882,372.6749 L2429.5882,272.890734 C2429.5882,203.242726 2373.68371,172.771723 2314.09689,172.771723 L2314.09689,172.771723 Z M1768.77701,168.753569 C1707.18164,168.753569 1645.92103,202.238188 1645.92103,270.881657 L1645.92103,372.340054 C1645.92103,440.313831 1707.5164,474.468142 1769.44653,474.468142 C1831.0419,474.468142 1892.30251,440.313831 1892.30251,372.340054 L1892.30251,270.881657 C1892.30251,202.573034 1830.37238,168.753569 1768.77701,168.753569 Z M1816.98208,372.340054 C1816.98208,393.77021 1792.87955,404.820134 1769.11177,404.820134 C1745.00923,404.820134 1720.9067,394.439902 1720.9067,372.340054 L1720.9067,270.881657 C1720.9067,249.116655 1744.33972,237.397038 1767.77274,237.397038 C1792.21003,237.397038 1816.98208,247.77727 1816.98208,270.881657 L1816.98208,372.340054 Z M2161.44749,270.881657 C2159.7737,201.233649 2112.23815,173.106569 2050.97754,173.106569 L1932.13864,173.106569 L1932.13864,470.449988 L2008.12858,470.449988 L2008.12858,376.023362 L2021.51888,376.023362 L2090.47891,470.449988 L2184.211,470.449988 L2103.1997,368.321899 C2139.01874,356.937129 2161.44749,325.796433 2161.44749,270.881657 Z M2052.31657,311.0632 L2008.12858,311.0632 L2008.12858,243.089423 L2052.31657,243.089423 C2099.51736,243.089423 2099.51736,311.0632 2052.31657,311.0632 Z" id="Shape"></path>
    </g>
  </g>
</svg>

Another Theme SVG

<svg viewBox="0 0 2761 991" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g id="dribbble" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g transform="translate(275.000000, 226.000000)" fill="currentColor" fill-rule="nonzero" id="Shape">
      <path d="M676.211313,216.865556 C701.505429,216.865556 722.00834,196.386203 722.00834,171.127473 C722.00834,145.864434 701.505429,125.389391 676.211313,125.389391 C650.917196,125.389391 630.414286,145.864434 630.414286,171.127473 C630.414286,196.386203 650.917196,216.865556 676.211313,216.865556 Z M2187.64269,373.136978 C2180.67601,368.24555 2175.29778,367.43534 2170.83462,376.93376 C2093.91633,543.268163 1964.29477,460.264727 1977.1706,467.569547 C2005.92216,454.43811 2081.54121,393.887837 2070.11137,310.281053 C2063.1706,259.186103 2019.24689,236.521769 1972.62543,244.636799 C1891.24398,258.802546 1861.30542,346.443142 1876.54663,424.033685 C1879.21417,437.359054 1883.97948,448.348606 1888.74047,459.114057 C1796.77521,533.782672 1760.25413,392.271726 1756.11038,375.360746 C1755.94636,374.455724 1827.11951,315.224196 1846.91453,174.079569 C1867.66348,26.1515864 1820.39888,-0.78358876 1772.06812,0.0567887056 C1682.63227,1.61256442 1658.46473,188.180671 1690.93271,343.672051 C1688.21338,344.37883 1675.55769,351.377666 1655.22311,352.162018 C1640.59051,306.191216 1578.06743,265.896194 1561.70395,281.423783 C1520.74992,320.266461 1571.63599,396.206416 1607.44054,402.162322 C1585.93191,534.429116 1451.41987,501.671634 1476.45932,335.962126 C1520.26217,254.747186 1553.57616,133.987099 1547.63248,61.0854312 C1545.52607,35.275069 1526.41304,0.694613654 1483.18859,2.40984561 C1400.05037,5.69378217 1391.01182,192.313605 1400.75826,324.765713 C1400.27482,321.503324 1395.64764,340.857864 1361.57828,350.481263 C1353.51955,305.820588 1281.49607,260.991837 1264.54124,282.544287 C1232.80274,322.882405 1287.80665,394.805787 1313.86045,399.822194 C1292.35182,532.084679 1157.8441,499.327196 1182.88355,333.617689 C1226.68639,252.407058 1259.99607,131.646971 1254.05238,58.7453032 C1251.94598,32.9306313 1232.83727,-1.64982399 1189.6085,0.0610983336 C1106.47028,3.34934452 1097.43173,189.969167 1107.17817,322.421275 C1106.69041,319.107171 1101.95532,339.099535 1066.49608,348.563479 C1065.30907,290.62053 993.022281,264.051673 975.657395,282.539977 C944.708792,315.495703 982.744927,383.113766 1017.93224,399.822194 C996.423606,532.084679 861.915882,499.327196 886.955331,333.617689 C930.75818,252.407058 964.072172,131.646971 958.124169,58.7453032 C956.022082,32.9306313 936.909053,-1.64982399 893.680286,0.0610983336 C810.54638,3.34934452 803.855957,199.351227 813.602393,331.799026 C786.219138,448.939025 694.387682,595.225039 706.318218,302.183262 C707.496596,281.626336 708.782883,273.8216 698.518479,266.124604 C690.826651,260.14284 673.336589,263.021672 663.775758,263.258701 C652.156004,263.724141 649.242432,270.511805 646.674173,280.77303 C640.69164,307.268623 639.616856,332.954006 638.762208,367.999901 C638.201076,384.393726 636.884573,392.043316 630.561044,414.397356 C624.246148,436.747087 588.217139,477.598051 568.491181,470.767291 C541.125192,461.372302 550.103308,384.238579 555.231194,331.243084 C559.504432,289.362118 545.821437,270.554902 510.763619,263.715522 C490.239127,259.444681 477.769041,260.099744 456.394218,253.372415 C436.180506,247.011404 431.609437,208.836719 388.497212,221.558741 C364.916707,228.523099 380.075911,278.407044 374.408475,315.379343 C346.5461,497.249955 288.572502,502.244814 261.677001,413.897439 C382.808194,117.692395 296.717553,0.918714311 246.323558,0.918714311 C193.836108,0.918714311 133.838119,37.0161587 159.244462,267.977744 C146.890919,264.379205 143.092485,262.439872 129.569197,262.439872 C53.0868673,262.439872 0.979260689,324.170984 0.979260689,400.322111 C0.979260689,476.473238 53.0911837,538.20866 129.573513,538.20866 C174.72308,538.20866 206.422737,517.707759 230.430566,485.993207 C246.094789,508.390344 265.16897,538.55343 300.049816,537.195897 C404.018994,533.153466 434.255391,320.219055 437.825056,308.34172 C448.939791,310.052642 459.454547,313.289173 469.718951,315.000095 C486.820536,317.564324 488.06366,324.321821 487.675184,341.495689 C483.142962,486.316429 509.908971,537.023512 570.623484,537.023512 C604.451127,537.023512 634.601196,503.839376 655.371723,480.110565 C670.884873,512.079385 695.604908,536.045227 728.767825,537.019203 C809.126284,539.01456 839.893598,411.134968 837.087937,427.964065 C834.886572,441.168766 863.159006,536.299495 945.887169,536.644265 C1048.36287,537.075228 1067.41116,424.559459 1069.68158,405.713456 C1069.96647,401.964079 1070.09164,402.351946 1069.68158,405.713456 L1069.60389,406.855507 C1102.13661,400.813409 1118.9231,383.398202 1118.9231,383.398202 C1118.9231,383.398202 1145.04596,538.393974 1241.81107,536.648575 C1342.29691,534.829912 1361.24591,433.12269 1363.73216,413.289782 C1364.06021,408.583668 1364.25445,409.135301 1363.73216,413.289782 C1363.71857,413.483672 1363.70562,413.677606 1363.69331,413.871582 C1402.33806,399.835123 1412.50319,385.746949 1412.50319,385.746949 C1412.50319,385.746949 1433.26508,537.661337 1535.39116,538.988703 C1626.39818,540.17816 1660.12655,447.128981 1660.3251,408.182873 C1675.67423,408.346639 1704.06752,399.089558 1703.4028,398.563783 C1703.4028,398.563783 1736.73837,531.386519 1829.83021,538.20866 C1873.5381,541.410714 1906.32549,513.652399 1925.01551,500.990712 C1968.93922,536.506357 2115.20051,581.869502 2207.55425,425.537745 C2220.58978,403.101821 2192.56338,376.597609 2187.64269,373.136978 Z M125.882989,486.639651 C81.2600241,486.639651 52.6465943,445.443917 52.6465943,401.024581 C52.6465943,356.609554 78.9119013,315.41382 123.534867,315.41382 C143.614769,315.41382 154.785618,317.620349 170.423943,331.199987 C173.259819,342.357614 181.29696,368.094713 185.20762,379.782424 C190.447733,395.422064 196.680617,408.734505 202.965299,423.223475 C193.987182,460.385397 164.553636,486.639651 125.882989,486.639651 Z M234.621792,332.505805 C232.765739,329.553709 233.154215,331.368063 231.078026,328.579733 C222.898444,306.363601 207.134943,256.777021 205.309105,200.454492 C203.245865,136.740951 213.88148,62.0594072 245.235825,62.0594072 C266.481156,62.0594072 289.060256,213.413544 234.617476,332.505805 L234.621792,332.505805 Z M862.921604,266.120294 C857.888679,228.311928 857.625378,59.7623754 898.152078,64.4038448 C920.528307,73.4540637 883.964064,232.500886 862.921604,266.120294 Z M1158.84982,266.120294 C1153.81689,228.311928 1153.55359,59.7623754 1194.08029,64.4038448 C1216.45652,73.4540637 1179.89228,232.500886 1158.84982,266.120294 Z M1452.42991,268.469042 C1447.39267,230.656365 1447.13368,62.1068131 1487.65607,66.7482825 C1510.0323,75.7985013 1473.46805,234.849633 1452.42991,268.469042 Z M1776.53991,54.5391063 C1813.59191,50.7035373 1812.0639,212.254254 1737.69229,314.245911 C1728.10125,277.381352 1713.39527,67.1964838 1776.53991,54.5347966 L1776.53991,54.5391063 Z M1932.2757,402.162322 C1920.37538,342.142133 1951.12543,302.721965 1982.82509,298.399408 C1993.90529,296.632461 2009.96231,303.799372 2013.16508,317.198006 C2018.43109,342.448116 2012.40108,379.903094 1941.45237,427.425362 C1941.55597,427.830467 1934.93029,415.530788 1932.28002,402.162322 L1932.2757,402.162322 Z"></path>
    </g>
  </g>
</svg>

My SVG

<svg width="3284" height="1024" viewBox="0 0 3284 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0V1004.31H220.803V571.077H627.25V1004.31H848.054V0H627.25V385.407H220.803V0H0Z" fill="#303030"/>
<path d="M1510.76 562.637H1185.88C1186.82 548.571 1189.63 532.63 1194.32 514.813C1199.95 496.996 1208.86 480.117 1221.04 464.176C1234.17 448.234 1251.05 435.106 1271.67 424.791C1293.24 413.538 1319.96 407.912 1351.84 407.912C1400.59 407.912 1436.69 421.04 1460.13 447.297C1484.51 473.553 1501.38 512 1510.76 562.637ZM1185.88 689.231H1710.47C1714.22 632.967 1709.53 579.048 1696.4 527.473C1683.28 475.897 1661.71 429.949 1631.71 389.626C1602.64 349.304 1565.14 317.421 1519.2 293.978C1473.26 269.597 1419.35 257.407 1357.46 257.407C1302.15 257.407 1251.52 267.253 1205.57 286.945C1160.57 306.637 1121.66 333.832 1088.84 368.527C1056.03 402.286 1030.71 442.608 1012.9 489.494C995.084 536.381 986.177 587.018 986.177 641.407C986.177 697.67 994.615 749.245 1011.49 796.132C1029.31 843.018 1054.15 883.341 1086.03 917.099C1117.91 950.857 1156.82 977.114 1202.76 995.868C1248.7 1013.68 1300.27 1022.59 1357.46 1022.59C1439.97 1022.59 1510.29 1003.84 1568.42 966.33C1626.55 928.821 1669.68 866.462 1697.81 779.253H1522.01C1515.45 801.758 1497.63 823.326 1468.57 843.956C1439.5 863.648 1404.81 873.495 1364.5 873.495C1308.24 873.495 1265.11 858.96 1235.11 829.89C1205.1 800.821 1188.7 753.934 1185.88 689.231Z" fill="#303030"/>
<path d="M1834.54 0V1004.31H2034.25V0H1834.54Z" fill="#303030"/>
<path d="M2197.12 0V1004.31H2396.83V0H2197.12Z" fill="#303030"/>
<path d="M2531.58 641.407C2531.58 583.267 2540.49 530.755 2558.3 483.868C2576.12 436.044 2601.43 395.722 2634.25 362.901C2667.06 329.143 2706.44 303.355 2752.38 285.538C2798.33 266.784 2849.89 257.407 2907.09 257.407C2964.28 257.407 3015.85 266.784 3061.79 285.538C3108.67 303.355 3148.52 329.143 3181.33 362.901C3214.15 395.722 3239.46 436.044 3257.28 483.868C3275.09 530.755 3284 583.267 3284 641.407C3284 699.546 3275.09 752.059 3257.28 798.945C3239.46 845.831 3214.15 886.154 3181.33 919.912C3148.52 952.733 3108.67 978.52 3061.79 997.275C3015.85 1015.09 2964.28 1024 2907.09 1024C2849.89 1024 2798.33 1015.09 2752.38 997.275C2706.44 978.52 2667.06 952.733 2634.25 919.912C2601.43 886.154 2576.12 845.831 2558.3 798.945C2540.49 752.059 2531.58 699.546 2531.58 641.407ZM2731.29 641.407C2731.29 670.476 2734.1 699.077 2739.73 727.209C2745.35 754.403 2754.73 779.253 2767.85 801.758C2781.92 823.326 2800.2 840.674 2822.7 853.802C2845.21 866.93 2873.33 873.495 2907.09 873.495C2940.84 873.495 2968.97 866.93 2991.47 853.802C3014.91 840.674 3033.19 823.326 3046.32 801.758C3060.38 779.253 3070.23 754.403 3075.85 727.209C3081.48 699.077 3084.29 670.476 3084.29 641.407C3084.29 612.337 3081.48 583.736 3075.85 555.604C3070.23 527.473 3060.38 502.623 3046.32 481.055C3033.19 459.487 3014.91 442.139 2991.47 429.011C2968.97 414.945 2940.84 407.912 2907.09 407.912C2873.33 407.912 2845.21 414.945 2822.7 429.011C2800.2 442.139 2781.92 459.487 2767.85 481.055C2754.73 502.623 2745.35 527.473 2739.73 555.604C2734.1 583.736 2731.29 612.337 2731.29 641.407ZM2660.97 28.1319H3157.42V133.626H2660.97V28.1319Z" fill="#303030"/>
</svg>

Here is what the theme svgs look like vs mine on the page and not code

the svg doesn't follow the bootstrap coloring or sizing in the html code, but the theme svgs do. They also look different and all uniform in my finder preview

I do not know a lot about SVGs and what I would need to do to create svgs that are like the theme svgs. I get the svgs from the company I work with or convert it from png to svg. I've tried changing my svgs code to match that of the theme's svgs with no luck as I'm mostly guessing. How do I create svgs like the ones that came with my website theme?

CodePudding user response：

Unfortunately, your template svgs are rather bad examples:

avoid explicit fill (and other) attributes you need to style/override in your design
minify and concatenate path data strings defined by d property to reduce filesize
try to crop icons to their actual boundaries and avoid unnecessary transforms and grouping

A better source of inspiration are well crafted svgs used by commonly used icon libraries like fontAwesome (example: fontAwesome v6 sprite) or feathericons (v4.28.0). You won't see any icons, since these library svgs are using reusable <use> elements - check the source code to inspect the structure.

Example using reusable `<use>` element references setting colors via `fill`

svg{
  display:inline-block;
  height:5em;
  width:auto;
  border: 1px solid red;
  font-size:1em;
}

<p>
  <svg viewBox="0 0 3284 1024">
    <use href="#hello" fill="red" />
  </svg>
  <svg viewBox="0 0 2429 664">
    <use href="#discord" fill="purple" />
  </svg>
  <svg viewBox="0 0 3284 1024">
    <use href="#hello" fill="green" />
  </svg>
  <svg viewBox="0 0 2212 540">
    <use href="#dribble" fill="orange" />
  </svg>
</p>

<svg xmlns="http://www.w3.org/2000/svg" style="position:absolute; width:0; height:0; visibility:hidden;">
  <symbol id="hello" viewBox="0 0 3284 1024">
    <path d="m 0 0 v 1004 h 221 v -433 h 406 v 433 h 221 v -1004 h -221 v 385 h -406 v -385 h -221 z m 1511 563 h -325 c 1 -14 4 -30 8 -48 c 6 -18 15 -35 27 -51 c 13 -16 30 -29 51 -39 c 22 -11 48 -17 80 -17 c 49 0 85 13 108 39 c 24 26 41 65 51 115 z m -325 127 h 525 c 4 -56 -1 -110 -14 -162 c -13 -52 -35 -98 -65 -138 c -29 -40 -67 -72 -113 -96 c -46 -24 -100 -37 -162 -37 c -55 0 -106 10 -152 30 c -45 20 -84 47 -117 82 c -33 34 -58 74 -76 121 c -18 47 -27 98 -27 152 c 0 56 8 108 25 155 c 18 47 43 87 75 121 c 32 34 71 60 117 79 c 46 18 98 27 155 27 c 83 0 153 -19 211 -56 c 58 -38 101 -100 129 -187 h -176 c -7 23 -24 44 -53 65 c -29 20 -64 30 -104 30 c -56 0 -99 -15 -129 -44 c -30 -29 -46 -76 -49 -141 z m 649 -689 v 1004 h 200 v -1004 h -200 z m 363 0 v 1004 h 200 v -1004 h -200 z m 334 641 c 0 -58 9 -111 27 -158 c 18 -48 43 -88 76 -121 c 33 -34 72 -60 118 -77 c 46 -19 98 -28 155 -28 c 57 0 109 9 155 28 c 47 18 87 44 120 77 c 33 33 58 73 76 121 c 18 47 27 99 27 158 c 0 58 -9 111 -27 158 c -18 47 -43 87 -76 121 c -33 33 -73 59 -120 77 c -46 18 -98 27 -155 27 c -57 0 -109 -9 -155 -27 c -46 -19 -85 -45 -118 -77 c -33 -34 -58 -74 -76 -121 c -18 -47 -27 -99 -27 -158 z m 200 0 c 0 29 3 58 8 86 c 6 27 15 52 28 75 c 14 22 32 39 55 52 c 23 13 51 20 84 20 c 34 0 62 -7 84 -20 c 23 -13 42 -30 55 -52 c 14 -23 24 -47 30 -75 c 6 -28 8 -57 8 -86 c 0 -29 -3 -58 -8 -86 c -6 -28 -15 -53 -30 -75 c -13 -22 -31 -39 -55 -52 c -23 -14 -51 -21 -84 -21 c -34 0 -62 7 -84 21 c -23 13 -41 30 -55 52 c -13 22 -23 46 -28 75 c -6 28 -8 57 -8 86 z m -70 -613 h 496 v 105 h -496 v -105 z" />
  </symbol>

  <symbol id="discord" viewBox="0 0 2429 664">
    <path d="m353 278c-19 0-34 17-34 37c0 21 16 37 34 37c19 0 35-16 35-37c0-20-16-37-35-37zm-122 0c-19 0-34 17-34 37c0 21 15 37 34 37c19 0 34-16 34-37c0-20-15-37-34-37zm286-278l-449 0c-38 0-68 31-68 69l0 449c0 38 30 68 68 68l380 0l-18-61l43 40l40 37l73 62l0-595c-1-38-31-69-69-69zm-129 434c0 0-12-14-23-27c44-12 61-39 61-39c-14 9-27 15-38 20c-17 7-33 11-49 14c-32 6-62 4-87 0c-19-4-35-9-49-15c-8-3-16-6-24-11c-1-1-2-1-3-2c-1 0-1-1-2-1c-6-3-9-5-9-5c0 0 16 26 59 39c-11 13-23 27-23 27c-74-2-102-50-102-50c0-107 48-194 48-194c48-36 94-35 94-35l3 5c-60 17-87 43-87 43c0 0 7-4 19-9c36-16 65-20 76-21c2-1 4-1 6-1c20-3 44-3 68-1c31 4 66 13 100 32c0 0-26-25-83-42l5-6c0 0 46-1 93 35c0 0 49 87 49 194c0 0-28 48-102 50l0 0zm505-261l-111 0l0 125l74 66l0-121l39 0c26 0 38 12 38 32l0 92c0 20-12 33-38 33l-113 0l0 70l111 0c59 1 115-29 115-97l0-100c1-70-55-100-115-100l0 0zm583 200l0-103c0-37 66-45 86-8l61-25c-24-53-68-68-104-68c-60 0-119 34-119 101l0 103c0 67 59 101 117 101c38 0 83-18 108-67l-66-30c-16 42-83 32-83-4zm-203-89c-23-5-38-13-39-28c1-34 54-35 85-2l49-38c-30-38-65-48-101-48c-55 0-107 31-107 89c0 57 43 88 91 95c24 3 51 13 51 30c-2 32-68 30-98-6l-47 44c28 36 65 54 101 54c55 0 115-31 117-89c4-73-49-91-102-101zm-224 186l75 0l0-297l-75 0l0 297zm1264-297l-111 0l0 125l74 66l0-121l39 0c26 0 38 12 38 32l0 92c0 20-12 33-38 33l-113 0l0 70l111 0c60 1 116-29 116-97l0-100c0-70-56-100-116-100l0 0zm-545-4c-62 0-123 33-123 102l0 101c0 68 62 102 123 102c62 0 123-34 123-102l0-101c0-68-62-102-123-102zm48 203c0 22-24 33-48 33c-24 0-48-11-48-33l0-101c0-22 23-34 47-34c24 0 49 11 49 34l0 101zm344-101c-1-70-49-98-110-98l-119 0l0 297l76 0l0-94l14 0l68 94l94 0l-81-102c36-11 58-42 58-97zm-109 40l-44 0l0-68l44 0c48 0 48 68 0 68z" />
  </symbol>

  <symbol id="dribble" viewBox="0 0 2212 540">
    <path d="m675 219.022c25 0 46-20 46-46c0-25-21-46-46-46c-25 0-46 20-46 46c0 25 21 46 46 46zm1511 156c-7-5-12-6-17 4c-77 166-207 83-194 91c29-13 104-74 93-157c-7-51-51-74-97-66c-81 14-111 102-96 179c3 13 7 24 12 35c-92 75-128-67-133-84c0-1 71-60 91-201c21-148-27-175-75-174c-89 2-114 188-81 344c-3 1-15 8-36 8c-15-46-77-86-94-71c-41 39 10 115 46 121c-22 132-156 100-131-66c44-81 77-202 71-275c-2-26-21-60-64-59c-83 3-92 190-82 322c0-3-5 16-39 26c-8-45-80-89-97-68c-32 40 23 112 49 117c-22 132-156 100-131-66c44-81 77-202 71-275c-2-26-21-60-64-59c-83 3-92 190-82 322c0-3-5 17-41 26c-1-58-73-85-91-66c-31 33 7 101 42 117c-22 132-156 100-131-66c44-81 77-202 71-275c-2-26-21-60-64-59c-83 3-90 199-80 332c-27 117-119 263-107-30c1-21 2-28-8-36c-8-6-25-3-35-3c-12 0-15 7-17 18c-6 26-7 52-8 87c-1 16-2 24-8 46c-6 22-42 63-62 56c-27-9-18-87-13-140c4-42-9-61-44-68c-21-4-33-4-54-10c-20-6-25-45-68-32c-24 7-8 57-14 94c-28 182-86 187-113 99c121-296 35-413-15-413c-52 0-112 36-87 267c-12-4-16-6-30-6c-76 0-129 62-129 138c0 76 52 138 129 138c45 0 77-21 101-52c16 22 35 53 70 51c104-4 134-217 138-229c11 2 22 5 32 7c17 3 18 9 18 26c-5 145 22 196 83 196c34 0 64-33 85-57c16 32 40 56 73 57c80 2 111-126 108-109c-2 13 26 108 109 109c102 0 122-112 124-131c0-4 0-3 0 0l0 1c33-6 49-23 49-23c0 0 26 155 123 153c100-2 119-104 122-123c0-5 1-4 0 0c0 0 0 0 0 1c39-14 49-28 49-28c0 0 21 152 123 153c91 1 125-92 125-131c15 0 44-9 43-10c0 0 33 133 126 140c44 3 76-25 95-37c44 36 190 81 283-75c13-22-15-49-20-52zm-2062 114c-45 0-73-41-73-86c0-44 26-86 71-86c20 0 31 2 47 16c3 11 11 37 15 49c5 16 11 29 18 43c-9 37-38 63-77 63zm109-154c-2-3-1-1-4-4c-8-22-24-72-26-128c-2-64 9-138 40-138c21 0 44 151-11 270l0 0zm628-66c-5-38-5-206 35-202c22 9-14 168-35 202zm296 0c-5-38-5-206 35-202c22 9-14 168-35 202zm294 2c-5-38-5-206 35-202c22 9-14 168-35 202zm324-214c37-4 36 158-39 260c-10-37-24-247 39-260l0 0zm156 348c-12-60 19-99 51-104c11-2 27 5 30 19c5 25-1 63-72 110c0 0-7-12-9-25l0 0z" />
  </symbol>

</svg>

Example using reusable `<use>` element references setting colors via `currentColor` (inherited from text color).

svg{
  display:inline-block;
  height:5em;
  width:auto;
  border: 1px solid red;
  font-size:1em;
}

<p >
  <svg viewBox="0 0 3284 1024" style="color:red">
    <use href="#hello" />
  </svg>
  <svg viewBox="0 0 2429 664" style="color:orange">
    <use href="#discord"  />
  </svg>
  <svg viewBox="0 0 3284 1024" style="color:green">
    <use href="#hello"  />
  </svg>
  <svg viewBox="0 0 2212 540" style="color:purple">
    <use href="#dribble"  />
  </svg>
</p>

<svg xmlns="http://www.w3.org/2000/svg" style="position:absolute; width:0; height:0; visibility:hidden;" >
  <symbol id="hello" viewBox="0 0 3284 1024" fill="currentColor">
    <path d="m 0 0 v 1004 h 221 v -433 h 406 v 433 h 221 v -1004 h -221 v 385 h -406 v -385 h -221 z m 1511 563 h -325 c 1 -14 4 -30 8 -48 c 6 -18 15 -35 27 -51 c 13 -16 30 -29 51 -39 c 22 -11 48 -17 80 -17 c 49 0 85 13 108 39 c 24 26 41 65 51 115 z m -325 127 h 525 c 4 -56 -1 -110 -14 -162 c -13 -52 -35 -98 -65 -138 c -29 -40 -67 -72 -113 -96 c -46 -24 -100 -37 -162 -37 c -55 0 -106 10 -152 30 c -45 20 -84 47 -117 82 c -33 34 -58 74 -76 121 c -18 47 -27 98 -27 152 c 0 56 8 108 25 155 c 18 47 43 87 75 121 c 32 34 71 60 117 79 c 46 18 98 27 155 27 c 83 0 153 -19 211 -56 c 58 -38 101 -100 129 -187 h -176 c -7 23 -24 44 -53 65 c -29 20 -64 30 -104 30 c -56 0 -99 -15 -129 -44 c -30 -29 -46 -76 -49 -141 z m 649 -689 v 1004 h 200 v -1004 h -200 z m 363 0 v 1004 h 200 v -1004 h -200 z m 334 641 c 0 -58 9 -111 27 -158 c 18 -48 43 -88 76 -121 c 33 -34 72 -60 118 -77 c 46 -19 98 -28 155 -28 c 57 0 109 9 155 28 c 47 18 87 44 120 77 c 33 33 58 73 76 121 c 18 47 27 99 27 158 c 0 58 -9 111 -27 158 c -18 47 -43 87 -76 121 c -33 33 -73 59 -120 77 c -46 18 -98 27 -155 27 c -57 0 -109 -9 -155 -27 c -46 -19 -85 -45 -118 -77 c -33 -34 -58 -74 -76 -121 c -18 -47 -27 -99 -27 -158 z m 200 0 c 0 29 3 58 8 86 c 6 27 15 52 28 75 c 14 22 32 39 55 52 c 23 13 51 20 84 20 c 34 0 62 -7 84 -20 c 23 -13 42 -30 55 -52 c 14 -23 24 -47 30 -75 c 6 -28 8 -57 8 -86 c 0 -29 -3 -58 -8 -86 c -6 -28 -15 -53 -30 -75 c -13 -22 -31 -39 -55 -52 c -23 -14 -51 -21 -84 -21 c -34 0 -62 7 -84 21 c -23 13 -41 30 -55 52 c -13 22 -23 46 -28 75 c -6 28 -8 57 -8 86 z m -70 -613 h 496 v 105 h -496 v -105 z" />
  </symbol>

  <symbol id="discord" viewBox="0 0 2429 664" fill="currentColor">
    <path d="m353 278c-19 0-34 17-34 37c0 21 16 37 34 37c19 0 35-16 35-37c0-20-16-37-35-37zm-122 0c-19 0-34 17-34 37c0 21 15 37 34 37c19 0 34-16 34-37c0-20-15-37-34-37zm286-278l-449 0c-38 0-68 31-68 69l0 449c0 38 30 68 68 68l380 0l-18-61l43 40l40 37l73 62l0-595c-1-38-31-69-69-69zm-129 434c0 0-12-14-23-27c44-12 61-39 61-39c-14 9-27 15-38 20c-17 7-33 11-49 14c-32 6-62 4-87 0c-19-4-35-9-49-15c-8-3-16-6-24-11c-1-1-2-1-3-2c-1 0-1-1-2-1c-6-3-9-5-9-5c0 0 16 26 59 39c-11 13-23 27-23 27c-74-2-102-50-102-50c0-107 48-194 48-194c48-36 94-35 94-35l3 5c-60 17-87 43-87 43c0 0 7-4 19-9c36-16 65-20 76-21c2-1 4-1 6-1c20-3 44-3 68-1c31 4 66 13 100 32c0 0-26-25-83-42l5-6c0 0 46-1 93 35c0 0 49 87 49 194c0 0-28 48-102 50l0 0zm505-261l-111 0l0 125l74 66l0-121l39 0c26 0 38 12 38 32l0 92c0 20-12 33-38 33l-113 0l0 70l111 0c59 1 115-29 115-97l0-100c1-70-55-100-115-100l0 0zm583 200l0-103c0-37 66-45 86-8l61-25c-24-53-68-68-104-68c-60 0-119 34-119 101l0 103c0 67 59 101 117 101c38 0 83-18 108-67l-66-30c-16 42-83 32-83-4zm-203-89c-23-5-38-13-39-28c1-34 54-35 85-2l49-38c-30-38-65-48-101-48c-55 0-107 31-107 89c0 57 43 88 91 95c24 3 51 13 51 30c-2 32-68 30-98-6l-47 44c28 36 65 54 101 54c55 0 115-31 117-89c4-73-49-91-102-101zm-224 186l75 0l0-297l-75 0l0 297zm1264-297l-111 0l0 125l74 66l0-121l39 0c26 0 38 12 38 32l0 92c0 20-12 33-38 33l-113 0l0 70l111 0c60 1 116-29 116-97l0-100c0-70-56-100-116-100l0 0zm-545-4c-62 0-123 33-123 102l0 101c0 68 62 102 123 102c62 0 123-34 123-102l0-101c0-68-62-102-123-102zm48 203c0 22-24 33-48 33c-24 0-48-11-48-33l0-101c0-22 23-34 47-34c24 0 49 11 49 34l0 101zm344-101c-1-70-49-98-110-98l-119 0l0 297l76 0l0-94l14 0l68 94l94 0l-81-102c36-11 58-42 58-97zm-109 40l-44 0l0-68l44 0c48 0 48 68 0 68z" />
  </symbol>

  <symbol id="dribble" viewBox="0 0 2212 540" fill="currentColor">
    <path d="m675 219.022c25 0 46-20 46-46c0-25-21-46-46-46c-25 0-46 20-46 46c0 25 21 46 46 46zm1511 156c-7-5-12-6-17 4c-77 166-207 83-194 91c29-13 104-74 93-157c-7-51-51-74-97-66c-81 14-111 102-96 179c3 13 7 24 12 35c-92 75-128-67-133-84c0-1 71-60 91-201c21-148-27-175-75-174c-89 2-114 188-81 344c-3 1-15 8-36 8c-15-46-77-86-94-71c-41 39 10 115 46 121c-22 132-156 100-131-66c44-81 77-202 71-275c-2-26-21-60-64-59c-83 3-92 190-82 322c0-3-5 16-39 26c-8-45-80-89-97-68c-32 40 23 112 49 117c-22 132-156 100-131-66c44-81 77-202 71-275c-2-26-21-60-64-59c-83 3-92 190-82 322c0-3-5 17-41 26c-1-58-73-85-91-66c-31 33 7 101 42 117c-22 132-156 100-131-66c44-81 77-202 71-275c-2-26-21-60-64-59c-83 3-90 199-80 332c-27 117-119 263-107-30c1-21 2-28-8-36c-8-6-25-3-35-3c-12 0-15 7-17 18c-6 26-7 52-8 87c-1 16-2 24-8 46c-6 22-42 63-62 56c-27-9-18-87-13-140c4-42-9-61-44-68c-21-4-33-4-54-10c-20-6-25-45-68-32c-24 7-8 57-14 94c-28 182-86 187-113 99c121-296 35-413-15-413c-52 0-112 36-87 267c-12-4-16-6-30-6c-76 0-129 62-129 138c0 76 52 138 129 138c45 0 77-21 101-52c16 22 35 53 70 51c104-4 134-217 138-229c11 2 22 5 32 7c17 3 18 9 18 26c-5 145 22 196 83 196c34 0 64-33 85-57c16 32 40 56 73 57c80 2 111-126 108-109c-2 13 26 108 109 109c102 0 122-112 124-131c0-4 0-3 0 0l0 1c33-6 49-23 49-23c0 0 26 155 123 153c100-2 119-104 122-123c0-5 1-4 0 0c0 0 0 0 0 1c39-14 49-28 49-28c0 0 21 152 123 153c91 1 125-92 125-131c15 0 44-9 43-10c0 0 33 133 126 140c44 3 76-25 95-37c44 36 190 81 283-75c13-22-15-49-20-52zm-2062 114c-45 0-73-41-73-86c0-44 26-86 71-86c20 0 31 2 47 16c3 11 11 37 15 49c5 16 11 29 18 43c-9 37-38 63-77 63zm109-154c-2-3-1-1-4-4c-8-22-24-72-26-128c-2-64 9-138 40-138c21 0 44 151-11 270l0 0zm628-66c-5-38-5-206 35-202c22 9-14 168-35 202zm296 0c-5-38-5-206 35-202c22 9-14 168-35 202zm294 2c-5-38-5-206 35-202c22 9-14 168-35 202zm324-214c37-4 36 158-39 260c-10-37-24-247 39-260l0 0zm156 348c-12-60 19-99 51-104c11-2 27 5 30 19c5 25-1 63-72 110c0 0-7-12-9-25l0 0z" />
  </symbol>

</svg>

CodePudding user response：

You can set the fill attribute to apply color to the svg. For example <svg fill="red" ..> and for apply size you can always set with and hight the svg.

Example using reusable <use> element references setting colors via fill

Example using reusable <use> element references setting colors via currentColor (inherited from text color).

Example using reusable `<use>` element references setting colors via `fill`

Example using reusable `<use>` element references setting colors via `currentColor` (inherited from text color).