logo标签列表

使用内联 SVG 作为网站图标。

htmlsvg
10

我有一个单独的HTML页面，我想从inline svg创建一个favicon并在HTML内部使用它。如何进行？

这是我的当前尝试：

<!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>
5个回答
20

  1. 您可以使用此工具对SVG进行编码 https://yoksel.github.io/url-encoder/

  2. 在此标记中添加已编码的SVG

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

它可以是dataURL，不需要使用base64。你只需要用"%23"替换"#"，放在一行上，当然要小心引号。我的搜索引擎页面favicon：

<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提供的链接可能会很有用。

1

您需要转义两个字符：

// # 1
const encodedSVG = svg.replace(/\"/g, '%22').replace(/\#/g, '%23')

const link = document.head.querySelector('link[rel="icon"]')
link.href = `data:image/svg+xml,${encodedSVG}`

就是这样了。

# 1 如果你的SVG是一个元素，请先将其转换为字符串

const svg = svgElement.outerHTML
...
0

前往此处 https://www.restonk.com/SVGEncoder

将SVG文件拖放到页面上或将SVG粘贴到输入框中。

从标记为“favicon”的文本框中复制 并将其粘贴到html文档的 中。该网站具有url编码和base64选项，并且可以正确地进行url编码。

-2
3
不，它可以是一个data URL。 - Robert Longson
抱歉，我想说的是“简单的方法”，在第二部分中是bas64方法，我的英语不太流利，所以表达得不好。我已经用dataURL进行了编辑。 - Sergio Carvalho
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接