将SVG图标嵌入到html中

问题描述 投票:0回答:1

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

我试图将<link>SVG file contents</link>添加到html但它没有用。

我的html qazxsw poi:

<head>
html html5 svg favicon
1个回答
2
投票

您可以使用<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> 作为data URLhref属性的值。就像enxaneta所说,<link>强烈建议你首先将SVG转换为PNG(最简单的是从矢量grafics UI导出它)。之后,您将其转换为数据网址,例如使用compatibility data

如果您坚持直接使用SVG,this online tool在线实用程序更适合SVG,您可以放入源文本。

你的最终结果如下:

this

要么

<link rel="icon" href="data:image/png;base64,...">
© www.soinside.com 2019 - 2024. All rights reserved.