将 SVG 代码添加到 HTML 的最佳方法是什么

path {
fill:silver;
transition: fill 0.4s;
}
path:hover {
fill:dodgerblue;

}

<svg xmlns="http://www.w3.org/2000/svg" width="26" height="15" viewBox="0 0 26 15"><path fill="black" d="M16.138 11.51c.956-.309 2.18 2.04 3.483 2.939.978.681 1.727.534 1.727.534l3.473-.05s1.815-.112.957-1.554c-.071-.12-.503-1.069-2.585-3.022-2.177-2.043-1.882-1.712.739-5.244 1.597-2.153 2.236-3.468 2.036-4.028-.192-.539-1.365-.399-1.365-.399L20.69.713c-.381.001-.704.119-.851.515-.003.004-.621 1.666-1.445 3.079-1.741 2.989-2.436 3.148-2.724 2.961-.661-.433-.494-1.737-.494-2.664 0-2.897.432-4.105-.846-4.417-.427-.104-.739-.172-1.828-.182-1.392-.021-2.574 0-3.244.329-.445.223-.786.712-.579.74.26.035.843.16 1.155.586.401.552.389 1.789.389 1.789s.229 3.411-.54 3.834c-.528.29-1.25-.302-2.803-3.016-.793-1.388-1.392-2.922-1.392-2.922s-.116-.285-.326-.441c-.25-.185-.6-.244-.6-.244L.848.684S.29.7.085.946c-.182.218-.015.668-.015.668s2.909 6.881 6.203 10.347c3.02 3.182 6.452 2.971 6.452 2.971h1.555s.469-.054.709-.312c.224-.24.214-.691.214-.691s-.031-2.109.935-2.419z"/></svg>

