是否可以将SVG图标嵌入到HTML页面中

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

关注(0)|答案(2)|浏览(208)

我有一个html文件与一些javascript本地脱机在我的电脑上，并希望嵌入一个svg图标在html文件中显示在浏览器中，而不需要一个额外的favicon.svg文件。有可能得到这个工作一些如何？

<html>
 <head>
  <link rel="icon" type="image/svg+xml" href="favicon.svg">
  ...

所以我想在html页面中嵌入favicon.svg而不是<link rel="icon" type="image/svg+xml" href="favicon.svg">。
这里是favicon.svg的一个例子

<svg
 width="256"
 height="256"
 viewBox="0 0 256 256">
 <rect
  style="fill:#FF3010;stroke:none"
  width="256"
  height="256"
  x="0"
  y="0" />
</svg>

根据Embed SVG icon into html，我尝试了
只需粘贴SVG内容：

<link rel="icon" href="data:image/svg+xml,<svg width="256" height="256" viewBox="0 0 256 256"><rect style="fill:#FF3010;stroke:none" width="256" height="256" x="0" y="0" /></svg>">

已将双引号（"）替换为单引号（'）：

<link rel="icon" href="data:image/svg+xml,<svg width='256' height='256' viewBox='0 0 256 256'><rect style='fill:#FF3010;stroke:none' width='256' height='256' x='0' y='0' /></svg>">

已将特殊字符转换为%XX格式：

<link rel="icon" href="data:image/svg+xml,%3Csvg%20width=%22256%22%20height=%22256%22%20viewBox=%220%200%20256%20256%22%3E%3Crect%20style=%22fill:#FF3010;stroke:none%22%20width=%22256%22%20height=%22256%22%20x=%220%22%20y=%220%22%20/%3E%3C/svg%3E">

将SVG内容翻译成Base64：

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

但在所有情况下，浏览器中均未显示favicon。
我试了火狐ESR102.5.0和铬104.0.5112.105。
作为额外favicon.svg文件的favicon工作正常，但嵌入的数据不工作。

Html

来源：https://stackoverflow.com/questions/74583468/is-it-possible-to-embed-svg-favicon-into-html-page

2条答案

按热度按时间

vc9ivgsu1#

你需要告诉浏览器它将要显示什么样的图像/文档。对于SVG文档来说，这意味着要包括一个XML声明和XML名称空间。
因此，您的SVG文档应类似于：

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256"
  viewBox="0 0 256 256">
  <rect style="fill:#FF3010;stroke:none" width="256" height="256"
    x="0" y="0" />
</svg>

然后像你写的那样把它写进去：

<html>
 <head>
  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiB3aWR0aD0iMjU2IgogaGVpZ2h0PSIyNTYiCiB2aWV3Qm94PSIwIDAgMjU2IDI1NiI+CiA8cmVjdAogIHN0eWxlPSJmaWxsOiNGRjMwMTA7c3Ryb2tlOm5vbmUiCiAgd2lkdGg9IjI1NiIKICBoZWlnaHQ9IjI1NiIKICB4PSIwIgogIHk9IjAiIC8+Cjwvc3ZnPgo=">
  ...

您可以随时通过在浏览器中打开SVG来测试它是否工作。
现在，我只在Firefox中使用base64数据URL进行了测试。也许在某些情况下，您会遇到源地址（CORS）的问题。为了缓解这个问题，您需要在HTTP响应中使用一个Content-Security-Policy，或者至少在HTML中使用一个Content Security Policy meta元素来声明数据URL是正确的。如下所示：

<meta http-equiv="Content-Security-Policy" content="default-src data:" />

在这里，您可以看到策略中提到的data:模式。

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

ajsxfq5m2#

是的，谢谢你。只是包括名称空间的东西做的技巧
第一个
谢谢你！

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

我来回答

是否可以将SVG图标嵌入到HTML页面中

2条答案

相关问题

热门标签

最新问答