将 SVG 图标嵌入 html

Question

我需要将我的 SVG 图标直接嵌入到 html 文件中，而不是作为 link 嵌入到 SVG 文件中。

我尝试将 <link>SVG file contents</link> 添加到 html，但没有成功。

我的html的<head>：

<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, minimal-ui"/>
<meta name="theme-color" content="#568342"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-title" content="My App"/>
<link rel="apple-touch-icon" href="images/icon_apple.png"/>
<link rel="icon" href="images/icon.png"/>
<title>My App</title>
</head>

Answer 1

您可以使用 data URL as a value for the href attribute of the <link>. Like enxaneta remarked, the compatibility data strongly suggest that you first convert the SVG to a PNG (easiest is exporting it from a vector grafics UI). After that you would convert it to a data url, for example with this online tool.

如果您坚持直接使用 SVG，this在线工具更适合 SVG，您可以放入源文本。

您的最终结果如下所示：

<link rel="icon" href="data:image/png;base64,...">

或

<link rel="icon" href="data:image/svg+xml,...">

将 SVG 图标嵌入 html

Embed SVG icon into html

html

favicon

svg