如何使用本地文件svg？

Question

如何在 html 文件中使用本地 svg 文件及其样式。我确实尝试使用 svg 并使用标签，但它的样式有问题

<svg class="search__icon">
  <use xlink:href="img/SVG/test/Icons HR.svg#Layer_1"></use>
</svg>

我的 svg 文件内容也是：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 52.94 51" style="enable-background:new 0 0 52.94 51;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
    .st1{display:none;}
    .st2{fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
    .st3{fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;}
    .st4{fill:none;stroke:#000000;stroke-width:4;stroke-miterlimit:10;}
    .st5{fill:none;stroke:#000000;stroke-width:4;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g>
    <path class="st5" d="M22.53,13.21c0.17-0.69,0.26-1.41,0.26-2.15c0-5-4.05-9.06-9.06-9.06s-9.06,4.05-9.06,9.06
        c0,2.97,1.44,5.6,3.65,7.25C4.57,20.27,2,24.19,2,28.72v10.09h12.74"/>
    <path class="st5" d="M38.21,38.81h12.74V28.72c0-4.53-2.57-8.45-6.33-10.41c2.21-1.65,3.65-4.28,3.65-7.25c0-5-4.05-9.06-9.06-9.06
        s-9.06,4.05-9.06,9.06c0,0.96,0.15,1.89,0.43,2.76"/>
    <path class="st5" d="M31.88,28.5c2.21-1.65,3.65-4.28,3.65-7.25c0-5-4.05-9.06-9.06-9.06s-9.06,4.05-9.06,9.06
        c0,2.97,1.44,5.6,3.65,7.25c-3.76,1.96-6.33,5.88-6.33,10.41V49h23.47V38.91C38.21,34.38,35.64,30.46,31.88,28.5z"/>
</g>
</svg>

Answer 1

您可以简单地使用 img 标签并将其 src 属性指向 svg 所在的路径。

<img src="img/SVG/test/IconsHR.svg" alt="">