a path {
  fill:var(--c,#444142);
  stroke:none;
  pointer-events:all;
  transition:0.5s;
}
a circle {
  fill:none;
  stroke:var(--c,#444142);
  pointer-events:all;
  stroke-width: 1;
  transition:0.5s;
}


.fb__icon:hover { --c:#3c589a; } 
.t__icon:hover  { --c:#68acd2; }  
.g__icon:hover { --c:#d54133; } 
.yt__icon:hover { --c:#e72c2e; } 

<svg class="icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" viewBox="0 0 136 32">
  <a class="fb__icon off" xlink:href="#">
    <circle cx="16" cy="16" r="15" />
    <path d="m 17.222624,12.7308 0,-1.3112 c 0,-0.6288 0.4164,-0.7793 0.717803,-0.7793 0.292194,0 1.833815,0 1.833815,0 l 0,-2.7998 -2.524994,0 c -2.808334,0 -3.437377,2.0731 -3.437377,3.4198 l 0,1.4705 -1.630252,0 0,3.2694 1.647765,0 c 0,3.7119 0,8.1684 0,8.1684 l 3.269292,0 c 0,0 0,-4.5185 0,-8.1684 l 2.418591,0 0.106532,-1.2848 0.194742,-1.9846 -2.595917,0" />
  </a>
  <a class="t__icon off" xlink:href="#">
    <circle cx="50" cy="16" r="15" />
    <path d="m 58.168343,11.0178 c -0.593885,0.2571 -1.240115,0.4341 -1.92221,0.5226 0.699543,-0.416 1.230744,-1.054 1.479543,-1.8335 -0.646876,0.3809 -1.373239,0.6555 -2.135143,0.806 -0.603256,-0.6464 -1.479543,-1.045 -2.454057,-1.045 -1.842724,0 -3.349086,1.4792 -3.349086,3.2946 0,0.2658 0.04459,0.5139 0.09758,0.7533 -2.79042,-0.1331 -5.262571,-1.444 -6.9104567,-3.4458 -0.2833717,0.4962 -0.4604386,1.0544 -0.4604386,1.6565 0,1.1513 0.602286,2.1611 1.4879433,2.7457 -0.5489716,-0.01 -1.0630473,-0.1595 -1.5144387,-0.4076 0,0.018 0,0.027 0,0.044 0,0.4251 0.079809,0.815 0.2300577,1.1868 0.4077709,1.0366 1.338019,1.8158 2.463427,2.0374 -0.293065,0.08 -0.576436,0.1237 -0.886303,0.1237 -0.21261,0 -0.4252196,-0.026 -0.6294282,-0.071 0.4345892,1.3109 1.6656572,2.2674 3.1280742,2.3029 -1.152227,0.8857 -2.58718,1.4084 -4.1552562,1.4084 -0.2749707,0 -0.5315239,-0.018 -0.8061715,-0.045 1.4882669,0.9303 3.2511817,1.4792 5.1384947,1.4792 5.235753,0 8.469486,-3.6225 9.310554,-7.3867 0.151218,-0.6729 0.221657,-1.3373 0.221657,-1.9928 0,-0.1417 0,-0.292 0,-0.4251 0.646876,-0.4693 1.22299,-1.054 1.665657,-1.7094 l 0,0" />
  </a>
  <a class="g__icon off" xlink:href="#">
    <circle cx="84" cy="16" r="15" />
    <path d="m 92.98962,15.0525 c -0.105982,0 -0.229735,0 -0.354134,0 0,-0.027 0,-0.062 0,-0.072 0,-0.097 0,-0.1767 0,-0.2478 0,-0.452 0.009,-0.9037 0,-1.3645 0,-0.071 -0.08853,-0.2036 -0.124399,-0.2036 -0.406802,-0.018 -0.82362,-0.018 -1.25724,-0.018 0,0.5493 0,1.0634 0,1.5859 0,0.098 0,0.2038 0,0.3008 -0.647199,0 -1.249162,0 -1.905408,0 0,0.1509 0,0.2488 0,0.346 0.01809,0.3367 0.02714,0.6821 0.05331,1.0185 0.327961,0.018 0.655923,0.035 1.000687,0.035 0.275616,0.01 0.558342,0 0.859485,0 0,0.6556 0,1.2583 0,1.8606 0.470132,-0.01 0.903752,0 1.373561,0 0,-0.6204 0,-1.2227 0,-1.8606 0.637829,0 1.240115,0 1.860172,0 0,-0.3631 0,-0.6998 0,-1.054 0,-0.1153 0,-0.2216 0,-0.3276 -0.495658,0 -1.000686,0 -1.506038,0 l 0,0 z m -5.359829,-0.1687 c -1.178076,0.018 -2.356476,0.018 -3.534553,0.018 -0.336362,0 -0.682095,-0.018 -1.01038,0 -0.07044,0 -0.176744,0.08 -0.176744,0.1238 -0.009,0.6827 -0.009,1.3645 -0.009,2.0734 0.96579,0 1.913486,0 2.879276,0 -0.02649,0.1416 -0.05299,0.2479 -0.09726,0.3455 -0.43459,1.3112 -1.790056,1.9581 -3.251828,1.719 -1.807181,-0.3015 -2.9232198,-1.9672 -2.5955814,-3.7744 0.035543,-0.2569 0.1240761,-0.505 0.2126094,-0.7354 0.602286,-1.3112 2.081829,-2.1087 3.543924,-1.7807 0.522476,0.1153 0.974837,0.3544 1.35482,0.6999 0.531847,-0.5316 1.036876,-1.0366 1.586171,-1.5856 -0.03554,-0.027 -0.09726,-0.071 -0.1328,-0.1153 -1.275658,-1.0721 -2.737752,-1.4709 -4.376591,-1.1962 -2.3658465,0.3809 -4.0660767,2.2414 -4.4292578,4.4118 -0.1683428,0.9216 -0.097581,1.9051 0.2659235,2.8616 0.9037522,2.2951 3.2153153,3.7032 5.6961913,3.4289 1.213619,-0.1331 2.294761,-0.5671 3.127428,-1.4621 1.248516,-1.3287 1.576155,-2.9233 1.372915,-4.6865 -0.03554,-0.2921 -0.150248,-0.3454 -0.425219,-0.3454 l 0,0" />
  </a>
  <a class="yt__icon off" xlink:href="#">
    <circle cx="118" cy="16" r="15" />
    <path d="m 120.728382,15.8186 -4.420857,2.382 0,-4.7824 2.002342,1.0896 2.418515,1.3108 z m 5.280019,-3.2241 c 0,0 -0.167697,-1.1781 -0.6556,-1.6917 -0.619734,-0.6732 -1.319924,-0.6819 -1.629791,-0.7265 -2.285714,-0.1683 -5.714286,-0.1683 -5.714286,-0.1683 l -0.01809,0 c 0,0 -3.419201,0 -5.705562,0.1683 -0.3273153,0.045 -1.0184579,0.053 -1.6385152,0.7265 -0.4875803,0.5136 -0.6552769,1.6917 -0.6552769,1.6917 0,0 -0.1689891,1.3816 -0.1689891,2.7454 l 0,1.3021 c 0,1.3816 0.1689891,2.7457 0.1689891,2.7457 0,0 0.1676966,1.1781 0.6552769,1.7005 0.6200573,0.6819 1.4355992,0.6557 1.8075042,0.7261 1.302153,0.1331 5.554667,0.1773 5.554667,0.1773 0,0 3.428572,-0.018 5.714286,-0.1773 0.309867,-0.044 1.010057,-0.044 1.629791,-0.7261 0.487903,-0.5224 0.6556,-1.7005 0.6556,-1.7005 0,0 0.159296,-1.3641 0.159296,-2.7457 l 0,-1.3021 c 0,-1.3638 -0.159296,-2.7454 -0.159296,-2.7454 l 0,0" />
  </a>
</svg>