如何使用本地SVG文件？

Question

如何在HTML文件中使用本地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>

- Behzad Jafari

Answer 1

您可以使用img标签，并将其src属性指向包含SVG文件的路径。

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

- kokila

---

它的行为是否像矢量文件？ - Behzad Jafari

是的。然而，将SVG嵌入HTML的每种技术都有其优缺点。以下是一些在HTML中嵌入SVG的技术 https://www.smashingmagazine.com/2014/11/styling-and-animating-svgs-with-css/。希望能对您有所帮助！ - kokila