如何在HTML中使用SVG文件中的符号

Question

我有一个https://github.com/rajamunuma/test/blame/main/test.svg文件，内容如下

<svg width="100" height="100">
<symbol id="icon-checkmark" viewBox="0 0 16 13">
<title>checkmark icon</title>
<path d="M13.189,0,6.054,7.258,2.811,3.9,0,6.825l3.243,3.358h0L6.054,13,16,2.817Z" fill-rule="evenodd"/>
</symbol>
<svg>

我想使用符号"icon-checkmark"直接在HTML文件中。像下面的

<img src="https://github.com/rajamunuma/test/blame/main/test.svg#icon-checkmark" />
<img src="https://github.com/rajamunuma/test/blame/main/test.svg#svgView(viewBox(0,0,16,13))" />

注意:我不能直接复制svg文件的内容到我的html文件。我想引用svg文件路径并将其包含在html页面上。

Answer 1

您需要定义符号像下面的图标片段。
我希望下面的代码片段对你有很大的帮助。

有用链接:
https://css-tricks.com/svg-symbol-good-choice-icons/

.icon {
stroke: unset;
stroke-width: 0px;
fill: currentColor;
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.15em;
}

<svg class="icon">
<use href="#icon-checkmark"></use>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="icon-checkmark" viewBox="0 0 16 13">
<path d="M13.189,0,6.054,7.258,2.811,3.9,0,6.825l3.243,3.358h0L6.054,13,16,2.817Z" fill-rule="evenodd"/>
</symbol>
<svg>