如何在我的网站上使用W3.org的SVG图标？

Question

我经常浏览网站中的元素，经常看到一些东西，比如：

<svg width="13" height="13" viewBox="0 0 13 13" version="1.1"
xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink" data-ui-test="undefined-svg">
<use x="0" y="0" width="13" height="13" xlink:href="/images/icons/icon_definitions.svg#heart"></use></svg>

我该如何在我的网站上使用类似那样的图标？我尝试访问W3.org以弄清楚如何做，但它并不是很清楚，如果可能的话。有人可以解释一下吗？

- Brett Malone

Answer 1

如果你使用文本编辑器打开任何.svg文件，你会看到类似的代码。它只是用XML语言描述的二维矢量图形，可以直接在HTML中使用。

SVG是一种基于XML的语言，用于描述二维向量和混合向量/光栅图形。 来源：w3.org/TR/SVG2/

作为示例，你可以查看iconsvg.xyz。这些图标中的每一个都可以下载为.svg，但你可以在下载按钮正上方看到它们的代码。

- Jax-p

Answer 2

我对SVG图标并不是很了解，但我在我的项目中使用过一些。格式如下所示，这是我创建的代码片段。有一个网站我用来获取免费图标，但它们并不多。该网站是https://iconsvg.xyz/。它会给你选定的图标的完整代码，你只需将其粘贴到你的HTML文件中即可。

<div>
  <h5>This is a user icon</h5>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5.52 19c.64-2.2 1.84-3 3.22-3h6.52c1.38 0 2.58.8 3.22 3"/><circle cx="12" cy="10" r="3"/><circle cx="12" cy="12" r="10"/></svg>
  
  <h5>This is a brand icon</h5>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#000"><path d="M12.04 3.5c.59 0 7.54.02 9.34.5a3.02 3.02 0 0 1 2.12 2.15C24 8.05 24 12 24 12v.04c0 .43-.03 4.03-.5 5.8A3.02 3.02 0 0 1 21.38 20c-1.76.48-8.45.5-9.3.51h-.17c-.85 0-7.54-.03-9.29-.5A3.02 3.02 0 0 1 .5 17.84c-.42-1.61-.49-4.7-.5-5.6v-.5c.01-.9.08-3.99.5-5.6a3.02 3.02 0 0 1 2.12-2.14c1.8-.49 8.75-.51 9.34-.51zM9.54 8.4v7.18L15.82 12 9.54 8.41z"/></svg>

</div>

- Michael Kibuku