html 使用内嵌SVG作为收藏夹图标

nxowjjhe 于 2022-11-27 发布在其他

关注(0)|答案(3)|浏览(244)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/svg+xml" sizes="21x21" href="favicon16.svg">
    <title>Document</title>
</head>
<body>
    <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
   </svg>
</body>
</html>

我只有一个单一的网页HTML与，javascript是内联，我想创建一个图标，并在HTML内使用它。任何帮助，请。

Html

来源：https://stackoverflow.com/questions/66935329/use-inline-svg-as-favicon

3条答案

按热度按时间

pgpifvop1#

1.您可以使用此工具对SVG进行编码https://yoksel.github.io/url-encoder/
1.在此标记中添加编码的SVG

<link rel="icon" href="data:image/svg+xml,[YOUR ENCODED SVG HERE]" type="image/svg+xml" />

赞(0）回复(0）举报 2022-11-27

yvgpqqbh2#

它可以是dataURL，并且不需要使用base64。你只需要把“#”和“%23”交换，把所有的放在一行，当然，要小心引号。我的搜索引擎页面图标：

<link rel="shortcut icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='.8 .8 14.4 14.4'><path d='M10 8.99a1 1 0 00-.695 1.717l4.004 4a1 1 0 101.414-1.414l-4.004-4A1 1 0 0010 8.99z' fill='%2380b0ff' stroke='%235D7FDDaa' stroke-width='.3'/><path d='M6.508 1C3.48 1 1.002 3.474 1.002 6.5S3.48 12 6.508 12s5.504-2.474 5.504-5.5S9.536 1 6.508 1zm0 2a3.486 3.486 0 013.504 3.5c0 1.944-1.556 3.5-3.504 3.5a3.488 3.488 0 01-3.506-3.5C3.002 4.556 4.56 3 6.508 3z' fill='%2380b0ff' stroke='%235D7FDDaa' stroke-width='.3'/></svg>">

但正确的做法应该是：

<link rel="shortcut icon" href="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='.8%20.8%2014.4%2014.4'%3e%3cpath%20d='M10%208.99a1%201%200%2000-.695%201.717l4.004%204a1%201%200%20101.414-1.414l-4.004-4A1%201%200%200010%208.99z'%20fill='%2380b0ff'%20stroke='%235D7FDDaa'%20stroke-width='.3'/%3e%3cpath%20d='M6.508%201C3.48%201%201.002%203.474%201.002%206.5S3.48%2012%206.508%2012s5.504-2.474%205.504-5.5S9.536%201%206.508%201zm0%202a3.486%203.486%200%20013.504%203.5c0%201.944-1.556%203.5-3.504%203.5a3.488%203.488%200%2001-3.506-3.5C3.002%204.556%204.56%203%206.508%203z'%20fill='%2380b0ff'%20stroke='%235D7FDDaa'%20stroke-width='.3'/%3e%3c/svg%3e">

......所以Jeremie提供的链接可能有用。

赞(0）回复(0）举报 2022-11-27

wfsdck303#

Favicon需要是一个外部文件，或者是一个[DataURL][1]，你可以使用SVG，但是它需要保存为一个独立的文件，并指向href，如“favicon16.svg”。或者转换为base64并插入为DataURLRead more
但是如果您尝试使用SVG动态创建自定义图标，我建议您使用以下方法：SVG to Base64、using base64 as favicon和how to change favicon dynamically

赞(0）回复(0）举报 2022-11-27

我来回答

html 使用内嵌SVG作为收藏夹图标

3条答案

相关问题

热门标签

最新问答